Vue模板语法

别先生

发布于 2020-04-13 19:01:03

2.4K0

发布于 2020-04-13 19:01:03

1、Vue，渐进式Javascript框架。

　　渐进式的含义理解，从左到右递进关系，声明式渲染（最简单的模式）->组件系统（组件化）->客户端路由（局部更新，浏览器的历史回退功能）->集中式状态管理（Vuex做状态管理）->项目构建（大型项目，前后端分离）。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>hello world</title>
 6     </head>
 7     <body>
 8 
 9         <!-- 
10          Vue的基本使用步骤
11          1）、需要提供标签用于填充数据。
12          2）、引入vue.js库文件。
13          3）、可以使用vue的语法做功能了。
14          4）、把vue提供的数据填充到标签。使用插值表达式{{}}，作用就是将数据填充到指定的标签的位置。
15          -->
16         <!-- {{}}叫做插值表达式，将数据填充到html标签中，插值表达式支持基本的计算操作。-->
17         <div id="app">
18             <div>{{msg}}</div>
19             <div>{{'I love you ' + msg}}</div>
20             <div>{{1 + 2 + 3}}</div>
21         </div>
22 
23 
24         <script src="vue.js" type="text/javascript"></script>
25         <script type="text/javascript">
26             // Vue代码运行原理分析，概述编译过程的概念（Vue语法->原生语法），就是Vue代码经过Vue框架变成了原生js代码。
27             // 创建一个Vue的变量vm，存储Vue的实例，提供一个参数，是对象形式的，并且这个对象包含两个重要的属性el、data。
28             // Vue所做的工作也就是把数据填充把页面的标签里面。
29             var vm = new Vue({
30                 // el元素的挂载位置，值可以是CSS选择器或者DOM元素，挂载就是将数据关联到页面的某个标签上。
31                 el: '#app', // el是告诉Vue把数据填充到那个位置，这里通过id选择器进行绑定到那个标签。
32                 // data模型数据，值是一个对象。
33                 data: { // 用于提供数据。
34                     msg: 'hello Vue!'
35                 }
36 
37             });
38         </script>
39     </body>
40 </html>

2、Vue模板语法，默认语法的功能就是前端渲染，前端渲染即使把数据填充到html标签中。数据（来自服务器） + 模板（html标签） = 前端渲染（产物是静态html内容）。

前端渲染的三种方式。

　　1）、原生js拼接字符串。基本上就是将数据以字符串的方式拼接到html标签中。缺点是不同开发人员的代码风格差别很大，随着业务的复杂，后期的维护变得逐渐困难起来。　　2）、使用前端模板引擎。它拥有自己的一套模板语法规则。优点是大家都遵循同样的规则写代码，代码可读性明显提高了，方便后期的维护。缺点是没有专门提高事件机制。　　3）、使用vue特有的模板语法。包含差值表达式、指令、事件绑定、属性绑定、样式绑定、分支循环结构。

3、Vue模板语法，什么是指令？

　　1）、什么是自定义属性。自定义属性是区别于标准属性的，标准属性是标签自带的属性。　　2）、Vue指令的本质就是自定义属性。　　3）、Vue指令的格式，以v-开始，比如v-cloak。指令的名称取决于设计者。

4、Vue模板语法，v-cloak指令用法。

　　1）、插值表达式存在的问题，就是闪动。　　2）、如果解决该问题，使用v-cloak指令，可以解决闪动的问题。　　3）、解决该问题的原理，先隐藏，替换好值之后再显式最终的值。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>hello world</title>
 6 
 7         <style type="text/css">
 8             [v-cloak] {
 9                 display: none;
10             }
11         </style>
12     </head>
13     <body>
14 
15         <!-- 
16             v-cloak指令的用法。
17             1）、需要提高样式。
18                 [v-cloak] {
19                   display: none;
20                 }
21             2）、在插值表达式所在的标签中添加v-cloak指令。
22             3)、原理，先通过样式隐藏内容，然后在内存中进行值的替换，替换好之后再显式最终的结果，此时就不会显式{{}}这种闪动效果。
23         -->
24         <div id="app" v-cloak>
25             <div>{{msg}}</div>
26         </div>
27 
28 
29         <script src="vue.js" type="text/javascript"></script>
30         <script type="text/javascript">
31             // Vue代码运行原理分析，概述编译过程的概念（Vue语法->原生语法），就是Vue代码经过Vue框架变成了原生js代码。
32             // 创建一个Vue的变量vm，存储Vue的实例，提供一个参数，是对象形式的，并且这个对象包含两个重要的属性el、data。
33             // Vue所做的工作也就是把数据填充把页面的标签里面。
34             var vm = new Vue({
35                 // el元素的挂载位置，值可以是CSS选择器或者DOM元素，挂载就是将数据关联到页面的某个标签上。
36                 el: '#app', // el是告诉Vue把数据填充到那个位置，这里通过id选择器进行绑定到那个标签。
37                 // data模型数据，值是一个对象。
38                 data: { // 用于提供数据
39                     msg: 'hello Vue!'
40                 }
41 
42             });
43         </script>
44     </body>
45 </html>

5、Vue模板语法，v-text、v-html、v-pre数据绑定指令用法。

　　1）、v-text填充纯文本。特点一、相比较插值表达式更加简洁。不存在闪动问题，比插值表达式好使的哦。　　2）、v-html填充html片段。特点一、存在安全问题。特点二、本网站内部数据可以使用，来自第三方数据不可以用。　　3）、v-pre填充原始信息。特点一、显式原始信息，跳过编译过程，分析编译过程。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>hello world</title>
 6     </head>
 7     <body>
 8 
 9         <div id="app">
10             <div>{{msg}}</div>
11             <!-- v-text没有闪动问题的，用户体验更好，比插值表达式更加好使 -->
12             <div v-text="msg"></div>
13             <!-- 内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译，在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击 -->
14             <div v-html="msg2"></div>
15             <!-- 显式原始信息，跳过编译过程(分析编译过程) -->
16             <div v-pre>{{msg}}</div>
17         </div>
18 
19 
20         <script src="vue.js" type="text/javascript"></script>
21         <script type="text/javascript">
22             // Vue代码运行原理分析，概述编译过程的概念（Vue语法->原生语法），就是Vue代码经过Vue框架变成了原生js代码。
23             // 创建一个Vue的变量vm，存储Vue的实例，提供一个参数，是对象形式的，并且这个对象包含两个重要的属性el、data。
24             // Vue所做的工作也就是把数据填充把页面的标签里面。
25             var vm = new Vue({
26                 // el元素的挂载位置，值可以是CSS选择器或者DOM元素，挂载就是将数据关联到页面的某个标签上。
27                 el: '#app', // el是告诉Vue把数据填充到那个位置，这里通过id选择器进行绑定到那个标签。
28                 // data模型数据，值是一个对象。
29                 data: { // 用于提供数据
30                     msg: 'hello Vue!',
31                     msg2: '<h1>hello Vue!</h1>', //可以使用v-html标签展示html代码。
32                 }
33 
34             });
35         </script>
36     </body>
37 </html>

