当前位置：首页 > article >正文

Vue框架1(vue搭建方式1,vue指令,vue实例生命周期)

article 2025/9/2 2:31:37

一.VUE

vue概述(vue.js)

vue是前端JavaScript框架,对JavaScript进行封装,是一套用于构建用户界面的渐进式框架.vue的核心只关注图示层,不仅易上手,还便于与第三方库或既有的项目整合.
vue.js和Angular.js,React.js一起,并称为前端三大主流框架

注意: 在此初步学习的是vue2并不是vue3,vue3属于入门级

vue.js特点

体积小(封装的文件小) 压缩后33k
更高的运行效率,不直接频繁的对网页上的标签进行操作,基于dom技术进行优化
实现数据双向绑定,程序员只关心要操作的数据即可,把数据渲染到标签上交给vue框架处理
生态丰富,学习成本低

vue.js如何实现数据绑定

通过MVVM思想实现数据的双向绑定,让开发者不用再操作dom对象,把更多的精力投入到业务逻辑上.
MVVM是Model-View-ViewModel的缩写.MVVM就是将其中的View的状态和行为抽象化,让我们将视图UI和业务逻辑分开.

二.VUE搭建

方式1:直接用<script>引入

进入vue.js官网https://v2.cn.vuejs.org/

找到安装

将下载得到的文件复制或移入项目中的js目录

在需要使用vue框架的项目中导入js文件<script src="js/vue.js"></script>

三.第一个VUE程序

vue.js的核心是一个允许采用简洁模板语法来声明式地将数据渲染进DOM的系统

导入开发版本的vue.js
创建vue实例对象,设置el属性和data属性
使用简洁的模板语法把数据渲染到页面上

实例:

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><!-- 导入vue.js库 --><script src="js/vue@2.js"></script><!-- 导入一个文件后,下方不能再写一个js文件 --></head><body><!-- {{变量}}必须写在命中标签的内部--><div id="app"><div>{{message}},</div><p>{{a}}</p></div><!-- 以后的Script标签写在标签的后面,先加载网页的内容,再加载js --><script type="text/javascript">/*创建vue对象,把页面指定id的标签与vue对象进行绑定 el是vue对象中的属性,可以选择#id,或.类,建议使用id选择器el命中标签不能是bodydata属性中定义使用的数据 键:值 键值对之间需要使用","隔开最后一个键值对后不添加","正常数据都要定义在data中{{变量名}} 插值表达式,获取到data中定义的数据*/let app = new Vue({el:"#app",data:{a:"abc",message:"hello vue"}});</script></body>
</html>

示例代码解析:

{{变量}},插值表达式用于获取data数据

new Vue();创建Vue对象(VM对象)

el:数据挂载的dom对象

Vue会管理el选项命中的元素及其内部的后代元素

可以使用其他的选择器,但是建议使用ID选择器

可以使用其他的闭合标签,不能使用HTML和BODY

data:{message:'hello world'} model数据

Vue中用到的数据定义在data中

data中可以写复杂类型的数据,如对象,数组

四.VUE指令

VUE指令是指带有v-开头,以代表它们是VUE提供的特殊属性.

插值表达式{{message}}

{{message}} 插值表达式不会覆盖标签体中的内容,只是在标签内部插入一个值,在标签中有值得情况也可以添加插值表达式,不会影响原本数据的显示

示例:

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script src="js/vue@2.js"></script></head><body><!-- {{变量}}必须写在命中标签的内部--><div id="app"><div>{{message}}不影响比标签中的其他内容</div><p>{{a}}</p></div><script type="text/javascript">/* {{变量名}} 插值表达式,获取到data中定义的数据*/let app = new Vue({el:"#app",data:{a:"abc",message:"hello vue"}});</script></body>
</html>

效果演示:

v-text指令

该指令的作用是设置标签的文本内容,此写法会替换标签中的全部内容

内部支持写插值表达式
<p v-text="message">被替换的内容</p>

示例:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="js/vue@2.js"></script></head><body><div id="app"><div v-text="Message1">这是一段被替代的话</div></div><script type="text/javascript">let app = new Vue({el:"#app",data:{Message1:"v-text指令会替代标签中的内容"}});</script></body>
</html>

使用v-text前效果:

使用后的效果:

v-html指令

该指令的作用是设置元素的innerHTML,变量中的内容中存在html结构会被解析为标签

示例:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="js/vue@2.js"></script></head><body><div id="app"><div v-html="Message2">这是一段被替代的话</div></div><script type="text/javascript">let app = new Vue({el:"#app",data:{Message2:"<b>这是一段被加粗的文字</b>"}});</script></body>
</html>

效果演示:

插值表达式,v-html,v-text的区别

{{message}} 插值表达式不会覆盖标签体中的内容,只是在标签内部插入一个值
v-html与v-text 会用数据覆盖标签体中的内容

