Vue学习：基础精讲

mac2025-05-19 28

Vue学习：基础精讲

一、Vue实例

new Vue创建Vue实例，el代表Vue接管的DOM的所有显示，data里面用于存放数据，由于Vue接管了app部分，所以会对DOM里面的语法进行分析，发现运用了{{}}插值表达式，就会去data里面寻找对应的数据，利用这个数据替换掉这个插值表达式

同时Vue也可以分析出DOM所绑定的事件，所以当点击DOM元素的时候，就会去Vue实例寻找对应的方法

程序的入口便是从Vue实例开始执行，Vue就是一个根实例，Vue中的每一个组件也是一个Vue实例，当我们创建一个组件的时候，Vue的底层也会将它编译成一个Vue的实例

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Hello World</title> <script src="./vue.js"></script> </head> <body> <div id="app"> <div v-on:click="handleClick"> {{message}} </div> <item></item> </div> </body> <script> //组件也是Vue实例 Vue.component('item',{ template:'<div>hello world</div>' }) var vm = new Vue({ //接管的DOM el:'#app', //数据，实例属性，引用的时候便是$data data:{ message:'Derrick' }, //方法 methods:{ handleClick:function(){ alert("hello") } } }) </script> </html>

二、实例生命周期钩子

将el外部的HTML作为template编译：当Vue实例没有template模板的时候，会把el接管部分作为模板来进行渲染将template编译到渲染函数中：当Vue实例有template模板的时候，就会利用template模板去渲染虚拟DOM重新渲染并应用更新：当数据改变时执行 //没有指定template <div id="app"> hello Derri </div> <script> var vm = new Vue({ el:"#app", ... //指定template <div id="app"> </div> <script> var vm = new Vue({ el:"#app", template:"<div> Derri </div>", ... //以上两者渲染效果一样 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Hello Derrick</title> <script src="./vue.js"></script> </head> <body> <div id="app"> </div> </body> <script> //生命周期函数就是Vue实例在某一个时间点会自动执行的函数 var vm = new Vue({ el:"#app", template:"<div> Derri </div>", //自动执行 beforeCreate:function(){ console.log("beforeCreate") }, //自动执行 created:function(){ console.log("created") }, //页面渲染之前，模板和数据相结合准备挂载到页面之前 beforeMount:function(){ console.log("beforeMount"); console.log(this.$el); }, //页面挂载之后 mounted:function(){ console.log("mounted"); console.log(this.$el); }, //当组件销毁的时候才会开始执行，利用vm.$destroy() beforeDestory:function(){ console.log("beforeDestory"); }, destoryed:function(){ console.log("destoryed"); }, //数据改变还没被渲染之前 beforeUpdate:function(){ console.log("beforeUpdate"); }, //数据改变并且渲染之后 updated:function(){ console.log("updated"); } }) </script> </html>

三、Vue模板语法

插值表达式：{{XXX}}v-text：v-text=”XXX“，当我们看到Vue指令跟着一个值的时候，值便不再是字符串而是js表达式，这里v-text是让div里面的inner-text的内容变成name里面数据的内容v-html：v-html=”XXX“，这里v-html是让div里面的inner-html的内容变成name里面数据的内容，与name进行数据绑定 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Hello Derrick</title> <script src="./vue.js"></script> </head> <body> <div id="app"> {{name + ' Jessica'}}  <div v-text="name + ' Jessica'"></div> <div v-html="name"></div> </div> </body> <script> //生命周期函数就是Vue实例在某一个时间点会自动执行的函数 var vm = new Vue({ el:"#app", data:{ name:"Derrick" } }) </script> </html>

四、计算属性，方法和侦听器

4.1 计算属性

computed计算属性，下面的fullName便是计算而来，计算属性具有一定的缓存机制，例如这里的firstName与lastName不改变的话，就不会再次计算，由于age不属于计算范围，所以改变的时候不会再次计算，当改变firstName的时候才会再次计算

4.2 方法