6、Vue模板语法，数据响应式。

　　1）、如何理解响应式。html5中的响应式（屏幕尺寸的变化导致样式的变化）、数据的响应式（数据的变化导致页面内容的变化）。　　2）、什么是数据绑定。数据绑定就是将数据填充到标签中。　　3）、v-once只编译一次。显式内容之后不再具有响应式功能。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>hello world</title>
 6     </head>
 7     <body>
 8 
 9         <div id="app">
10             <div>{{msg}}</div>
11             <!-- v-once只编译一次。显式内容之后不再具有响应式功能。 -->
12             <!-- v-once的应用场景，如果显式的信息后续不需要再修改，可以使用v-once指令，可以可以提高性能，因为Vue就不需要去监听它的变化了。 -->
13             <div v-once>{{info}}</div>
14         </div>
15 
16 
17         <script src="vue.js" type="text/javascript"></script>
18         <script type="text/javascript">
19             // Vue代码运行原理分析，概述编译过程的概念（Vue语法->原生语法），就是Vue代码经过Vue框架变成了原生js代码。
20             // 创建一个Vue的变量vm，存储Vue的实例，提供一个参数，是对象形式的，并且这个对象包含两个重要的属性el、data。
21             // Vue所做的工作也就是把数据填充把页面的标签里面。
22             var vm = new Vue({
23                 // el元素的挂载位置，值可以是CSS选择器或者DOM元素，挂载就是将数据关联到页面的某个标签上。
24                 el: '#app', // el是告诉Vue把数据填充到那个位置，这里通过id选择器进行绑定到那个标签。
25                 // data模型数据，值是一个对象。
26                 data: { // 用于提供数据
27                     msg: 'hello Vue!',
28                     info: 'hello world Vue !',
29                 }
30 
31             });
32         </script>
33     </body>
34 </html>

7、Vue模板语法，双向数据绑定。

MVVM设计思想，最只要的理念就是分治，把不同的功能代码放到不同的模块，通过特定的方式建立关联。　　1）、M指的是Model，就是data里面的数据，提供数据的。Model通过VM的Data Bindings数据绑定View。　　2）、V指的是View，就是所写的模板Dom元素，提供页面展示效果的。View通过VM的DOM Listeners事件监听Model。　　3）、VM指的是View-Model，就是控制逻辑，实现控制逻辑将两者结合到一起。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>hello world</title>
 6     </head>
 7     <body>
 8 
 9         <div id="app">
10             <div>{{msg}}</div>
11             <!-- 主要是用于表单输入域中。 -->
12             <!-- 双向数据绑定分析，方向一、页面影响数据，方向二、数据影响页面。 -->
13             <!-- 用户修改页面内容数据会改变，数据改变了影响插值表达式的内容页面改变。 -->
14             <div>
15                 <input type="text" v-model="msg" />
16             </div>
17         </div>
18 
19 
20         <script src="vue.js" type="text/javascript"></script>
21         <script type="text/javascript">
22             // Vue代码运行原理分析，概述编译过程的概念（Vue语法->原生语法），就是Vue代码经过Vue框架变成了原生js代码。
23             // 创建一个Vue的变量vm，存储Vue的实例，提供一个参数，是对象形式的，并且这个对象包含两个重要的属性el、data。
24             // Vue所做的工作也就是把数据填充把页面的标签里面。
25             var vm = new Vue({
26                 // el元素的挂载位置，值可以是CSS选择器或者DOM元素，挂载就是将数据关联到页面的某个标签上。
27                 el: '#app', // el是告诉Vue把数据填充到那个位置，这里通过id选择器进行绑定到那个标签。
28                 // data模型数据，值是一个对象。
29                 data: { // 用于提供数据
30                     msg: 'hello Vue!',
31                 }
32 
33             });
34         </script>
35     </body>
36 </html>

8、Vue模板语法，事件绑定。

1）、 Vue如何处理事件？

　　v-on指令用法：<input type="button" v-on:click="num++" />。　　v-on简写形式，<input type="button" @click="num++"/>。 2）、事件函数的调用方式。

　　直接绑定函数名称：<button v-on:click="add">加一</button>。不需要传递事件对象，默认携带事件对象。　　调用函数：<button @click="reduce()">减一</button>。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>hello world</title>
 6     </head>
 7     <body>
 8 
 9         <div id="app">
10             <div>{{num}}</div>
11             <!-- 如果逻辑直接写到@click、v-on:click后面，不合理，随着业务量增多，这里变得十分冗余。 -->
12             <div>
13                 <input type="button" v-on:click="num++" value="加一" />
14                 <input type="button" @click="num--" value="减一" />
15 
16                 <br />
17                 <button v-on:click="add">加一</button>
18                 <button @click="reduce()">减一</button>
19             </div>
20         </div>
21 
22 
23         <script src="vue.js" type="text/javascript"></script>
24         <script type="text/javascript">
25             // Vue代码运行原理分析，概述编译过程的概念（Vue语法->原生语法），就是Vue代码经过Vue框架变成了原生js代码。
26             // 创建一个Vue的变量vm，存储Vue的实例，提供一个参数，是对象形式的，并且这个对象包含两个重要的属性el、data。
27             // Vue所做的工作也就是把数据填充把页面的标签里面。
28             var vm = new Vue({
29                 // el元素的挂载位置，值可以是CSS选择器或者DOM元素，挂载就是将数据关联到页面的某个标签上。
30                 el: '#app', // el是告诉Vue把数据填充到那个位置，这里通过id选择器进行绑定到那个标签。
31                 // data模型数据，值是一个对象。
32                 data: { // 用于提供数据
33                     // msg: 'hello Vue!',
34                     num: 1, // num初始化值为1
35                 },
36                 methods: { // methods属性里面可以定义很多方法的，值是一个对象。方法需要定义到methods属性当中。
37                     add: function() {
38                         this.num++; // 此处的this指的是vm即Vue的实例，通过vm可以访问到num。
39                     },
40                     reduce: function() {
41                         this.num--;
42                     }
43                 }
44 
45             });
46         </script>
47     </body>
48 </html>

3）、事件函数的参数传递。如果传参事件对象，固定格式$event。

