Vue框架入门基础知识

什么是Vue？

  • Vue 是一套前端框架，免除原生JavaScript中的DOM操作，简化书写
    • 框架:是一个半成品软件，是一套可重用的、通用的、软件基础代码模型。基于框架进行开发，更加快捷、更加高效。
  • 基于MVVM(Model-View-ViewModel)思想，实现数据的双向绑定，将编程的关注点放在数据上
    • 好处
      • 低耦合：一个ViewModel可以绑定多个View
      • 可复用：可以放一些视图逻辑在ViewModel上，让很多View用
      • 独立开发：开发和设计页面分开
      • 可测试
  • 官网

什么是数据的双向绑定？

如下图所示，数据的双向绑定就是基于MVVM的思想，在View和Model中间搭建了一个ViewModel的桥梁，View和Model两者只要一方发生改变，另一方就能通过ViewModel接收到改变的信号从而根据对方改变的数据而进行改变
在这里插入图片描述

Vue快速入门

新建html页面，引入Vue.js文件

vue.js是vue官方的一个文件，要想使用vue框架，必须引入这个文件

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

在JS代码区域，创建Vue核心对象，定义数据模型

在script代码块中新建一个vue的对象，在这个新建的对象中传递两个属性，el和data，el代表vue要控制哪个区域，data则定义了数据模型

    <script>
        //定义vue对象
        new Vue({
            el:'#app',//vue接管区域
            data:{
                message:'hello vue'
            }
        })
    </script>

编写视图

这里使用到了一个插值表达式{{表达式}}
内容可以是

  • 变量
  • 三元运算符
  • 函数调用
  • 算术运算
    <div id="app">
        <input type="text" v-model="message">
        {{message}}
    </div>

hello vue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue快速入门</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="message">
        {{message}}
    </div>

    <script>
        //定义vue对象
        new Vue({
            el:'#app',//vue接管区域
            data:{
                message:'hello vue'
            }
        })
    </script>
</body>

</html>

在网页中打开就像这样
在这里插入图片描述
v-model进行了数据的双向绑定，所以能展现出来
这个代码语法是vue2版本的，所以记得用2版本的引用！
在这里插入图片描述

Vue常用指令

指令作用
v-bind为HTML标签绑定属性值，如设置href，css样式等
v-model在表单元素上创建双向数据绑定
v-on为HTML标签绑定事件
v-if/else-if/else条件性的渲染某元素，判定为true时渲染,否则不渲染
v-show根据条件展示某元素，区别在于切换的是display属性的值
v-for列表渲染，遍历容器的元素或者对象的属性

v-bind

为HTML标签绑定属性值，如设置href，css样式等
链接1和2的区别在于v-bind可简写，但是冒号不可省略

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-bind指令</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <a v-bind:href="url">链接1</a>
        <a :href="url">链接2</a>
    </div>

    <script>
        //定义vue对象
        new Vue({
            el:'#app',//vue接管区域
            data:{
                url:"https://www.baidu.com"
            }
        })
    </script>
</body>

</html>

在这里插入图片描述

v-model

在表单元素上创建双向数据绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-bind指令</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <a v-bind:href="url">链接1</a>
        <a :href="url">链接2</a>

        <!-- v-model -->
        <input type="text" v-model="url">
    </div>

    <script>
        //定义vue对象
        new Vue({
            el:'#app',//vue接管区域
            data:{
                url:"https://www.baidu.com"
            }
        })
    </script>
</body>

</html>

在这里插入图片描述
注意：通过v-bind或者v-model绑定的变量，必须在数据模型中声明，否则打开f12会提示没有这么个url

v-on

为HTML标签绑定事件
v-on:d等同于@

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>v-on指令</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
  </head>
  <body>
    <div id="app">
      <input type="button" value="点一下试试呢" v-on:click="handle">
    </div>

    <script>
      //定义vue对象
      new Vue({
        el: "#app", //vue接管区域
        data: {},
        methods: {
          handle: function () {
            alert("不许点!");
          },
        },
      });
    </script>
  </body>
</html>

在这里插入图片描述

v-if/else-if/else和v-show

v-if/else-if/else

  • 条件性的渲染某元素，判定为true时渲染,否则不渲染

