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 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 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 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, 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 '200px', // 38 height: '100px', 39 }, 40 overwiteStyles: { 41 border: '3px solid orange', // 42 '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 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 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>
实现效果如下所示：