普通的参数和事件对象：<button @click="say("hi",$event)">Say Hi</button>。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>hello world</title>
 6     </head>
 7     <body>
 8 
 9         <div id="app">
10             <div>{{num}}</div>
11             <!-- 如果逻辑直接写到@click、v-on:click后面，不合理，随着业务量增多，这里变得十分冗余。 -->
12             <div>
13                 <input type="button" v-on:click="num++" value="加一" />
14                 <input type="button" @click="num--" value="减一" />
15 
16                 <br />
17                 <!-- 
18                     事件绑定-参数传递。
19                     1）、如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数。
20                     2）、如果事件绑定函数调用，那么事件对象必须作为最后一个参数进行显式传递，并且事件对象的名称必须是固定的$event。
21                  -->
22                 <!-- v-on:click="add"不需要传递事件对象，默认携带事件对象。 -->
23                 <button v-on:click="add">加一</button>
24                 <!-- 这种情况是传递具体的参数 -->
25                 <button @click="reduce(2,3,4)">减二</button>
26 
27                 <!-- 传递事件对象，最后一个参数是事件对象，并且$event名称是固定的 -->
28                 <button @click="multip(2,3,$event)">乘二</button>
29             </div>
30         </div>
31 
32 
33         <script src="vue.js" type="text/javascript"></script>
34         <script type="text/javascript">
35             // Vue代码运行原理分析，概述编译过程的概念（Vue语法->原生语法），就是Vue代码经过Vue框架变成了原生js代码。
36             // 创建一个Vue的变量vm，存储Vue的实例，提供一个参数，是对象形式的，并且这个对象包含两个重要的属性el、data。
37             // Vue所做的工作也就是把数据填充把页面的标签里面。
38             var vm = new Vue({
39                 // el元素的挂载位置，值可以是CSS选择器或者DOM元素，挂载就是将数据关联到页面的某个标签上。
40                 el: '#app', // el是告诉Vue把数据填充到那个位置，这里通过id选择器进行绑定到那个标签。
41                 // data模型数据，值是一个对象。
42                 data: { // 用于提供数据
43                     // msg: 'hello Vue!',
44                     num: 1, // num初始化值为1
45                 },
46                 methods: { // methods属性里面可以定义很多方法的，值是一个对象。方法需要定义到methods属性当中。
47                     add: function() {
48                         console.log(event.target.tagName); // 通过event事件对象可以拿到触发事件的对象。
49                         console.log(event.target.innerHTML); // 通过event事件对象可以拿到内容。
50                         this.num++; // 此处的this指的是vm即Vue的实例，通过vm可以访问到num。
51                     },
52                     reduce: function(param1, param2, param3) {
53                         console.log(param1);
54                         console.log(param2);
55                         console.log(param3);
56                         this.num = this.num - param1;
57                     },
58                     multip: function(param1, param2, event) {
59                         console.log(param1);
60                         console.log(param2);
61                         console.log(event.target.tagName); // 通过event事件对象可以拿到触发事件的对象。
62                         console.log(event.target.innerHTML); // 通过event事件对象可以拿到内容。
63                         this.num = this.num * param1;
64                     },
65 
66                 }
67 
68             });
69         </script>
70     </body>
71 </html>

4）、事件修饰符，处理事件的特殊行为。

.stop阻止冒泡：<a v-on:click.stop="">跳转</a>。　　.prevent阻止默认行为：<a v-on:click.prevent="">跳转</a>。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>hello world</title>
 6     </head>
 7     <body>
 8 
 9         <div id="app">
10             <div>{{num}}</div>
11             <!-- 冒泡行为，会执行这里的点击事件 -->
12             <div @click="add0">
13                 <!-- 
14                     事件绑定-参数传递。
15                     1）、如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数。
16                     2）、如果事件绑定函数调用，那么事件对象必须作为最后一个参数进行显式传递，并且事件对象的名称必须是固定的$event。
17                  -->
18                 <!-- v-on:click="add"不需要传递事件对象，默认携带事件对象。 -->
19                 <!-- .stop阻止了冒泡的发生 -->
20                 <button v-on:click.stop="add">加一</button>
21                 <!-- 这种情况是传递具体的参数 -->
22                 <button @click="reduce(2,3,4)">减二</button>
23 
24                 <!-- 传递事件对象，最后一个参数是事件对象，并且$event名称是固定的 -->
25                 <button @click="multip(2,3,$event)">乘二</button>
26 
27                 <!-- 阻止默认行为，典型应用是超链接，默认的时候会发生跳转，.prevent事件修饰符阻止默认行为 -->
28                 <a href="https://www.baidu.com/" @click.stop.prevent="stopBlank">百度</a>
29             </div>
30         </div>
31 
32 
33         <script src="vue.js" type="text/javascript"></script>
34         <script type="text/javascript">
35             // Vue代码运行原理分析，概述编译过程的概念（Vue语法->原生语法），就是Vue代码经过Vue框架变成了原生js代码。
36             // 创建一个Vue的变量vm，存储Vue的实例，提供一个参数，是对象形式的，并且这个对象包含两个重要的属性el、data。
37             // Vue所做的工作也就是把数据填充把页面的标签里面。
38             var vm = new Vue({
39                 // el元素的挂载位置，值可以是CSS选择器或者DOM元素，挂载就是将数据关联到页面的某个标签上。
40                 el: '#app', // el是告诉Vue把数据填充到那个位置，这里通过id选择器进行绑定到那个标签。
41                 // data模型数据，值是一个对象。
42                 data: { // 用于提供数据
43                     // msg: 'hello Vue!',
44                     num: 1, // num初始化值为1
45                 },
46                 methods: { // methods属性里面可以定义很多方法的，值是一个对象。方法需要定义到methods属性当中。
47                     // 通过点击事件的冒泡触发了该方法的执行。
48                     add0: function() {
49                         this.num++;
50                     },
51                     add: function() {
52                         console.log(event.target.tagName); // 通过event事件对象可以拿到触发事件的对象。
53                         console.log(event.target.innerHTML); // 通过event事件对象可以拿到内容。
54                         this.num++; // 此处的this指的是vm即Vue的实例，通过vm可以访问到num。
55 
56                         // 阻止冒泡行为，就不会发生冒泡的行为。可以拿到事件对象就可以阻止冒泡的。
57                         // stopPropagation此方法可以根据事件对象调用阻止冒泡的发生。
58                         // event.stopPropagation();
59 
60                     },
61                     reduce: function(param1, param2, param3) {
62                         console.log(param1);
63                         console.log(param2);
64                         console.log(param3);
65                         this.num = this.num - param1;
66                     },
67                     multip: function(param1, param2, event) {
68                         console.log(param1);
69                         console.log(param2);
70                         console.log(event.target.tagName); // 通过event事件对象可以拿到触发事件的对象。
71                         console.log(event.target.innerHTML); // 通过event事件对象可以拿到内容。
72                         this.num = this.num * param1;
73                     },
74                     stopBlank: function(event) {
75                         // 阻止默认跳转行为，原生Js的api，换成事件修饰符。
76                         // event.preventDefault();
77                     },
78 
79                 }
80 
81             });
82         </script>
83     </body>
84 </html>