v-show

  • 根据条件展示某元素，区别在于切换的是display属性的值
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-if指令</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
</head>
<body>
    <div id="app">
        年龄<input type="text" v-model="age">经判定,为:
        <span v-if="age<=35">年轻人(35岁及以下)</span>
        <span v-else-if="age>35 && age<60">中年人(35-60)</span>
        <span v-else>老年人(60及以上)</span>

        <br>

        年龄<input type="text" v-model="age">经判定,为:
        <span v-show="age<=35">年轻人(35岁及以下)</span>
        <span v-show="age>35 && age<60">中年人(35-60)</span>
        <span v-show="age>=60">老年人(60及以上)</span>
    </div>

    <script>
        //定义vue对象
        new Vue({
            el:'#app',//vue接管区域
            data:{
                age:20
            }
        })
    </script>
</body>

</html>

在这里插入图片描述

v-for

列表渲染，遍历容器的元素或者对象的属性
v-for=“遍历出来的元素，固定关键字in，指定遍历的数组”
遍历的索引从0开始

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-for指令</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <div v-for="addr in addrs">{{addr}}</div>
        <hr>
        <div v-for="(addr,index) in addrs">{{index}}:{{addr}}</div>
    </div>

    <script>
        //定义vue对象
        new Vue({
            el:'#app',//vue接管区域
            data:{
                addrs:['烤鸭','炸鸡','黄焖鸡','口水鸡','铁锅炖大鹅']
            },
            methods:{
                
            }
        })
    </script>
</body>

</html>

在这里插入图片描述

Vue的生命周期

生命周期：指一个对象从创建到销毁的整个过程
一共有八个阶段，每触发一个生命周期事件，会自动执行一个生命周期方法（钩子）

状态创建周期
beforeCreate创建前
created创建后
beforeMount挂载前
mounted挂载完成
beforeUpdate更新前
updated更新后
beforeDestroy销毁前
destroved销毁后

在这里插入图片描述
我们最主要掌握mounted 方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-指令</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
</head>
<body>
    <div id="app">
        
    </div>

    <script>
        //定义vue对象
        new Vue({
            el:'#app',//vue接管区域
            data:{
                
            },
            mounted(){
                alert('Vue挂载完毕,发送请求获取数据');
            },
            methods:{

            }
        })
    </script>
</body>

</html>

在这里插入图片描述

AJAX

作用

  • 数据交换:通过Ajax可以给服务器发送请求，并获取服务器响应的数据。
  • 异步交互:可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如: 搜索联想、用户名是否可用的校验等等。

Axios

对原生的Ajax及逆行封装，简化书写，快速开发

Axios使用

引入Axios的js文件
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
使用Axios发送请求，并获取响应结果

.then后面是成功回调函数，可以打开网页的f12模式看输出控制台
url网址内容已经不可访问了，可以自行在idea内写一个get】post请求访问的页面进行访问测试，这边只是讲一下格式问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ajax-axios</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <input type="button" value="获取数据get" onclick="get()">
    <input type="button" value="删除数据post" onclick="post()">

    <script>
        function get(){
            // 通过axios发送异步请求get
            axios({
                method:'get',
                url:'http://yapi.smart-xwork.cn/mock/169327/emp/list'
            }).then(result=>{
                console.log(result.data);
            })
        }

        function post(){
            // 通过axios发送异步请求post
            axios({
                method:'post',
                url:'http://yapi.smart-xwork.cn/mock/169327/emp/deleteById',
                data:'id=1'
            }).then(result=>{
                console.log(result.data);
            })
        }
    </script>
</body>
</html>

Axios请求方式别名

在这里插入图片描述

get简写

      function get() {
        // 通过axios发送异步请求get
        axios
          .get("http://yapi.smart-xwork.cn/mock/169327/emp/list")
          .then((result) => {
            console.log(result.data);
          });
      }

post简写

      function post() {
        // 通过axios发送异步请求post
        axios
          .post("http://yapi.smart-xwork.cn/mock/169327/emp/deleteById", "id=1")
          .then((result) => {
            console.log(result.data);
          });
      }

前端工程化

下载NodeJS

前篇博客有讲，可以点击看一下->NodeJS安装极速版

Vue脚手架工具

以管理员身份打开命令提示符

在这里插入图片描述

输入以下命令

npm install -g @vue/cli

在这里插入图片描述
在这里插入图片描述
未完待续，也可能不续了(இдஇ; )

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/320168.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

看完这篇带你了解大学生必考安全证书NISP详解

看完这篇带你了解大学生必考安全证书NISP详解