v-html与v-text的区别:
v-html:能解析字符串中的标签
v-text:不能解析字符串中的标签

v-on指令

该指令的作用是为元素绑定事件,事件名不需要写on指令可以简写为@

绑定方法定义在methods属性中,可以传入自定义参数
<input type="button" value="按钮" v-on:click="text(1,2)"/>向方法中传入参数的用法
<input type="button" value="按钮" @click="text"/>简写且不传入参数的写法

示例:

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><!-- 导入vue.js库 --><script src="js/vue@2.js"></script></head><body><div id="app"><!-- 添加事件的两种方式v-on:click 点击事件@click--><input type="button" value="按钮1" v-on:click="test1()"/><input type="button" value="按钮2" @click="test2(1)"/></div><script type="text/javascript">let app = new Vue({el:"#app",data:{message:"hello vue",},methods:{test1(){//this表示vue对象alert(this.message);},test2(a){//传参alert(a);}}});</script></body>
</html>

注意: 在methods属性中添加函数时不需要使用function关键字,且在函数中使用在data中定义好的变量或methods属性中定义的其他方法时,需要使用this关键字

v-model指令

该指令的作用是便捷的设置和获取表单元素的值,绑定的数据会和表单元素值相关联
绑定的数据<---->表单元素的值双向数据绑定

示例:

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><!-- 导入vue.js库 --><script src="js/vue@2.js"></script></head><body><div id="app"><p><!--还可以使用v-text-->{{name}}</p><!-- v-model可以将输入标签中的值(value)  绑定到指定的属性上 (这里通过vue框架将文本输入框的值,变量name,p标签中的内容插值表达式绑定)--><input type="text" value="" v-model="name"/><input type="button" value="测试" @click="test3"/></div><script type="text/javascript">let app = new Vue({el:"#app",data:{name:""},methods:{test3(){//改变name变量的值this.name = "jim";}}});</script></body>
</html>

在此案例中通过v-model指令将输入框的value属性,变量name的值,p标签的值相互绑定,只要name变量的值发生改变其他两个标签的值也会发生改变

v-show指令

该指令的作用是根据布尔值显示或隐藏当前标签,原理是修改元素的display,实现显示隐藏,指令后面的内容,最终都会解析为布尔值,值为true元素显示,值为false元素隐藏,数据改变后,对应元素的显示状态会同步更新

示例:

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script src="js/vue@2.js"></script></head><body><div id="app"><!-- v-show="布尔值" 根据布尔值显示或隐藏当前标签通过display的值控制标签显示或隐藏,每次不需要重新创建标签,效率高--><div v-show="isshow">123</div><div v-show="a>5">456</div></div><script type="text/javascript">let app = new Vue({el:"#app",data:{isshow:false,a:10}});</script></body>
</html>

在此案例中,v-show="false"时,标签会显示,通过改变标签的dispaly属性来实现标签的隐藏,由于a变量的值为10,a>5最终也会被解析为布尔值true.

v-if与v-else指令

v-if指令的作用是根据表达式的真假切换元素的显示状态,本质是通过操纵dom元素来切换,显示状态表达式的值为true,元素存在于dom中,为false,从dom中移除.频繁的切换使用v-show,反之使用v-if,前者的切换消耗更小

v-if和v-else标签必须挨着满足则显示if标签内容,否则显示else内容

示例:

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script src="js/vue@2.js"></script></head><body><div id="app"><!-- v-if="布尔值" 根据布尔值显示或隐藏当前标签每次从网页中要删除/创建标签,数量多了效率低v-if 和 v-else标签必须挨着满足则显示if标签内容,否则显示else内容--><div v-if="isshow">789</div><div v-if="a>5">101</div><div v-else>aaa</div></div><script type="text/javascript">let app = new Vue({el:"#app",data:{isshow:true,a:4}});</script></body>
</html>

注意: v-else需要紧挨着v-if使用,当v-if="false"时显示v-else指令的标签

v-show与v-if的区别

v-show标签是通过display属性来实现显示或隐藏标签
而v-if标签每次都要从网页中删除/创建标签,数量多了效率太低.

在频繁的切换标签隐藏或显示,v-show标签相比于v-if标签效率更高.
但v-if标签可以搭配v-else标签使用,实现通过逻辑控制标签的隐藏与消失.

v-bind指令

该指令的作用是为元素绑定属性,完整写法是 v-bind:属性名

简写的话可以直接省略v-bind,只保留: 属性名

示例1:

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script src="js/vue@2.js"></script></head><body><div id="app"><!-- <img src="imgsrc"/> 错误写法,不能将data中的属性填充到普通标签属性中--><!-- <img v-bind:src="imgsrc"/> 通过v-bind对标签的属性进行操作--><!-- 简单写法 --><img :src="imgsrc" :title="title"/><input type="button" value="下一张" @click="next"/></div><script type="text/javascript">let app = new Vue({el:"#app",data:{imgsrc:"img/图片1.png",title:"第一张图片"},methods:{next(){this.imgsrc = "img/图片2.png";this.title = "第二张图片";}}});</script></body>
</html>

在此案例中,通过v-bind指令对图片的src以及title属性进行操作,并通过v-on指令为按钮添加了点击事件实现了图片的属性切换.这里使用的v-bind指令采用的简单写法, 直接省略v-bind,只保留: 属性名

我们还可以传给v-bind:class一个对象,以动态地切换class:

示例2:

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style>.active{color: red;}</style><script src="js/vue@2.js"></script></head><body><div id="app"><!-- 通过isActive控制是否为标签添加指定的类名 active是类名--><div v-bind:class="{active:isActive}">状态</div><!--为按钮添加点击事件,实现点击按钮改变标签样式的功能--><input type="button" @click="next"/></div><script type="text/javascript">let app = new Vue({el:"#app",data:{isActive:false//控制是否添加样式表},methods:{next(){//使用this关键字调用data中定义的变量this.isActive="true";}}});</script></body>
</html>

在此案例中,需要注意v-bind:class="{active:isActive}" 其中active是标签的类名,isActive是data键值对中定义的变量名,通过改变变量的布尔值,实现此标签样式的存在或消失

v-for指令

该指令的作用是根据数据生成列表结构,数组经常和v-for结合,其语法是 (item,index) in 数据
item和index可以结合其他指令一起使用,数组长度的更新会同步到页面上是响应式的
为循环绑定一个Key值 :Key="值" 尽可能唯一

示例1:通过v-for指令循环遍历数据到列表项中

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script src="js/vue@2.js"></script></head><body><!-- 5点18 --><div id="app"><!-- 使用v-for指令循环遍历数据到列表项中,在列表项内容中添加插值表达式,p指的是数组中的一个字符串数据--><ul><!--不添加数组索引的写法--><!-- <li v-for="p in provinces">{{p}}</li> --><!--添加数组索引的写法,在循环时为它添加序号--><li v-for="(p,index) in provinces">{{index+1}}{{p}}</li></ul></div><script type="text/javascript">let app = new Vue({el:"#app",data:{//模拟从服务器后端响应回来的数据,在前端把后端响应的数据动态的响应在网页上provinces:['北京','天津','上海']//字符串类型数组}});</script></body>
</html>

在此案例中,通过v-for指令将字符串类型数组provinces的数据循环遍历在列表项中,并添加了数组的索引值,由于数组的索引值是从零开始的,我们在插值表达式中为索引值加1,实现添加的数字序号从1开始.
v-for="(p,index) in provinces" 其中p为字符串数组中的一个字符串数据,这里的用法与增强for循环遍历数据类似

示例2:表格使用v-for遍历数据

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script src="js/vue@2.js"></script></head><body><div id="app"><table border="1"><tr><td>序号</td><td>学号</td><td>姓名</td><td>性别</td></tr><tr v-for="(student,index) in students"><td>{{index}}</td><td>{{student.id}}</td><td>{{student.name}}</td><td>{{student.gender}}</td></tr></table></div><script type="text/javascript">let app = new Vue({el:"#app",data:{//对象类型数组students:[{id:101,name:'jim',gender:'男'},{id:102,name:'tom',gender:'男'},{id:103,name:'jery',gender:'女'}]}});</script></body>
</html>

在此案例中,data中定义的数据类型是students对象类型的数组,每一个大括号代表一个对象,其中的id,name,gender等是该对象的属性.
注意: v-for指令应当写在行标签中,将插值表达式写在列标签中,在插值表达式中通过student.id来获取students对象类型数组中一个对象student的属性id值.

五.VUE 实例生命周期

每个Vue 实例在被创建时都要经过一系列的初始化过程-例如,需要设置数据监听,编译模板,将实例挂载到DOM 并在数据变化实更新DOM 等.同时,在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己代码的机会.

下面图示表示不同的生命周期钩子函数的所处位置:

用户通过这八个生命周期函数,实现在不同的阶段添加代码,实现代码功能

示例:

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script src="js/vue@2.js"></script></head><body> <div id="app"> </div><script type="text/javascript">/* vue对象生命周期*/let app = new Vue({el:"#app",//vue对象绑定标签data:{},methods:{//自定义函数},//vue对象生命周期钩子函数beforeCreate(){//vue对象创建之前执行console.log("beforeCreate")},created(){//在vue对象创建后执行console.log("created")},beforeMount(){//这个是vue对象与标签绑定前执行,这里的绑定指el绑定console.log("beforeMount")},mounted(){//这个是vue对象与标签绑定后执行,这是我们后面需要的,在网页打开后,自动执行某些操作//如自定义的向后端发送请求加载数据console.log("mounted")}});</script></body>
</html>

在此案例中使用了四个生命周期钩子函数,在不同的阶段执行了代码中的功能,代码中注释了这四个函数在不同的阶段执行.