5）、按键修饰符。

　　.enter回车键：<input v-on:keyup.enter='submit'>。　　.delete删除键：<input v-on:keyup.delete='handle'>。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>hello world</title>
 6     </head>
 7     <body>
 8 
 9         <div id="app">
10             <form action="">
11                 <div>账号：<input type="text" v-on:keyup.delete="clearContext" v-model="name" /></div>
12                 <!-- v-on:keyup.enter按键修饰符，通过回车就可以触发事件 -->
13                 <div>密码：<input type="text" v-on:keyup.enter="handleSubmit" v-model="password" /></div>
14                 <div><input type="button" v-on:click="handleSubmit" value="提交"></div>
15             </form>
16 
17         </div>
18         </div>
19 
20 
21         <script src="vue.js" type="text/javascript"></script>
22         <script type="text/javascript">
23             // Vue代码运行原理分析，概述编译过程的概念（Vue语法->原生语法），就是Vue代码经过Vue框架变成了原生js代码。
24             // 创建一个Vue的变量vm，存储Vue的实例，提供一个参数，是对象形式的，并且这个对象包含两个重要的属性el、data。
25             // Vue所做的工作也就是把数据填充把页面的标签里面。
26             var vm = new Vue({
27                 // el元素的挂载位置，值可以是CSS选择器或者DOM元素，挂载就是将数据关联到页面的某个标签上。
28                 el: '#app', // el是告诉Vue把数据填充到那个位置，这里通过id选择器进行绑定到那个标签。
29                 // data模型数据，值是一个对象。
30                 data: { // 用于提供数据
31                     name: '',
32                     password: ''
33                 },
34                 methods: { // methods属性里面可以定义很多方法的，值是一个对象。方法需要定义到methods属性当中。
35                     handleSubmit: function() {
36                         // 此时可以将表单的内容通过ajax提交到后台
37                         console.log(this.name, this.password)
38                     },
39                     clearContext: function() {
40                         // 按delete键的时候，清空用户名
41                         this.name = '';
42                         this.password = '';
43                     }
44                 }
45 
46             });
47         </script>
48     </body>
49 </html>

6）、自定义按键修饰符。

全局config.keyCodes对象：Vue.config.keyCodes.f1=112。注释：keyCodes是一个对象，f1是自定义的，112是一个值，这个值是每一个按键的唯一标识，通过这个事件对象可以获取到这个唯一标识。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>hello world</title>
 6     </head>
 7     <body>
 8 
 9         <div id="app">
10             <input type="text" v-on:keyup="handle" v-model="info" />
11 
12             <!-- 13就是Enter的唯一标识，可以使用这种形式v-on:keyup.13，就不用自定义按键了，但是数值的形式不直观 -->
13             <input type="text" v-on:keyup.13="handle" v-model="info" />
14             <!-- 事件绑定，自定义按键修饰符，规则，自定义按键修饰符名字是自定义的，但是对应的值必须是按键对应的event.keyCode的值。-->
15             <input type="text" v-on:keyup.f1="handle" v-model="info" />
16         </div>
17         </div>
18 
19 
20         <script src="vue.js" type="text/javascript"></script>
21         <script type="text/javascript">
22             // 自定义按键修饰符，可以使用 `v-on:keyup.f1`
23             Vue.config.keyCodes.f1 = 112
24             // Vue代码运行原理分析，概述编译过程的概念（Vue语法->原生语法），就是Vue代码经过Vue框架变成了原生js代码。
25             // 创建一个Vue的变量vm，存储Vue的实例，提供一个参数，是对象形式的，并且这个对象包含两个重要的属性el、data。
26             // Vue所做的工作也就是把数据填充把页面的标签里面。
27             var vm = new Vue({
28                 // el元素的挂载位置，值可以是CSS选择器或者DOM元素，挂载就是将数据关联到页面的某个标签上。
29                 el: '#app', // el是告诉Vue把数据填充到那个位置，这里通过id选择器进行绑定到那个标签。
30                 // data模型数据，值是一个对象。
31                 data: { // 用于提供数据
32                     info: '',
33                 },
34                 methods: { // methods属性里面可以定义很多方法的，值是一个对象。方法需要定义到methods属性当中。
35                     handle: function() {
36                         // 可以通过event.keyCode获取到每一个按键的唯一标识
37                         console.log(event.keyCode)
38                     }
39                 }
40 
41             });
42         </script>
43     </body>
44 </html>

9、简单相加计算器。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>hello world</title>
 6     </head>
 7     <body>
 8 
 9         <div id="app">
10             <!-- 
11                 1）、通过v-model指令实现数值a和数值b的绑定。
12                 2）、给计算按钮绑定事件，实现计算逻辑。
13                 3）、将计算结果绑定到对应的位置。
14              -->
15 
16             <h1>简单计算器</h1>
17             <div>
18                 <span>数值A：</span>
19                 <span>
20                     <input type="text" v-model="a" />
21                 </span>
22             </div>
23             <div>
24                 <span>数值B：</span>
25                 <span>
26                     <input type="text" v-model="b" />
27                 </span>
28             </div>
29             <div>
30                 <button @click="handle">计算</button>
31             </div>
32             <div>
33                 <span>计算结果：</span>
34                 <span v-text="result"></span>
35             </div>
36         </div>
37         </div>
38 
39 
40         <script src="vue.js" type="text/javascript"></script>
41         <script type="text/javascript">
42             // Vue代码运行原理分析，概述编译过程的概念（Vue语法->原生语法），就是Vue代码经过Vue框架变成了原生js代码。
43             // 创建一个Vue的变量vm，存储Vue的实例，提供一个参数，是对象形式的，并且这个对象包含两个重要的属性el、data。
44             // Vue所做的工作也就是把数据填充把页面的标签里面。
45             var vm = new Vue({
46                 // el元素的挂载位置，值可以是CSS选择器或者DOM元素，挂载就是将数据关联到页面的某个标签上。
47                 el: '#app', // el是告诉Vue把数据填充到那个位置，这里通过id选择器进行绑定到那个标签。
48                 // data模型数据，值是一个对象。
49                 data: { // 用于提供数据
50                     a: '',
51                     b: '',
52                     result: ''
53                 },
54                 methods: { // methods属性里面可以定义很多方法的，值是一个对象。方法需要定义到methods属性当中。
55                     handle: function() {
56                         // 实现计算结果，默认获取得到的是字符串，这里需要先转换成整数
57                         this.result = parseInt(this.a) + parseInt(this.b);
58                     }
59                 }
60 
61             });
62         </script>
63     </body>
64 </html>