NISP证书详解 NISP证书介绍&#xff1a;NISP证书等级&#xff1a;NISP&#xff08;一级&#xff09;报名&#xff1a;NISP&#xff08;一级&#xff09;课程大纲&#xff1a;NISP&#xff08;二级&#xff09;报名NISP&#xff08;二级&#xff09;课程大纲NISP二级置换CISP指南…
阅读更多...
Java中的泛型

Java中的泛型

泛型 什么是泛型泛型类泛型接口泛型方法通配符泛型的上下限 泛型的注意事项擦除问题基本数据类型问题 什么是泛型 定义类、接口、方法时&#xff0c;同时声明了一个或者多个类型变量&#xff08;如&#xff1a;&#xff09;&#xff0c;称为泛型类、泛型接口&#xff0c;泛型方…
阅读更多...
说说TCP 3次握⼿和4次握手

说说TCP 3次握⼿和4次握手

三次握手过程 client端建⽴连接&#xff0c;发送⼀个SYN同步包&#xff0c;发送之后状态变成SYN_SENTserver端收到SYN之后&#xff0c;同意建⽴连接&#xff0c;返回⼀个ACK响应&#xff0c;同时也会给client发送⼀个SYN包&#xff0c;发送完成之后状态变为SYN_RCVDclient端收到…
阅读更多...
PySide6/PyQt6中的时间管理类：QTime的使用方法

PySide6/PyQt6中的时间管理类：QTime的使用方法

文章目录 📖 介绍 📖🏡 环境 🏡📒 使用方法 📒📝 创建QTime对象📝 常用方法⚓️ 相关链接 ⚓️📖 介绍 📖 QTime是PySide6中用于处理时间段的类，可以用来表示一天中的时间，例如小时、分钟和秒。它提供了许多操作和格式化时间的功能，使得处理时间变得更加…
阅读更多...
MATLAB中simulink中scope同时显示两个输入信号

MATLAB中simulink中scope同时显示两个输入信号

在使用scope时&#xff0c;需要两个输入信号的设置方法 1.点开scope图标 2 点击设置按钮&#xff0c; 然后弹出configuration properties&#xff1a;scope配置图&#xff0c;在Main选项下&#xff0c;在Number of input ports&#xff1a;1这里面更改数字&#xff0c;需要几…
阅读更多...
vscode中如何解决 Comments are not permitted（JSON中不允许注释）

vscode中如何解决 Comments are not permitted（JSON中不允许注释）

vs code中如何解决Comments are not permitted&#xff08;JSON中不允许注释&#xff09;&#xff1f; 简单几步&#xff0c;让你轻松解决。 1.使用vscode打开json文件后&#xff0c;一些注释显示如图所示&#xff0c;有红色波浪线&#xff0c;影响阅读 2. 悬浮在波浪线报错信…
阅读更多...
【MySQL】mysql集群

【MySQL】mysql集群

文章目录 一、mysql日志错误日志查询日志二进制日志慢查询日志redo log和undo log 二、mysql集群主从复制原理介绍配置命令 读写分离原理介绍配置命令 三、mysql分库分表垂直拆分水平拆分 一、mysql日志 MySQL日志 是记录 MySQL 数据库系统运行过程中不同事件和操作的信息的文件…
阅读更多...
RocketMQ源码阅读-Broker消息接收

RocketMQ源码阅读-Broker消息接收

RocketMQ源码阅读-Broker消息接收 1. 从单元测试入手2. Broker启动流程3. Broker接收消息4. Broker接收消息时序图5. 小结 Broker接收 Producer发送的消息。 Broker在RocketMQ中也是一个独立的Model&#xff0c;rocketmq-broker。 Broker的核心类为SendMessageProcessor。 …
阅读更多...
opencv多张图片实现全景拼接

opencv多张图片实现全景拼接

最近camera项目需要用到全景拼接&#xff0c;故此查阅大量资料&#xff0c;终于将此功能应用在实际项目上&#xff0c;下面总结一下此过程中遇到的一些问题及解决方式&#xff0c;同时也会将源码附在结尾处&#xff0c;供大家参考&#xff0c;本文采用的opencv版本为3.4.12。 首…
阅读更多...
一天吃透JVM面试八股文

一天吃透JVM面试八股文

内容摘自我的学习网站&#xff1a;topjavaer.cn 什么是JVM&#xff1f; JVM&#xff0c;全称Java Virtual Machine&#xff08;Java虚拟机&#xff09;&#xff0c;是通过在实际的计算机上仿真模拟各种计算机功能来实现的。由一套字节码指令集、一组寄存器、一个栈、一个垃圾回…
阅读更多...
前端基础知识整理汇总（下）

