文档资料参考：
- 参考：https://cn.vuejs.org/
- 参考：Vue.js教程 | 菜鸟教程
- 参考：Vue.js技术揭秘
- 参考：Vue-Cli（客户端）
- 参考：创建一个Vue项目、Vue-Cli创建一个Router项目
- 参考：https://codesandbox.io
- 参考：https://codepen.io/
- API参考：https://cn.vuejs.org/v2/api/
- Chrome浏览器安装Vue插件便于调试：Vue.js devtools
- Vue调试神器：vue-devtools
-
代码管理：代码管理
- 图标管理：iconfont
目录：
- 1、Vue介绍
-
2、计算属性和侦听器
- 3、Class 与 Style 绑定
- 4、条件渲染（v-if、v-else、v-else-if、v-show、v-for、表格）
-
5、事件处理
- 6、v-model、v-text、v-html
-
7、组件基础
-
7.1 组件的组织
- 7.2 通过 Prop 向子组件传递数据（props属性小写）
- 7.3 通过插槽分发内容（组件元素标签后增加自定义内容，slot标签内容分发，作用域插槽）
-
7.4 组件的三种使用方法
- （1）方式一：全局组件
- （2）方式二：局部注册（组件嵌套）
- （3）方式三：以一个.vue的单文件作为组件（推荐）
- （1）方式一：全局组件
- 7.5 监听子组件事件（子组件把数据传回去）、自定义组件事件（事件名称小写）
- 7.6 组件上使用 v-model
- 7.7 Vue使用小技巧
-
7.1 组件的组织
-
8、过渡 & 动画 -
8.1 Vue中CSS动画原理
- 8.2 Vue中使用Animate.css库
- 8.3 Vue中同时使用过渡和动画
- 8.4 Vue中JS动画与Velocity.js结合
-
8.5 Vue中多个元素或组件的过渡
- （1）多个元素的过渡
- （2）多个组件的过渡
-
8.6 Vue中的列表过渡
- 8.7 Vue中的动画封装（让动画复用）
- 9、可复用性&组合
-
10、工具
- 11、规模化（路由）
- 12、深入响应式原理
-
13、Vue实例
-
14、Vue CLI
-
15、Vue指令
1、Vue介绍
- 参考：https://cn.vuejs.org/v2/guide/index.html
- Vue.js的核心思想：数据驱动的组件，为现代化的Web界面而生
- Vue.js的特点：侵入性低；鼓励模块化；轻量、高性能
（1）MV*架构
（2）MVVM架构
（3）Vue.js在MVVM架构中的定位
（4）Vue.js的功能定位
1.1 声明式渲染
举例（声明式渲染）：
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <!--<meta charset="utf-8">--> <! 选择中文字体 --> 6 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 7 <meta http-equiv="Content-Language" content="zh-cn" /> 8 <title>My test page</title> 9 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 10 </head> 11 12 <body> 13 <div id="app"> 14 <p>{{ message1 }}</p> 15 <p>{{ message2 }}</p> 16 </div> 17 18 <script> 19 new Vue({ 20 el: \'#app\', 21 data: { 22 message1: \'Hello Vue.js!\', 23 message2: \'This is my first project!\', 24 } 25 }) 26 </script> 27 </body> 28 </html>
输出结果：
1.2 声明式渲染（绑定元素特性）
举例（声明式渲染，绑定元素特性）：
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 7 <meta http-equiv="Content-Language" content="zh-cn" /> 8 <title>My test page</title> 9 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 10 </head> 11 12 <body> 13 <div id="app-2"> 14 <span v-bind:title="message"> 15 鼠标悬停几秒钟查看此处动态绑定的提示信息！ 16 </span> 17 </div> 18 19 <script> 20 new Vue({ 21 el: \'#app-2\', 22 data: { 23 message: \'页面加载于 \' + new Date().toLocaleDateString(), 24 } 25 }) 26 </script> 27 </body> 28 </html>
输出结果：
1.3 条件与循环
举例1：
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 7 <meta http-equiv="Content-Language" content="zh-cn" /> 8 <title>My test page</title> 9 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 10 </head> 11 12 <body> 13 <div id="app-2"> 14 <span v-if="seen"> 15 现在你看到我了 16 </span> 17 </div> 18 19 <script> 20 var app3 = new Vue({ 21 el: \'#app-2\', 22 data: { 23 seen: true 24 } 25 }) 26 </script> 27 </body> 28 </html>
输出结果（在控制台输入 app3.seen = false，文字内容即消失了）：
举例2：
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 7 <meta http-equiv="Content-Language" content="zh-cn" /> 8 <title>My test page</title> 9 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 10 </head> 11 12 <body> 13 <div id="app-2"> 14 <span v-if="seen"> 现在你看到我了 </span> 15 <button v-on:click="switchSeen">点击显示或隐藏</button> <!-- v-on:click 可以用 @click替代 --> 16 </div> 17 18 <script> 19 var app3 = new Vue({ 20 el: \'#app-2\', 21 data: { 22 seen: true 23 }, 24 methods: { 25 switchSeen: function () { 26 this.seen = !this.seen; 27 } 28 } 29 }) 30 </script> 31 </body> 32 33 </html>
输出结果：
举例3：
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 7 <meta http-equiv="Content-Language" content="zh-cn" /> 8 <title>My test page</title> 9 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 10 </head> 11 12 <body> 13 <div id="app-4"> 14 <ol> 15 <li v-for="todo in todos"> 16 {{ todo.text }} 17 </li> 18 </ol> 19 </div> 20 21 <script> 22 var app4 = new Vue({ 23 el: \'#app-4\', 24 data: { 25 todos: [ 26 { text: \'学习 JavaScript\' }, 27 { text: \'学习 Vue\' }, 28 { text: \'整个牛项目\' } 29 ] 30 } 31 }) 32 </script> 33 </body> 34 35 </html>
输出结果（在控制台里，输入 app4.todos.push({ text: \'新项目\' })，你会发现列表最后添加了一个新项目）：
1.4 处理用户输入（包括双向数据绑定，v-model）
- 参考：表单输入绑定
举例1：
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 7 <meta http-equiv="Content-Language" content="zh-cn" /> 8 <title>My test page</title> 9 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 10 </head> 11 12 <body> 13 <div id="app-5"> 14 <p>{{ msg_input }}</p> 15 <br> 16 <p>{{ msg }}</p> 17 <button v-on:click="reverseMessage">逆转消息</button> <!-- v-on:click 可以用 @click替代 --> 18 </div> 19 20 <script> 21 var app5 = new Vue({ 22 el: \'#app-5\', 23 data: { 24 msg: "Hello, Vue.js!", 25 msg_input: "Hello, Vue!" 26 }, 27 methods: { 28 reverseMessage: function () { 29 this.msg = this.msg.split(\'\').reverse().join(\'\') 30 } 31 } 32 }) 33 </script> 34 </body> 35 36 </html>
输出结果：
举例2（双向数据绑定）：
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 7 <meta http-equiv="Content-Language" content="zh-cn" /> 8 <title>My test page</title> 9 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 10 </head> 11 12 <body> 13 <div id="app-5"> 14 <p>{{ msg }}</p> 15 <!-- <input type="text" v-bind:value="msg"> --> 16 <input type="text" v-model="msg"> 17 </div> 18 19 <script> 20 var app5 = new Vue({ 21 el: \'#app-5\', 22 data: { 23 msg: "Hello, Vue.js!", 24 }, 25 methods: { 26 } 27 }) 28 </script> 29 </body> 30 31 </html>
输出结果：（双向绑定之前和双向绑定之后效果）
1.5 组件化应用构建
举例1：
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 7 <meta http-equiv="Content-Language" content="zh-cn" /> 8 <title>My test page</title> 9 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 10 </head> 11 12 <body> 13 14 <ol id="app"> 15 <!-- 创建一个 todo-item 组件的实例 --> 16 <todo-item></todo-item> 17 <li>内容补充</li> 18 </ol> 19 20 <script> 21 // 定义一个名为 todo-item 的新组件 22 Vue.component("todo-item", { 23 template: \'<li>这是个待办项</li>\' 24 }); 25 26 var app = new Vue({ 27 el: \'#app\' 28 }) 29 </script> 30 </body> 31 32 </html>
输出结果：
举例2：
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 7 <meta http-equiv="Content-Language" content="zh-cn" /> 8 <title>My test page</title> 9 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 10 </head> 11 12 <body> 13 14 <div id="app-7"> 15 <ol> 16 <!-- 创建一个 todo-item 组件的实例 --> 17 <!-- 现在我们为每个 todo-item 提供 todo 对象，todo 对象是变量，即其内容可以是动态的。我们也需要为每个组件提供一个“key”。 --> 18 <todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"> 19 </todo-item> 20 </ol> 21 </div> 22 23 <script> 24 // 定义一个名为 todo-item 的新组件 25 Vue.component("todo-item", { 26 props: [\'todo\'], 27 template: \'<li>{{ todo.text }}</li>\' 28 }); 29 30 var app = new Vue({ 31 el: \'#app-7\', 32 data: { 33 groceryList: [ 34 { id: 0, text: \'蔬菜\' }, 35 { id: 1, text: \'奶酪\' }, 36 { id: 2, text: \'随便其它什么人吃的东西\' } 37 ] 38 } 39 }) 40 </script> 41 </body> 42 43 </html>
注释：应用分割成了两个更小的单元。子单元通过 prop 接口与父单元进行了良好的解耦。我们现在可以进一步改进 <todo-item> 组件，提供更为复杂的模板和逻辑，而不会影响到父单元。
输出结果：
1.6 实例生命周期钩子
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
举例1：
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <title>Vue实例生命周期函数</title> 7 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 8 </head> 9 10 <body> 11 <div id="app"> 12 <blog-post :title="name"></blog-post> 13 </div> 14 15 <script> 16 Vue.component("blog-post", { 17 props: [\'title\'], 18 template: ` 19 <div> 20 <p>{{ title }}</p> 21 </div> 22 ` 23 }); 24 25 // 生命周期函数就是 Vue实例 在某一个时间点会自动执行的函数 26 var vm = new Vue({ 27 el: \'#app\', 28 data: { 29 name: \'Vue.js\', 30 }, 31 beforeCreate() { // Vue实例 部分初始化（事件和生命周期初始化完成） 32 console.log("1. beforeCreate"); 33 }, 34 created() { // Vue实例 初始化基本完成 35 console.log("2. created"); 36 }, 37 // 查询 Vue实例 中是否存在 el 选项 38 // 查询 Vue实例 中是否存在 template 选项 39 beforeMount() { // 页面渲染之前，模板和数据相结合，即将挂载在页面上一瞬间之前 40 console.log("3. beforeMount"); 41 console.log(this.$el); 42 }, 43 mounted() { // 模板和数据相结合，即将挂载在页面上之后 44 console.log("4. mounted"); 45 console.log(this.$el); 46 }, 47 beforeDestroy() { 48 console.log("5. beforeDestroy"); 49 }, 50 destroyed() { 51 console.log("6. destroyed"); 52 }, 53 beforeUpdate() { // 数据改变，重新渲染之前 54 console.log("7. beforeUpdate"); 55 }, 56 updated() { // 数据改变，重新渲染之后 57 console.log("8. updated"); 58 }, 59 60 computed: { 61 62 }, 63 methods: { 64 65 } 66 }) 67 </script> 68 </body> 69 70 </html>
输出结果：
举例2（比如 created 钩子可以用来在一个实例被创建之后执行代码）：
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 7 <meta http-equiv="Content-Language" content="zh-cn" /> 8 <title>My test page</title> 9 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 10 </head> 11 12 <body> 13 14 <div id="app-7"> 15 <ol> 16 <!-- 创建一个 todo-item 组件的实例 --> 17 <!-- 现在我们为每个 todo-item 提供 todo 对象，todo 对象是变量，即其内容可以是动态的。我们也需要为每个组件提供一个“key”。 --> 18 <todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"> 19 </todo-item> 20 </ol> 21 <div v-if="seen"> 22 <p>现在你可以看见我了</p> 23 </div> 24 </div> 25 26 <script> 27 // 定义一个名为 todo-item 的新组件 28 Vue.component("todo-item", { 29 props: [\'todo\'], 30 template: \'<li>{{ todo.text }}</li>\' 31 }); 32 33 var app = new Vue({ 34 el: \'#app-7\', 35 data: { 36 groceryList: [ 37 { id: 0, text: \'蔬菜\' }, 38 { id: 1, text: \'奶酪\' }, 39 { id: 2, text: \'随便其它什么人吃的东西\' } 40 ], 41 seen: true 42 }, 43 created: function () { 44 // this 指向 vm 实例 45 console.log("seen is: " + this.seen); 46 } 47 }) 48 </script> 49 </body> 50 51 </html>
输出结果：
1.7 生命周期图示
2、计算属性和侦听器
2.1 计算属性
对于任何复杂逻辑，你都应当使用计算属性。计算属性比调用方法性能会更好。
计算属性，依赖于数据属性发生变化时候，其才会重新调用一次该计算属性（比如 return new Date();）。
举例：
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 7 <meta http-equiv="Content-Language" content="zh-cn" /> 8 <title>My test page</title> 9 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 10 </head> 11 12 <body> 13 14 <div id="example"> 15 <p>Original message: "{{ message }}"</p> 16 <p>Computed reversed message: "{{ reversedMessage }}"</p> 17 <p>Now time is : "{{ now }}"</p> 18 <p>This boy\'s fullName is : "{{ fullName }}"</p> 19 </div> 20 21 <script> 22 var app = new Vue({ 23 el: \'#example\', 24 data: { 25 message: \'Hello\', 26 firstName: "Foo", 27 lastName: "Bar" 28 }, 29 // 计算属性是基于它们的依赖进行缓存的，只在相关依赖发生改变时它们才会重新求值 30 computed: { 31 // 计算属性的 getter 32 reversedMessage: function () { 33 // `this` 指向 vm 实例 34 return this.message.split(\'\').reverse().join(\'\'); 35 }, 36 now: function () { 37 return new Date(); 38 }, 39 // 计算属性的 setter，计算属性默认只有getter，不过在需要时，也可以提供一个setter 40 fullName: { 41 // getter 42 get: function () { 43 return this.firstName + " " + this.lastName; 44 }, 45 set: function (newValue) { 46 var names = newValue.split(" "); 47 this.firstName = names[0]; 48 this.lastName = names[names.length - 1]; 49 } 50 } 51 } 52 }) 53 </script> 54 </body> 55 56 </html>
输出结果：
2.2 侦听器
虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
举例1（侦听器，方式一）：
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 7 <meta http-equiv="Content-Language" content="zh-cn" /> 8 <title>My test page</title> 9 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 10 </head> 11 12 <body> 13 <div id="app"> 14 {{ fullName }} 15 </div> 16 17 <script> 18 var app = new Vue({ 19 el: \'#app\', 20 data: { 21 firstName: "唐", 22 lastName: "菜也", 23 fullName: "唐菜也" 24 }, 25 watch: { 26 firstName(newVal, oldVal){ 27 console.log("firstName, newVal: " + newVal + ", oldVal: " + oldVal); 28 this.fullName = newVal + this.lastName; 29 }, 30 lastName(newVal, oldVal){ 31 console.log("lastName, newVal: " + newVal + ", oldVal: " + oldVal); 32 this.fullName = this.firstName + newVal; 33 } 34 } 35 }) 36 37 </script> 38 </body> 39 40 </html>
输出结果：
举例2（侦听器，方式二）：
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 7 <meta http-equiv="Content-Language" content="zh-cn" /> 8 <title>My test page</title> 9 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 10 </head> 11 12 <body> 13 <div id="app"> 14 {{ fullName }} 15 </div> 16 17 <script> 18 var app = new Vue({ 19 el: \'#app\', 20 data: { 21 firstName: "唐", 22 lastName: "菜也", 23 fullName: "唐菜也", 24 age: 28, 25 }, 26 watch: { 27 firstName: function () { // 监听 firstName 属性的变化 28 console.log("1、计算了一次"); 29 this.fullName = this.firstName + this.lastName; 30 }, 31 lastName: function () { // 监听 lastName 属性的变化 32 console.log("2、计算了一次"); 33 this.fullName = this.firstName + this.lastName; 34 } 35 } 36 }) 37 38 </script> 39 </body> 40 41 </html>
输出结果：
举例3（侦听器，方式三）：
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 7 <meta http-equiv="Content-Language" content="zh-cn" /> 8 <title>My test page</title> 9 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 10 </head> 11 12 <body> 13 <div id="app"> 14 {{ fullName }} 15 </div> 16 17 <script> 18 var vm = new Vue({ 19 el: \'#app\', 20 data: { 21 firstName: "唐", 22 lastName: "菜也", 23 fullName: "唐菜也", 24 age: 28, 25 }, 26 }) 27 28 vm.$watch("firstName", function (val) { 29 console.log("1、计算了一次"); 30 this.fullName = val + this.lastName; 31 }); 32 33 vm.$watch("lastName", function (val) { 34 console.log("2、计算了一次"); 35 this.fullName = this.firstName + val; 36 }); 37 38 </script> 39 </body> 40 41 </html>
举例4（计算属性方式实现）：
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 7 <meta http-equiv="Content-Language" content="zh-cn" /> 8 <title>My test page</title> 9 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 10 </head> 11 12 <body> 13 <div id="app"> 14 {{ fullNameFun }} 15 </div> 16 17 <script> 18 var app = new Vue({ 19 el: \'#app\', 20 data: { 21 firstName: "唐", 22 lastName: "菜也", 23 fullName: "唐菜也" 24 }, 25 watch: {/* 26 firstName(newVal, oldVal){ 27 console.log("firstName, newVal: " + newVal + ", oldVal: " + oldVal); 28 this.fullName = newVal + this.lastName; 29 }, 30 lastName(newVal, oldVal){ 31 console.log("lastName, newVal: " + newVal + ", oldVal: " + oldVal); 32 this.fullName = this.firstName + newVal; 33 } */ 34 }, 35 computed: { 36 fullNameFun(){ 37 return this.firstName + this.lastName; 38 } 39 } 40 }) 41 42 </script> 43 </body> 44 45 </html>
输出结果：同上。
3、Class 与 Style 绑定
3.1 绑定class
三种方式：
- 直接绑定方式
- 绑定数组方式
- 绑定对象方式
举例1（方式一：直接绑定方式）：
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 7 <meta http-equiv="Content-Language" content="zh-cn" /> 8 <title>My test page</title> 9 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 10 11 <style> 12 .class-active { 13 color: red; 14 } 15 .class-font-size { 16 font-size: 75px; 17 } 18 </style> 19 </head> 20 21 <body> 22 <div id="app"> 23 <div v-bind:class="{\'class-active\':isActive, \'class-font-size\':isFontSet}"> 24 我是一些文字的内容 25 </div> 26 </div> 27 28 <script> 29 var app = new Vue({ 30 el: \'#app\', 31 data: { 32 isActive: true, 33 isFontSet: true 34 } 35 }) 36 </script> 37 </body> 38 39 </html>
输出结果：
举例2-1（方式二：数组绑定方式）：
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 7 <meta http-equiv="Content-Language" content="zh-cn" /> 8 <title>My test page</title> 9 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 10 11 <style> 12 .class-active { 13 color: red; 14 } 15 16 .class-font-size { 17 font-size: 75px; 18 } 19 </style> 20 </head> 21 22 <body> 23 <div id="app"> 24 <div v-bind:class="className"> 25 我是一些文字的内容 26 </div> 27 </div> 28 29 <script> 30 var app = new Vue({ 31 el: \'#app\', 32 data: { 33 className: ["class-active", "class-font-size"] 34 } 35 }) 36 </script> 37 </body> 38 39 </html>
输出结果：同上。
举例2-2（方式二：数组方式）：
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 7 <meta http-equiv="Content-Language" content="zh-cn" /> 8 <title>My test page</title> 9 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 10 11 <style> 12 .class-active { 13 color: red; 14 } 15 16 .class-font-size { 17 font-size: 75px; 18 } 19 </style> 20 </head> 21 22 <body> 23 <div id="app"> 24 <div v-bind:class="[classActive, classFontSize]"> 我是一些文字的内容 </div> <!-- classActive 和 classFontSize 都是变量 --> 25 </div> 26 27 <script> 28 var app = new Vue({ 29 el: \'#app\', 30 data: { 31 classActive: "class-active", 32 classFontSize: "class-font-size", 33 } 34 }) 35 </script> 36 </body> 37 38 </html>
输出结果：略。
举例3（方式三：对象绑定方式）：
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 7 <meta http-equiv="Content-Language" content="zh-cn" /> 8 <title>My test page</title> 9 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 10 11 <style> 12 .class-active { 13 color: red; 14 } 15 16 .class-font-size { 17 font-size: 75px; 18 } 19 </style> 20 </head> 21 22 <body> 23 <div id="app"> 24 <div v-bind:class="classObject"> 25 我是一些文字的内容 26 </div> 27 </div> 28 29 <script> 30 var app = new Vue({ 31 el: \'#app\', 32 data: { 33 classObject: { 34 \'class-active\': true, 35 \'class-font-size\': true 36 } 37 38 } 39 }) 40 </script> 41 </body> 42 43 </html>
输出结果：略。
3.2 绑定内联样式
举例1（方式一：对象方式）：
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 7 <meta http-equiv="Content-Language" content="zh-cn" /> 8 <title>My test page</title> 9 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 10 </head> 11 12 <body> 13 <div id="app"> 14 <div v-bind:style="{color: theColor, \'font-size\': fontSize + \'px\'}"> 15 我是一些文字的内容 16 </div> 17 </div> 18 19 <script> 20 var app = new Vue({ 21 el: \'#app\', 22 data: { 23 \'theColor\': \'red\', 24 \'fontSize\': 40 25 } 26 }) 27 </script> 28 </body> 29 30 </html>
输出结果：
举例2（方式一：对象方式）：
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <title>My test page</title> 7 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 8 </head> 9 10 <body> 11 <div id="app"> 12 <div :style="styleObj" @click="handleDivClick"> 我是一些文字的内容 </div> 13 </div> 14 15 <script> 16 var app = new Vue({ 17 el: \'#app\', 18 data: { 19 styleObj: { 20 "color": "black", 21 "font-size": "35px", 22 }, 23 }, 24 methods: { 25 handleDivClick: function () { 26 this.styleObj.color = (this.styleObj.color === "black" ? "red" : "black"); 27 } 28 }, 29 }) 30 </script> 31 </body> 32 33 </html>
输出结果：
举例3（方式二：数组方式）：
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <title>My test page</title> 7 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 8 </head> 9 10 <body> 11 <div id="app"> 12 <div :style="[styleObj, {\'font-size\': \'35px\'}]" @click="handleDivClick"> 我是一些文字的内容 </div> 13 </div> 14 15 <script> 16 var app = new Vue({ 17 el: \'#app\', 18 data: { 19 styleObj: { 20 "color": "black", 21 }, 22 }, 23 methods: { 24 handleDivClick: function () { 25 this.styleObj.color = (this.styleObj.color === "black" ? "red" : "black"); 26 } 27 }, 28 }) 29 </script> 30 </body> 31 32 </html>
输出结果：
4、条件渲染（v-if、v-else、v-else-if、v-show、v-for、表格）
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
4.1 v-if、v-else、v-else-if
举例1：
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 7 <meta http-equiv="Content-Language" content="zh-cn" /> 8 <title>My test page</title> 9 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 10 </head> 11 12 <body> 13 14 <div id="example"> 15 <p v-if="awesome">Vue is awesome!</p> 16 <p v-else>Oh no