10、Vue模板语法，属性绑定。

1）、Vue如何动态处理属性。

　　v-bind指令用法：<a v-bind:href='url'>跳转</a>。　　缩写形式：<a :href='url'>跳转</a>

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>hello world</title>
 6     </head>
 7     <body>
 8 
 9         <div id="app">
10             <a href="https://www.baidu.com">百度</a>
11 
12             <!-- v-bind指令用法，使用外部的url来填充访问链接 -->
13             <a v-bind:href="url">百度</a>
14             <a :href="url">百度</a>
15             <button @click="handle">切换</button>
16 
17         </div>
18 
19 
20         <script src="vue.js" type="text/javascript"></script>
21         <script type="text/javascript">
22             // Vue代码运行原理分析，概述编译过程的概念（Vue语法->原生语法），就是Vue代码经过Vue框架变成了原生js代码。
23             // 创建一个Vue的变量vm，存储Vue的实例，提供一个参数，是对象形式的，并且这个对象包含两个重要的属性el、data。
24             // Vue所做的工作也就是把数据填充把页面的标签里面。
25             var vm = new Vue({
26                 // el元素的挂载位置，值可以是CSS选择器或者DOM元素，挂载就是将数据关联到页面的某个标签上。
27                 el: '#app', // el是告诉Vue把数据填充到那个位置，这里通过id选择器进行绑定到那个标签。
28                 // data模型数据，值是一个对象。
29                 data: { // 用于提供数据
30                     url: 'https://www.baidu.com'
31                 },
32                 methods: { // methods属性里面可以定义很多方法的，值是一个对象。方法需要定义到methods属性当中。
33                     handle: function() {
34                         // 修改url地址
35                         this.url = 'https://cn.vuejs.org/';
36                     }
37                 }
38 
39             });
40         </script>
41     </body>
42 </html>

2）、v-model的底层实现原理分析，v-model用于实现双向数据绑定。v-model底层用到的是属性绑定和事件绑定的组合。<input v-bind:value="msg" v-on:input="msg=$event.target.value" />

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>hello world</title>
 6     </head>
 7     <body>
 8 
 9         <div id="app">
10             <div v-text="msg"></div>
11             <!-- 通过v-on:input实现，修改数据影响模型中的数据，当input输入框发生变化，触发input事件 -->
12             <input v-bind:value="msg" v-on:input="handle" />
13             <!-- 简化形式，通过v-on:input="msg=$event.target.value"可以获取到最新值，将最新值赋值给v-on:input里面的msg -->
14             <input type="text" v-bind:value="msg" v-on:input="msg=$event.target.value" />
15             <!-- v-model="msg"数据双向绑定 -->
16             <input type="text" v-model="msg" />
17         </div>
18 
19 
20         <script src="vue.js" type="text/javascript"></script>
21         <script type="text/javascript">
22             // Vue代码运行原理分析，概述编译过程的概念（Vue语法->原生语法），就是Vue代码经过Vue框架变成了原生js代码。
23             // 创建一个Vue的变量vm，存储Vue的实例，提供一个参数，是对象形式的，并且这个对象包含两个重要的属性el、data。
24             // Vue所做的工作也就是把数据填充把页面的标签里面。
25             var vm = new Vue({
26                 // el元素的挂载位置，值可以是CSS选择器或者DOM元素，挂载就是将数据关联到页面的某个标签上。
27                 el: '#app', // el是告诉Vue把数据填充到那个位置，这里通过id选择器进行绑定到那个标签。
28                 // data模型数据，值是一个对象。
29                 data: { // 用于提供数据
30                     msg: 'hello'
31                 },
32                 methods: { // methods属性里面可以定义很多方法的，值是一个对象。方法需要定义到methods属性当中。
33                     handle: function(event) {
34                         // 通过拿到event对象就可以操作元素的值
35                         // 覆盖原来的值，影响模型中的数据，而模型中数据改变了进而应该视图中的数据，这就是双向绑定。
36                         // 使用输入域中的最新的数据覆盖原来的数据。
37                         this.msg = event.target.value;
38                     }
39                 }
40 
41             });
42         </script>
43     </body>
44 </html>

11、Vue模板语法，样式绑定。

1）、通过class样式进行处理，处理标签的属性。

　　对象语法：<div v-bind:class="{active:isActive}"></div>。对象形式的。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>hello world</title>
 6         <style type="text/css">
 7             .active {
 8                 border: 1px solid red;
 9                 width: 100px;
10                 height: 100px;
11             }
12 
13             .error {
14                 background-color: orange;
15             }
16         </style>
17     </head>
18     <body>
19 
20         <div id="app">
21             <!-- 传统方式是操作dom的class属性，Vue使用的v-bind:class="{}"来操作属性即可 -->
22             <!-- 对象形式：v-bind:class="{}"的大括号里面是一个对象，对象是键值对形式的，键是类名，值是属性，控制是否显式 -->
23             <div v-bind:class="{active : isActive}">哈哈哈</div>
24 
25             <!-- 对象形式：多个对象 -->
26             <div v-bind:class="{active : isActive,error : isError}">呵呵呵</div>
27             <!-- 切换，可以切换是否展示 -->
28             <button @click="handle">切换</button>
29         </div>
30 
31         <script src="vue.js" type="text/javascript"></script>
32         <script type="text/javascript">
33             // Vue代码运行原理分析，概述编译过程的概念（Vue语法->原生语法），就是Vue代码经过Vue框架变成了原生js代码。
34             // 创建一个Vue的变量vm，存储Vue的实例，提供一个参数，是对象形式的，并且这个对象包含两个重要的属性el、data。
35             // Vue所做的工作也就是把数据填充把页面的标签里面。
36             var vm = new Vue({
37                 // el元素的挂载位置，值可以是CSS选择器或者DOM元素，挂载就是将数据关联到页面的某个标签上。
38                 el: '#app', // el是告诉Vue把数据填充到那个位置，这里通过id选择器进行绑定到那个标签。
39                 // data模型数据，值是一个对象。
40                 data: { // 用于提供数据
41                     isActive: 'true', // true默认是展示的，isActive其中is开头的一般是标志位，要么是true，要么是false。
42                     isError: 'true', // true显式，false不显示
43                 },
44                 methods: { // methods属性里面可以定义很多方法的，值是一个对象。方法需要定义到methods属性当中。
45                     handle: function() {
46                         // 控制isActive的值，在true和false之间进行切换，使用!取反来操作
47                         this.isActive = !this.isActive;
48                         this.isError = !this.isError;
49                     }
50                 }
51 
52             });
53         </script>
54     </body>
55 </html>

