目录
一. Vue 简介和特点
二. Vue 的导入
三. Vue 基本语法
3.1 创建Vue实例、指定配置项
3.2 插值表达式 {{}}
3.3 Vue 常用指令表格大全
3.4 v-model 双向数据绑定
3.4.1 绑定文本框
3.4.2 绑定单选框
3.4.3 绑定多选框
3.4.4 绑定文本域
3.5 v-html、v-text
3.6 v-if、v-show
3.7 v-on 为元素绑定事件
3.8 v-bind 用于动态设置标签的属性值
3.9 v-for 循环遍历
一. Vue 简介和特点
Vue 是一款渐进式的前端开发框架，可以极大的提高前端开发的效率，核心就是MVVM模式。
Model(模型)，可以理解为我们开发中后端代码的实体类，模型，不同的个人有不同的个命名方式，常见的有 "Entity"、"domain"、"pojo"、"model"、"po"等；
View(视图)，可有理解为前端页面，即HTML文件，供用户浏览的页面，成为视图；
ViewModel(视图模型)，实现模型数据与视图数据的双向绑定，简单来说就是后台数据库数据发生变化时，会刷新作用到前台页面的展示；而前台页面数据发生变化时，也可以作用到后台数据；在 view 之前，通常都是数据如果发生变动，就需要去整个刷新页面，交互效率和体验感不好。而有了 view 之后，就可以使数据同步且局部刷新，效率很高。
二. Vue 的导入
Vue 其实是一个与JQuery有些类似的前端框架，都是封装的原生 JavaScript 代码。所以，如果想使用Vue，则需要在当前页面导入 Vue.js 文件；或者下载到本地引用本地文件，可以在官网进行下载。
不管我们使用Vue2还是Vue3，官方都给我们提供了开发版本和生产版本两种文件，这一点和JQuery非常相似，我们在日常开发和练习的时候，选择文件较大的开发版本最好，方便我们对代码中的错误进行修正，而到了实际生产的时候，则选择文件较小的生产版本更好。
如果不想下载到本地，也可以引用浏览器文件，导入语法如下；
Vue2 JS导入语法
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>Vue3 JS导入语法
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>Vue2官网手册
介绍 — Vue.jsVue.js - The Progressive JavaScript Framework
https://v2.cn.vuejs.org/v2/guide/
Vue3官网手册
https://cn.vuejs.org/guide/introduction.htmlhttps://cn.vuejs.org/guide/introduction.html
三. Vue 基本语法
3.1 创建Vue实例、指定配置项
vuejs 文件的导入之后，我们就需要创建Vue实例了，这个过程非常类似于Java中 new 对象，如下代码；
const 或 var 定义一个对象，名字叫什么都行，这里我就取名 "vueTest"，
调用 Vue 的构造器创建 Vue 对象，对象中常配置 "el" 和 "data" 两项配置；
el 是 element 的缩写，就是用来指定当前 Vue 对象要管理那个元素，"#app1" 就是我们在JavaScript 中学的 id 选择器；
data 中存储的就是要渲染到页面上的数据，实际开发过程中 data 的数据是由后端 resopnse 返回给前端的；
<head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body><!-- Vue2 实例化Vue对象的语法 --><script><!-- 这里对象名其什么都可以 -->const vueTest = new Vue({el: '#app1',data: {message: 'Hello Vue!',},})</script>
</body>3.2 插值表达式 {{}}
语法：{{表达式}}
注意点：（1）插值表达式中使用的数据要在 data 中存在；
（2）虽然支持表达式，但不支持 "if"、"for" 等逻辑代码；
（3）不能在标签的属性中使用 "{{}}"；
插值表达式大致可以分为五种用法：
- 绑定变量值(或对象属性值、数组值)；
- 进行数学运算(+、-、*、/)；
- 调用自定义函数；
- 调用内置存在的函数；
- 三元运算；
只要是可以被求值的代码都可以算作表达式，JS引擎都会计算出结果。
示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app1"><!-- 插值表达式用法（1）直接绑定变量值 --><p>直接绑定变量值获取：{{number_str1}}</p><!-- 插值表达式用法（2）进行数学运算 --><p>进行数学运算：{{ji_suan}}</p><!-- 插值表达式用法（3）调用自定义函数 --><p>调用自定义函数：{{sum()}}</p><!-- 插值表达式用法（4）调用内置已有函数 --><p>调用内置已有函数:{{str.substring(0,5)}}</p><!-- 插值表达式用法（5）三元运算 --><p>三元运算取最大值：{{num1>num2?num1:num2}}</p><!-- 插值表达式用法（6）取数组的值，说白了还是绑定变量值 --><p>取数组0索引的值：{{message2[0]}}</p><!-- 插值表达式用法（7）取对象属性值，说白了还是绑定变量值 --><p>取对象属性值：{{message3.name}}</p>
</div>
<script>//1.创建一个Vue实例const app = new Vue({// 让 vue 接管 app1 标签el: '#app1',// 定义数据data:{number_str1:"123456",ji_suan:10/2,str:"hello world",num1:110,num2:120,message2: [123,456,789],message3: {name: 'zhangsan',age: 18,},},methods:{sum(){return 660+6}},})
</script>
</body>
</html>使用 WebStorm 开发工具内置浏览器打开或者直接在浏览器打开，如下图，
3.3 Vue 常用指令表格大全
或许同学们也听说过Angular、React 框架，Angular 框架的特有语法就是以 "ng-"开头的。
而 Vue 也作为一个框架，自然是有一套自己的框架语法的。在 Vue 框架中，以 "v-" 开头的指令便是 Vue 框架的特有指令语法，v- 后面跟的内容不同，形成不同的指令，产生不同的作用。常用的个 vue 指令如下表格所示，我们先简单了解，下面对他们进行详细举例介绍，
| v-model | 数据双向绑定 |
| v-html v-text | v-html：遇到html标签,会正常解析； v-text：把数据当作纯文本显示； |
| v-if v-show | v-if与v-show可以根据条件的结果,来决定是否显示指定内容. v-if: 条件不满足时, 元素不会存在. v-show: 条件不满足时, 元素不会显示(但仍然存在) |
| v-on | 事件绑定 |
| v-bind | 作用和插值表达式差不多，v-bind主要用于动态设置标签的属性值； |
| v-for | 循环遍历 |
3.4 v-model 双向数据绑定
在使用 v-model 时，需要注意以下几点.
(1) 双向数据绑定，只能绑定文本框、单选框、多选框(复选框)、文本域、下拉列表等；
(2) 文本框，单选框，文本域绑定的数据类型都是字符串类型；
(3) 当多选框只有一个的时候，绑定的数据类型为布尔类型，如果为多个的时候，则是数组类型；
(4) select下拉列表单选时，对应的是字符串类型，多选时则对应数组类型；
3.4.1 绑定文本框
直接在 input 标签里面添加 v-model 接口，值就是定义的 vue 对象中 data 对应的属性值，实际开发过程中，data 值是由发送 HTTP 请求到后端查询再由后端 response 返回得到的。
<body>
<div id="app1"><input type="text" v-model="message">
</div>
<script>//1.创建一个Vue实例const app = new Vue({// 让 vue 接管 app1 标签el: '#app1',// 定义数据data:{message:"hello vue"},})
</script>
</body>在浏览器打开，如下图所示
3.4.2 绑定单选框
绑定单选框，通过 v-model 控制 value 值即可实现。
开发过程中，数据库我们用常会把"男"和"女";"是"和"否"这种只有两个选项或者单选的框的字段定义为 tinyint 类型，使用 0，1 ，2，3 代表各个单选框的 value 值，也可以是三选一，四选一。
比如用户注册时设置自己性别为男，对应 value 值为 1，值从前端传给后端，后端就将 1 存储到数据库字段中；
当用户再次访问界面时，发送请求到后端查询数据库，查询到对应性别字段值，如果为1 ，由 vue 框架渲染为男，如果为0，渲染为女。
<body>
<div id="app1"><div>{{message}}<br><input type="radio" v-model="checked" value="1" style="display: inline-block;"><p style="display: inline-block;">男</p><br><input type="radio" v-model="checked" value="0" style="display: inline-block;"><p style="display: inline-block;">女</p></div>
</div>
<script>//1.创建一个Vue实例const app = new Vue({// 让 vue 接管 app1 标签el: '#app1',// 定义数据data:{message:"单选框测试",checked:"0",},})
</script>
</body>如下图所示，在 data 中赋值 checked 为 0，页面上 "女" 单选框已经被默认选中了；
3.4.3 绑定多选框
绑定多选框，通过数组来实现，如下代码，
（1）type = "checked" 表示当前元素是多选框元素的其中一个；
（2）v-model = "checkedList" 表示当前元素绑定于 checkedList 数组，如果当前元素被选中，则该元素 value 值添加到数组中，同理，如果数组中存在当前元素 value 值，则当前元素默认被选中；
（3）style="display: inline-block" 则是设置元素样式，与 vue 关系不大，主要是为了美观，让选择框和选择框的文字出现在同一行；
<body>
<div id="app1"><div>{{message}}<br><input type="checkbox" v-model="checkedList" value="篮球" style="display: inline-block"><p style="display: inline-block">篮球</p><br><input type="checkbox" v-model="checkedList" value="足球" style="display: inline-block"><p style="display: inline-block">足球</p><br><input type="checkbox" v-model="checkedList" value="排球" style="display: inline-block"><p style="display: inline-block">排球</p><br><input type="checkbox" v-model="checkedList" value="乒乓球" style="display: inline-block"><p style="display: inline-block">乒乓球</p></div>
</div>
<script>const app = new Vue({el: '#app1',data:{message:"多选框测试",checkedList:["篮球","乒乓球"],},})
</script>
</body>如下图，因为我在 checkList 集合中添加了"篮球"，"乒乓球"，所以页面上的效果就是篮球和乒乓球默认被选中，其余二者则未被选中；
3.4.4 绑定文本域
绑定文本域也非常简单，就是直接在 <textarea v-model = "?"></textarea>标签中添加 v-model 即可；
<body>
<div id="app1"><div>{{message}}<br><textarea v-model="textarea"></textarea></div>
</div>
<script>const app = new Vue({el: '#app1',data:{message:"文本域测试",textarea:"文本域123456"},})
</script>
</body>打开 IDEA 内置插件，就可以看到 data 中的文本内容显示在了页面文本框内。
当我们删除部分内容，Ctrl + s 保存，就会发现右侧页面文本框内容也会同步变化，这就是双向绑定，非常厉害！
3.5 v-html、v-text
刚才我们说到了，插值表达式可以将内容展示在页面上，但如果我们的文本内容是HTML标签，是不会解析的，如果我们在数据库中原本存储的就是标签，希望浏览器将它解析展示，如下代码
<body>
<div id="app1"><p v-html="str1"></p><p v-text="str1"></p>
</div>
<script>const app = new Vue({el: '#app1',data:{str1:"<a href=\"https://www.baidu.com\">点我进入百度</a>",},})
</script>
</body>在浏览器如下所示，v-html 会将字符串中的 HTML 标签进行解析，而 v-text 标签只会解析成文本字符串进行显示
3.6 v-if、v-show
这两个标签许多同学第一眼看可能以为是组合使用的，如果满足条件，就 show 展示出来；但实际上并不是这样的！
这两个标签都是用来控制标签是否显示的，但它们的区别是
v-if：如果为 ture，则将当前元素添加至 DOM 中并展示在页面上；如果为 false，元素不会添加至 DOM 中，也不会在页面上展示。
v-show：如果为 ture，当前元素的 "display" 属性值设置为 "block" 或 "inline"展示在页面上；如果为 false，则将当前元素的 "display" 属性设置为 "none"，不会展示在页面上。但无论是 ture 还是 false，当前元素始终都在DOM中；
<body>
<div id="app1"><p v-if="boolean1">值为 ture 则显示1111</p><p v-show="boolean1">值为 ture 则显示</p><button @click="boolean2 = !boolean2">Toggle Input</button><p v-if="boolean2">值为 false 不显示，代码中不显示，元素也不存在</p><p v-show="boolean2">值为 false 不显示，代码中不显示，但元素仍然存在</p>
</div>
<script>const app = new Vue({el: '#app1',data:{boolean1:true,boolean2:false,},})
</script>
</body>我们在浏览器打开，如下图所示。
因为变量 bollean2 初始为 false，所以最下面两个 p 标签都不会显示，但是从 element 元素中我们可以看到，v-show 控制的 p 标签仍然存在于 DOM 中，只是属性设置为 "none"，所以没有在页面展示，而 v-fi 控制的 p 标签则干脆没有渲染到DOM中；
现在我们点击刚才添加的按钮，触发单击事件，将变量 boolean2 设置为 ture，在刷新浏览器，如下图，两个 p 标签的内容都在页面上显示出来了，而且 DOM 中，v-if 控制的 p 也渲染到了DOM中，v-show 控制的 p 标签 style 中 display 属性也没有了，那么就是默认的 "inline"。
总结来说：
v-if指令会根据表达式的值来决定是否在DOM中插入或删除元素。如果表达式的值为true，那么元素会被插入到DOM中；如果表达式的值为false，那么元素会被从DOM中删除。v-if指令在每次条件变化时都会重新渲染元素，因此它可能会比较消耗性能。
v-show指令会根据表达式的值来决定元素的CSS属性display的值。如果表达式的值为true，那么元素的display属性会被设置为block或inline（取决于元素的类型）；如果表达式的值为false，那么元素的display属性会被设置为none。v-show指令只是简单地切换元素的显示和隐藏，因此它的性能比v-if指令要好。
3.7 v-on 为元素绑定事件
事件自然不必多说，在 vue 框架中，只需要使用 v-on 即可为元素绑定事件，常用的两种写法如下所示
<!--完整写法-->
<button v-on:事件名="函数名/vue表达式">单击我触发事件</button>
<!--简化写法-->
<button @事件名="函数名/vue表达式">单击我触发事件</button>
示例代码如下，
在 vue 的写法中，我们通常会将方法都定义在 methods 中，方便进行统一管理，也可以定义在其它文件中，通过 import 导入的方式导入提前写好的方法，这一点类似于 Java 中的导包。
<body>
<div id="app1"><button v-on:click="click1">点我触发标准写法弹窗</button><br><button @click="click2">点我触发简写弹窗</button>
</div>
<script>const app = new Vue({el: '#app1',data:{},methods:{click1(){alert("我是标准写法");},click2(){alert("我是简写");},},})
</script>
</body>在浏览器打开页面，我们点击按钮，就会出现弹窗啦！
3.8 v-bind 用于动态设置标签的属性值
语法使用：
<!-- 完整写法 v-bind:标签属性名="属性值",属性值从 vue 对象实例中获取 -->
<input v-bind:标签属性名="vue实例中的数据属性名"/>
<!--简化写法，去掉前面的 "v-bind",直接从"："开始写 -->
<input :标签属性名="vue实例中的数据属性名"/>
示例代码：
<body>
<div id="app1"><input type="text" v-bind:value="message1"><br><input type="text" :value="message2">
</div>
<script>const app = new Vue({el: '#app1',data:{message1:'hello vue',message2:"hello world",},methods:{},})
</script>
</body>效果如下图所示，
3.9 v-for 循环遍历
使用语法：v-for="element in list"
示例代码如下
<body>
<div id="app1"><ul><!--循环遍历数组，语法 "element in List"；element：每次遍历获取到的元素对象。这里我取名叫 item，然后可以通过插值表达式获取当前遍历到的元素值；List：要遍历的数组对象；这里我就叫 arr；in 固定语法；另一种写法为 "(element,index) in List",和上面是一样的效果，index表示当前元素的索引，从0开始--><li v-for="item in arr">{{item}}</li><!--element in List 遍历同样适应于集合获取元素对象，但实际开发过程中，我们通常是需要获取元素对象的某个属性值，不需要全部展示，所以我们可以在括号内添加一个属性名，来获取该属性值，这里我取名叫 name，然后可以通过插值表达式获取当前遍历到的元素值；--><li v-for="student in students">{{student}}</li><li v-for="student in students">{{student.name}}</li></ul>
</div>
<script>const app = new Vue({el: '#app1',data:{arr:[1,2,3,4,5],students:{student1:{name:'张三',age:18,},student2:{name:'李四',age:19,},student3:{name:'王五',age:20,},},},})
</script>
</body>将上述代码在浏览器打开运行，如下所示；
（1）数组中的元素循环展示；
（2）数组中的整个对象进行展示；
（3）插值表达式获取数组对象中的某个属性值展示；