methods方法属性，也可以实现4.1中拼接fullName的功能，但是性能比计算属性较差，因为fullName没有改变的之后依旧需要重新调用方法，没有缓存机制

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Hello Derrick</title> <script src="./vue.js"></script> </head> <body> <div id="app">  {{fullName()}} {{age}} </div> </body> <script> var vm = new Vue({ el:"#app", data:{ firstName:"Derrick", lastName:"Xu", age:28 }, //方法,同样可以实现fullName功能 methods:{ fullName:function(){ return this.firstName+" "+this.lastName } } }) </script> </html>

4.3 侦听器

侦听器，当firstName或者lastName改变的时候重新给fullName赋值，当在控制台改变age的时候是不会调用侦听器

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Hello Derrick</title> <script src="./vue.js"></script> </head> <body> <div id="app">  {{fullName()}} {{age}} </div> </body> <script> var vm = new Vue({ el:"#app", data:{ firstName:"Derrick", lastName:"Xu", fullName:"Derrick Xu", age:28 }, //侦听器，当firstName或者lastName改变的时候重新给fullName赋值 watch:{ firstName:function(){ this.fullName = this.firstName+" "+this.lastName }, lastName:function(){ this.fullName = this.firstName+" "+this.lastName } } }) </script> </html>

4.4 计算属性的getter和setter

computed计算属性，将fullName定义成一个对象，插值表达式去读取fullName的时候会转到fullName的get方法，set方法用于设置属性值，接收外部传递过来的value

当在控制台设置fullName的时候，将接收到的value拆分赋值给firstName跟lastName，由于计算属性具有一定的缓存机制，firstName跟lastName改变了，所以会重新计算fullName

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Hello Derrick</title> <script src="./vue.js"></script> </head> <body> <div id="app"> {{fullName}} </div> </body> <script> var vm = new Vue({ el:"#app", data:{ firstName:"Derrick", lastName:"Xu", }, computed:{ //将fullName写成一个对象 fullName:{ //插值表达式去读取fullName的时候会转到fullName的get方法 get:function(){ return this.firstName+" "+this.lastName; }, //设置属性值，接收外部传递过来的value set:function(value){ //拆分value为数组 var arr = value.split(" "); this.firstName = arr[0]; this.lastName = arr[1]; console.log(value); } } } }) </script> </html>

五、样式绑定

前提说明：点击Hello World变成红色，再次点击变回原色

5.1 class对象绑定：借助class与对象的形式来做样式与数据的绑定

:class="{activated: isActivated}说明div需要有个class，名字为activated，class是否起作用取决于isActivated

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Hello Derrick</title> <script src="./vue.js"></script> <style> .activated{ color:red; } </style> </head> <body> <div id="app">  <div @click="handleDivClick" :class="{activated: isActivated}"> Hello world </div> </div> </body> <script> var vm = new Vue({ el:"#app", data:{ isActivated:false }, methods:{ handleDivClick:function(){ //改变isActivated的值，决定activated class是否显示 this.isActivated = !this.isActivated; } } }) </script> </html>

5.2 class对象绑定：借助class与数组的形式来做样式与数据的绑定

class="[activated]"说明div需要有个class，class取值显示的内容为activated里面的内容

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Hello Derrick</title> <script src="./vue.js"></script> <style> .activated{ color:red; } </style> </head> <body> <div id="app">  <div @click="handleDivClick" :class="[activated]"> Hello world </div> </div> </body> <script> var vm = new Vue({ el:"#app", data:{ activated:"" }, methods:{ handleDivClick:function(){ //将变量设置为activated，所以class的值便会取到这个activated字符串作为class的名字 if(this.activated === "activated"){ this.activated =""; }else{ this.activated = "activated"; } } } }) </script> </html>

5.3 style

:style=“styleObj"使用的是对象，这里说明让div有样式，样式是颜色是红色。:style=”[styleObj]"使用的是数组，说明div的style由数组里面的对象决定

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Hello Derrick</title> <script src="./vue.js"></script> </head> <body> <div id="app">  <div :style="styleObj" @click="handleDivClick"> Hello world </div>  <div :style="[styleObj,{fontSize:'20px'}]" @click="handleDivClick"> Hello world </div> </div> </body> <script> var vm = new Vue({ el:"#app", data:{ //说明让div有样式，样式是颜色是红色 styleObj:{ color:"black" } }, methods:{ handleDivClick:function(){ this.styleObj.color = this.styleObj.color==="black" ? "red" : "black"; } } }) </script> </html>

六、条件渲染

v-if="XXX"后面接的依旧是js表达式，条件软件便是通过v-if结合js表达式返回值去决定一个标签是否显示与存在，v-show类似于v-if，两者都可以控制标签是否显示，但是有区别，当都为false的时候，v-show依旧会渲染到页面上，但是display设置成了none

6.1 v-if与v-show

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Hello Derrick</title> <script src="./vue.js"></script> </head> <body> <div id="app"> <div v-if="show">{{message}}</div> <div v-show="show">{{message}}</div> </div> </body> <script> var vm = new Vue({ el:"#app", data:{ show:false, message:"Hello Derrick" } }) </script> </html>

6.2 v-if的复杂使用

v-if可以与v-else结合一起使用，但是中间不能被其他标签隔开

6.2.1 if-else

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Hello Derrick</title> <script src="./vue.js"></script> </head> <body> <div id="app">  <div v-if="show">{{message1}}</div> <div v-else=>{{message2}}</div> </div> </body> <script> var vm = new Vue({ el:"#app", data:{ show:false, message1:"Hello Derrick", message2:"Hello Jessica" } }) </script> </html>

6.2.2 if-elseif-else

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Hello Derrick</title> <script src="./vue.js"></script> </head> <body> <div id="app"> <div v-if="show === 'a'">This is a</div> <div v-else-if="show === 'b'">This is b</div> <div v-else>This is others</div> </div> </body> <script> var vm = new Vue({ el:"#app", data:{ show:"a" } }) </script> </html>

6.2.3 DOM元素复用问题

一开始show为false，显示的是邮箱名，输入完之后去控制台修改show为true，显示用户名，但是input框没有清空，这是vue会尽量让DOM元素复用，这时候需要给input加入key属性，让vue知道这是唯一的

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Hello Derrick</title> <script src="./vue.js"></script> </head> <body> <div id="app"> <div v-if="show"> 用户名：<input/>  用户名：<input key="username"/> </div> <div v-else> 邮箱名：<input/>  邮箱名：<input key="email"/> </div> </div> </body> <script> var vm = new Vue({ el:"#app", data:{ show:false, } }) </script> </html>

七、列表渲染

7.1 简单的列表渲染

7.1.1 循环item

7.1.2 循环item、index

<body> <div id="app"> <div v-for="(item,index) of list"> {{item}} ---- {{index}} </div> </div> </body> <script> var vm = new Vue({ el:"#app", data:{ list:[ "1", "2", "3", "4" ] } }) </script>

7.2 引入key值，数据模拟数据库

key尽量使用唯一的，但是不建议使用index，一般使用后台数据库返回的id，使用key值可以提高性能，用v-for更新已渲染的元素列表的时候，会使用就地复用的策略。这就是说列表数据修改的时候，他会根据key值去判断某个值是否修改，如果修改了就重新渲染，不然就复用之前的元素

<body> <div id="app"> <div v-for="(item,index) of list" :key="item.id"> {{item.text}} ---- {{index}} </div> </div> </body> <script> var vm = new Vue({ el:"#app", data:{ list:[ { id:"1", text:"hello" }, { id:"2", text:"Derrick" }, { id:"3", text:"Jessica" } ] } }) </script>

7.3 往List添加新数据

不建议使用下标的添加，数据会添加成功，但是页面不会更新数据，vue提供了7个操作列表的方法：pop是删除数据最后一项，push往数组添加一条数据，shift删除数组第一项，unshift往数组第一项增加一些内容，splice用于截取数组，sort对数组进行排序，reverse对数组进行取反

7.3.1 利用下标改变页面不会刷新

7.3.2 splice，从数组第一项开始操作，删除一项，并添加一项

所以7.3.1中的Derrick被删除，从第一项这里添加新的数据

7.3.3 通过改变引用来改变数据

7.4 模板占位符包裹元素循环

template模板占位符可以帮我们包裹元素用于循环，但是它不会被渲染到页面上

<body> <div id="app"> <template v-for="(item,index) of list" :key="item.id"> <div> {{item.text}} ---- {{index}} </div> <span> {{item.text}} </span> </template> </div> </body> <script> var vm = new Vue({ el:"#app", data:{ list:[ { id:"1", text:"hello" }, { id:"2", text:"Derrick" }, { id:"3", text:"Jessica" } ] } }) </script>

7.5 对象循环

7.5.1 普通例子

<body> <div id="app"> <div v-for="(item,key,index) of userInfo"> {{item}}---{{key}}---{{index}} </div> </div> </body> <script> var vm = new Vue({ el:"#app", data:{ userInfo:{ name:"Derrick", age:"22", gender:"male", salary:"student" } } }) </script>

7.5.2 改变对象数据

在控制台改变对象属性值的时候，会实时更新

7.5.3 往对象插入数据

插入属性键值对的时候页面不会实时刷新

7.5.4 改变引用弥补7.5.3问题

八、Vue中set方法

8.1 对象中的set

set方法是Vue全局的方法，同时也是vue的实例方法，利用set方法弥补7.5.3问题

8.2 数据中的set

例子中说明是将第一项的值改为5，将第二项的值改为10

最新回复(0)