　　数组语法：<div v-bind:class="[activeClass, errorClass]"></div>。数组形式的。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>hello world</title>
 6         <style type="text/css">
 7             .active {
 8                 border: 1px solid red;
 9                 width: 100px;
10                 height: 100px;
11             }
12 
13             .error {
14                 background-color: orange;
15             }
16         </style>
17     </head>
18     <body>
19 
20         <div id="app">
21             <!-- 数组形式，绑定样式 -->
22             <div v-bind:class="[activeClass, errorClass]">哈哈哈</div>
23 
24             <!-- 切换，可以切换是否展示 -->
25             <button @click="handle">切换</button>
26         </div>
27 
28         <script src="vue.js" type="text/javascript"></script>
29         <script type="text/javascript">
30             // Vue代码运行原理分析，概述编译过程的概念（Vue语法->原生语法），就是Vue代码经过Vue框架变成了原生js代码。
31             // 创建一个Vue的变量vm，存储Vue的实例，提供一个参数，是对象形式的，并且这个对象包含两个重要的属性el、data。
32             // Vue所做的工作也就是把数据填充把页面的标签里面。
33             var vm = new Vue({
34                 // el元素的挂载位置，值可以是CSS选择器或者DOM元素，挂载就是将数据关联到页面的某个标签上。
35                 el: '#app', // el是告诉Vue把数据填充到那个位置，这里通过id选择器进行绑定到那个标签。
36                 // data模型数据，值是一个对象。
37                 data: { // 用于提供数据
38                     activeClass: 'active', // activeClass表示的是类名称
39                     errorClass: 'error', // 
40                 },
41                 methods: { // methods属性里面可以定义很多方法的，值是一个对象。方法需要定义到methods属性当中。
42                     handle: function() {
43                         this.activeClass = ''; // 直接将类名置空，就可以去掉这个样式
44                         this.errorClass = '';
45                     }
46                 }
47 
48             });
49         </script>
50     </body>
51 </html>

2)、样式绑定相关语法细节。

　　a、对象绑定和数组绑定可以结合使用。　　b、class绑定的值可以简化操作。　　c、默认的class如何处理。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>hello world</title>
 6         <style type="text/css">
 7             .active {
 8                 border: 1px solid red;
 9                 width: 100px;
10                 height: 100px;
11             }
12 
13             .error {
14                 background-color: orange;
15             }
16 
17             .colors {
18                 color: blue;
19             }
20 
21             .base {
22                 font-size: 28px;
23             }
24         </style>
25     </head>
26     <body>
27 
28         <div id="app">
29             <!--
30                 样式绑定相关语法细节。
31                 1、对象绑定和数组绑定可以结合使用。
32                 2、class绑定的值可以简化操作。
33                 3、默认的class如何处理。
34              -->
35             <!-- 数组形式和对象样式组合使用，绑定样式，但是如果样式过多，可读性变差 -->
36             <div v-bind:class="[activeClass, errorClass, {colors: isColor}]">哈哈哈</div>
37 
38             <!-- 数组形式的简化写法 -->
39             <div v-bind:class="arrClasses">嘿嘿嘿</div>
40 
41             <!-- 对象形式的简化写法 -->
42             <div v-bind:class="objClass">呵呵呵</div>
43 
44             <!-- 默认的class如何处理，默认的class不会被覆盖，而是结合到了一起 -->
45             <div class="base" v-bind:class="objClass">哼哼哼</div>
46 
47 
48             <!-- 切换，可以切换是否展示 -->
49             <button @click="handle">切换</button>
50         </div>
51 
52         <script src="vue.js" type="text/javascript"></script>
53         <script type="text/javascript">
54             // Vue代码运行原理分析，概述编译过程的概念（Vue语法->原生语法），就是Vue代码经过Vue框架变成了原生js代码。
55             // 创建一个Vue的变量vm，存储Vue的实例，提供一个参数，是对象形式的，并且这个对象包含两个重要的属性el、data。
56             // Vue所做的工作也就是把数据填充把页面的标签里面。
57             var vm = new Vue({
58                 // el元素的挂载位置，值可以是CSS选择器或者DOM元素，挂载就是将数据关联到页面的某个标签上。
59                 el: '#app', // el是告诉Vue把数据填充到那个位置，这里通过id选择器进行绑定到那个标签。
60                 // data模型数据，值是一个对象。
61                 data: { // 用于提供数据
62                     activeClass: 'active', // activeClass表示的是类名称
63                     errorClass: 'error', // 
64                     isColor: true,
65                     arrClasses: ['active', 'error'], // 简化数组形式
66                     objClass: { // 对象形式的简化
67                         active: true,
68                         error: true,
69                     }
70                 },
71                 methods: { // methods属性里面可以定义很多方法的，值是一个对象。方法需要定义到methods属性当中。
72                     handle: function() {
73                         this.isColor = !this.isColor; // 
74                         this.objClass.error = !this.objClass.error; // 对象形式修改样式
75                     }
76                 }
77 
78             });
79         </script>
80     </body>
81 </html>

3）、style样式处理，也称为内联样式。

对象语法：<div v-bind:style="{color: activeColor,fontSize: fontSize}"></div>。直接写了css样式。数组语法：<div v-bind:class="[baseStyles, overridingStyles]"></div>。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>hello world</title>
 6     </head>
 7     <body>
 8 
 9         <div id="app">