前端基础知识整理汇总（下）

react 生命周期 React v16.0前的生命周期 初始化(initialization)阶段 此阶段只有一个生命周期方法&#xff1a;constructor。 constructor() 用来做一些组件的初始化工作&#xff0c;如定义this.state的初始内容。如果不初始化 state 或不进行方法绑定&#xff0c;则不需…
阅读更多...
Jenkins自动化部署docker

Jenkins自动化部署docker

Jenkins自动化部署docker和普通方式构建 docker外挂目录 准备测试服务器docker环境准备jdk环境将上传jar包修改为app.jar对外暴露1000端口启动jar FROM openjdk:8-jdk-alpine ARG JAR_FILE COPY ${JAR_FILE} app.jar EXPOSE 1000 ENTRYPOINT ["java","-jar&q…
阅读更多...
spring-boot2.7.8添加swagger

spring-boot2.7.8添加swagger

一、新建项目swaggerdemo 二、修改pom.xml 注意修改&#xff1a;spring-boot-starter-parent版本为&#xff1a;2.7.8 添加依赖&#xff1a; springfox-swagger2 springfox-swagger-ui springfox-boot-starter <?xml version"1.0" encoding"UTF-8"…
阅读更多...
ruoyi后台管理系统部署-3-安装redis

ruoyi后台管理系统部署-3-安装redis

centos7安装redis 1. yum 安装 查看是否安装了redis yum installed list | grep redis ps -ef | grep redis安装epel 仓库&#xff08;仓库是软件包下载的&#xff0c;类似maven&#xff0c;nuget&#xff09; yum install epel-release搜索 redis 包 yum search redis安装…
阅读更多...
剪映国际版，免费无限制使用

剪映国际版，免费无限制使用

随着抖音的爆火短视频的崛起&#xff0c;相信每一个人都感受到了短视频快节奏下的生活洪流。 现如今每个人都能成为自己生活的记录者&#xff0c;每一个人都有掌握着剪辑的基本技能。而剪映就是很多人都会使用的剪辑软件。 相对于PR、AE等剪辑软件来说&#xff0c;作为一款国…
阅读更多...
动态规划篇-01：爬楼梯

动态规划篇-01：爬楼梯

本文为力扣70&#xff1a;爬楼梯的详细解析。 虽然这道题的标签是“简单”&#xff0c;但是只有简单的题才能让我们专注于这类题的解题框架上。 一般来说动态规划会有三种解法&#xff1a;暴力解法、使用了备忘录自上而下的递归解法、使用了数组的自下而上的迭代解法。接下来…
阅读更多...
FineBI实战项目一（21）：不同支付方式订单总额分析开发

FineBI实战项目一（21）：不同支付方式订单总额分析开发

点击新建组件&#xff0c;创建不同支付方式订单总额组件。 选择饼图&#xff0c;拖拽total_money到角度&#xff0c;拖拽pay_type到颜色&#xff0c;调节内径。 修改颜色的标识文字。 将组件拖拽到仪表板。 结果如下&#xff1a;
阅读更多...
用C语言实现哈希表HashMap

用C语言实现哈希表HashMap

代码仓库地址 1. 功能说明 自定义初始容量和负载因子&#xff1b;当键值对的个数与容量比值超过负载因子时&#xff0c;自动扩容&#xff1b;借鉴Java8的HashMap部分扩容逻辑&#xff0c;定义了单独的桶结构体用于记录hash值&#xff0c;以及2倍扩容&#xff0c;减少了hash运算…
阅读更多...
K8S--service

K8S--service

一、简介 Service 是将集群中的 一个或一组 Pod应用程序公开为网络服务的方法。我们都知道pod是不稳定的，有可能时时刻刻都在创建和销毁，这一时刻运行的 Pod 集合可能不同于下一刻运行该应用的 Pod 集合，并且新创建的pod的ip地址会改变，所以我们不应该寄期望于pod的稳定性…
阅读更多...
Calibre DESIGNrev Object Selection Toolbar

Calibre DESIGNrev Object Selection Toolbar

包括 Reference Path Polygon Edge Vertex Text的解释说明 FieldDescription用法&#xff08;勾选后&#xff09;ReferenceUsed to move or select a cell reference or array reference.可以选择一个cellPathUsed to move or select a contiguous path object.暂时不明请指教…
阅读更多...
最新文章

Copyright @ 2022~2023