10             <!-- 对象形式，如果样式较多，可读性不好 -->
11             <div v-bind:style="{border: borderStyle, width: widthStyle, height: heightStyle}">哈哈哈</div>
12             <!-- 对象形式简化用法，通过使用对象形式的一组样式来展示 -->
13             <div v-bind:style="objStyles">哈哈哈</div>
14 
15             <!-- 数组语法，里面存放的多个对象的形式 -->
16             <div v-bind:style="[objStyles, overwiteStyles]"></div>
17 
18             <!-- 切换，可以切换是否展示 -->
19             <button @click="handle">切换</button>
20         </div>
21 
22         <script src="vue.js" type="text/javascript"></script>
23         <script type="text/javascript">
24             // Vue代码运行原理分析，概述编译过程的概念（Vue语法->原生语法），就是Vue代码经过Vue框架变成了原生js代码。
25             // 创建一个Vue的变量vm，存储Vue的实例，提供一个参数，是对象形式的，并且这个对象包含两个重要的属性el、data。
26             // Vue所做的工作也就是把数据填充把页面的标签里面。
27             var vm = new Vue({
28                 // el元素的挂载位置，值可以是CSS选择器或者DOM元素，挂载就是将数据关联到页面的某个标签上。
29                 el: '#app', // el是告诉Vue把数据填充到那个位置，这里通过id选择器进行绑定到那个标签。
30                 // data模型数据，值是一个对象。
31                 data: { // 用于提供数据
32                     borderStyle: '1px solid red', //
33                     widthStyle: '100px', // 
34                     heightStyle: '200px',
35                     objStyles: {
36                         border: '1px solid red', //
37                         width: '200px', // 
38                         height: '100px',
39                     },
40                     overwiteStyles: {
41                         border: '3px solid orange', //
42                         width: '100px', //
43                         height: '200px',
44                         backgroundColor: 'pink',
45                     }
46                 },
47                 methods: { // methods属性里面可以定义很多方法的，值是一个对象。方法需要定义到methods属性当中。
48                     handle: function() {
49                         this.heightStyle = '100px'; // 
50                         this.objStyles.width = '100px'; // 可以修改对象里面的属性的样式值
51                         this.overwiteStyles.height = '100px'; // 可以修改对象里面的属性的样式值
52                     }
53                 }
54 
55             });
56         </script>
57     </body>
58 </html>

12、Vue模板语法，分支循环结构。

1）、分支结构，v-if、v-else、v-else-if、v-show。

　　v-if和v-show的区别，v-if控制元素是否渲染到页面。v-show控制元素是否显式（已经渲染到了页面）。如果一个元素频繁的显式和隐藏就使用v-show，如果一个元素渲染出来之后变化的比较少的话就用v-if，控制的是dom元素的增加或者删除。。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>hello world</title>
 6     </head>
 7     <body>
 8 
 9         <div id="app">
10             <input v-model="score" />
11             <!-- 分支结构，渲染出来的只有一个div，区别于v-show -->
12             <div v-if="score>= 90">优秀</div>
13             <div v-else-if="score< 90 && score >= 80">良好</div>
14             <div v-else-if="score< 80 && score > 70">一般</div>
15             <div v-else-if="score< 70 && score > 60">及格</div>
16             <div v-else>不及格</div>
17 
18             <br />
19             <!-- v-show的原理，控制元素样式是否显式，就是display:none或者display:block; -->
20             <!-- 分支结构，v-show，当为false的时候，页面不展示，但是浏览器源码是展示的，false的样式是style="display: none;" -->
21             <div v-show="flag">测试v-show</div>
22             <!-- 切换 -->
23             <button @click="handle">切换</button>
24         </div>
25 
26         <script src="vue.js" type="text/javascript"></script>
27         <script type="text/javascript">
28             // Vue代码运行原理分析，概述编译过程的概念（Vue语法->原生语法），就是Vue代码经过Vue框架变成了原生js代码。
29             // 创建一个Vue的变量vm，存储Vue的实例，提供一个参数，是对象形式的，并且这个对象包含两个重要的属性el、data。
30             // Vue所做的工作也就是把数据填充把页面的标签里面。
31             var vm = new Vue({
32                 // el元素的挂载位置，值可以是CSS选择器或者DOM元素，挂载就是将数据关联到页面的某个标签上。
33                 el: '#app', // el是告诉Vue把数据填充到那个位置，这里通过id选择器进行绑定到那个标签。
34                 // data模型数据，值是一个对象。
35                 data: { // 用于提供数据
36                     score: '',
37                     flag: true,
38                 },
39                 methods: { // methods属性里面可以定义很多方法的，值是一个对象。方法需要定义到methods属性当中。
40                     handle: function() {
41                         this.flag = !this.flag;
42                     }
43                 }
44 
45             });
46         </script>
47     </body>
48 </html>

2）、分支循环结构，循环结构。

a）、v-for遍历数组：<li v-for="item in list">{{item}}</li>。　　　　<li v-for="(item, index) in list">{{item}} + '---' + {{index}}</li>。　　b）、key的作用，帮助vue区分不同的元素，从而提高性能。　　　　<li :key='item.id' v-for="(item,index) in list">{{item}} + '---' + {{index}}</li>。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>hello world</title>
 6     </head>
 7     <body>
 8 
 9         <div id="app">
10             <span>水果列表：</span>
11             <!-- 循环遍历 -->
12             <!-- 使用v-text进行展示，可以避免闪动现象发生 -->
13             <li v-for="item in fruit" v-text="item"></li>
14             <!-- 使用插值表达式，可能出现闪动 -->
15             <!-- <li v-for="item in fruit">{{item}}</li> -->
16 
17             <br />
18             <span>水果列表：</span>
19             <!-- 展示的索引和元素，使用空格隔开 -->
20             <li v-for="(item,index) in fruit">{{index + " " + item}}</li>
21             <!-- 展示形式和上面的一致 -->
22             <li v-for="(item,index) in fruit">{{index}} {{item}}</li>
23 
24             <br />
25             <span>水果列表：</span>
26             <!-- 复杂的数组对象结构 -->
27             <li v-for="item in cfruit">
28                 <!-- 通过点来获取数组对象的属性值 -->
29                 <span>{{item.ename}} {{item.cname}}</span>
30             </li>
31 
32             <br />
33             <span>水果列表：</span>
34             <!-- key的作用，帮助vue区分不同的元素，从而提高性能。Vue在处理Dom元素的时候，需要区分兄弟节点之间彼此是不一样的，给每个兄弟节点标注一个唯一标识 -->
35             <!-- 使用唯一标识，方便区分是那一个元素 -->
36             <li :key='item.id' v-for="(item,index) in cfruit">
37                 <!-- 通过点来获取数组对象的属性值 -->
38                 <span>{{item.ename}} {{item.cname}}</span>
39             </li>
40         </div>
41 
42         <script src="vue.js" type="text/javascript"></script>
43         <script type="text/javascript">
44             // Vue代码运行原理分析，概述编译过程的概念（Vue语法->原生语法），就是Vue代码经过Vue框架变成了原生js代码。
45             // 创建一个Vue的变量vm，存储Vue的实例，提供一个参数，是对象形式的，并且这个对象包含两个重要的属性el、data。
46             // Vue所做的工作也就是把数据填充把页面的标签里面。
47             var vm = new Vue({
48                 // el元素的挂载位置，值可以是CSS选择器或者DOM元素，挂载就是将数据关联到页面的某个标签上。
49                 el: '#app', // el是告诉Vue把数据填充到那个位置，这里通过id选择器进行绑定到那个标签。
50                 // data模型数据，值是一个对象。
51                 data: { // 用于提供数据
52                     fruit: ['apple', 'orange', 'banana'],
53                     cfruit: [{
54                         id: 1,
55                         ename: 'apple',
56                         cname: '苹果',
57                     }, {
58                         id: 2,
59                         ename: 'orange',
60                         cname: '橘子',
61                     }, {
62                         id: 3,
63                         ename: 'banana',
64                         cname: '香蕉',
65                     }, ]
66                 },
67                 methods: { // methods属性里面可以定义很多方法的，值是一个对象。方法需要定义到methods属性当中。
68 
69                 }
70 
71             });
72         </script>
73     </body>
74 </html>

3）、分支循环结构，循环结构。

　　a）、v-for遍历对象：<div v-for='(value, key, index) in object'></div>。　　b）、v-if和v-for结合使用：<div v-if='value == 12' v-for='(value, key, index) in object'></div>。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>hello world</title>
 6     </head>
 7     <body>
 8 
 9         <div id="app">
10             <!-- v-for遍历对象 -->
11             <div v-for="(value, key, index) in object">
12                 {{index}} {{key}} {{value}}
13             </div>
14             
15             <br />
16             <!-- v-if和v-for结合使用 -->
17             <div v-if="value == 22" v-for="(value, key, index) in object">{{index}} {{key}} {{value}}</div>
18         </div>
19 
20         <script src="vue.js" type="text/javascript"></script>
21         <script type="text/javascript">
22             // Vue代码运行原理分析，概述编译过程的概念（Vue语法->原生语法），就是Vue代码经过Vue框架变成了原生js代码。
23             // 创建一个Vue的变量vm，存储Vue的实例，提供一个参数，是对象形式的，并且这个对象包含两个重要的属性el、data。
24             // Vue所做的工作也就是把数据填充把页面的标签里面。
25             var vm = new Vue({
26                 // el元素的挂载位置，值可以是CSS选择器或者DOM元素，挂载就是将数据关联到页面的某个标签上。
27                 el: '#app', // el是告诉Vue把数据填充到那个位置，这里通过id选择器进行绑定到那个标签。
28                 // data模型数据，值是一个对象。
29                 data: { // 用于提供数据
30                     object: {
31                         name: '张三三',
32                         age: 22,
33                         gender: '男性',
34                     }
35                 },
36                 methods: { // methods属性里面可以定义很多方法的，值是一个对象。方法需要定义到methods属性当中。
37 
38                 }
39 
40             });
41         </script>
42     </body>
43 </html>

13、Tab选项卡。

1）、实现静态ui效果，用传统的方式实现标签结构和样式。　　2）、基于数据重构ui效果，将静态的结构和样式重构为基于Vue模板语法的形式，处理事件绑定和js控制逻辑。　　3）、总结，Vue模板 + Js控制逻辑 = Vue实例对象，实现前端功能。

　　4）、声明式编程，模板的结构和最终显示的效果基本一致。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>hello world</title>
 6         <style>
 7             .tal ul{
 8                 overflow: hidden;
 9                 padding: 0;
10                 margin: 0;
11             }
12             .tab ul li{
13                 box-sizing: border-box;
14                 padding: 0;
15                 float: left;
16                 width: 100px;
17                 height: 45px;
18                 line-height: 45px;
19                 list-style: none;
20                 text-align: center;
21                 border-top: 1px solid black;
22                 border-right: 1px solid black;
23                 cursor: pointer;
24             }
25             .tab ul li:first-child{
26                 border-left: 1px solid black;
27             }
28             .tab ul li.active{
29                 background-color: orange;
30             }
31             .tab div{
32                 width: 500px;
33                 height: 300px;
34                 display: none;
35                 text-align: center;
36                 font-size: 30px;
37                 line-height: 300px;
38                 border: 0px solid black;
39                 border-top: 0px;
40             }
41             .tab div.current{
42                 display: block;
43             }
44         </style>
45     </head>
46     <body>
47 
48         <div id="app">
49             <!-- Tab选项卡。 -->
50             <div class="tab">
51                 <!-- 展示tab栏 -->
52                 <ul>
53                     <li v-on:click="change(index)" v-bind:class="currentIndex == index ? 'active':''" :key='item.id' v-for="(item,index) in list">{{item.title}}</li>
54                 </ul>
55                 <!-- 展示图片 -->
56                 <div v-bind:class="currentIndex == index ? 'current':''" :key='item.id' v-for="(item,index) in list">
57                     <!-- <img v-bind:src="item.path" /> -->
58                     <img :src="item.path" />
59                 </div>
60             </div>
61         </div>
62 
63         <script src="vue.js" type="text/javascript"></script>
64         <script type="text/javascript">
65             // Vue代码运行原理分析，概述编译过程的概念（Vue语法->原生语法），就是Vue代码经过Vue框架变成了原生js代码。
66             // 创建一个Vue的变量vm，存储Vue的实例，提供一个参数，是对象形式的，并且这个对象包含两个重要的属性el、data。
67             // Vue所做的工作也就是把数据填充把页面的标签里面。
68             // Vue实例对象将Vue模板和Js控制逻辑粘合到一起，最终实现前端功能
69             var vm = new Vue({
70                 // el元素的挂载位置，值可以是CSS选择器或者DOM元素，挂载就是将数据关联到页面的某个标签上。
71                 el: '#app', // el是告诉Vue把数据填充到那个位置，这里通过id选择器进行绑定到那个标签。
72                 // data模型数据，值是一个对象。
73                 data: { // 用于提供数据
74                     currentIndex: 0, //选项卡当前的索引 
75                     list: [{
76                         id: 1,
77                         title: '小米10Pro',
78                         path: 'img/1.jpg',
79                     }, {
80                         id: 2,
81                         title: '小米9Pro',
82                         path: 'img/2.jpg',
83                     }, {
84                         id: 3,
85                         title: '小米8Pro',
86                         path: 'img/3.jpg',
87                     }],
88                 },
89                 methods: { // methods属性里面可以定义很多方法的，值是一个对象。方法需要定义到methods属性当中。
90                     change: function(index) {
91                         // 实现选项卡的切换操作，切换的本质就是修改的类名称，操作类名称就是通过currentIndex这个索引的，因为这个索引影响三目运算符的真假
92                         this.currentIndex = index;
93                     }
94                 }
95 
96             });
97         </script>
98     </body>
99 </html>

实现效果如下所示：