在这里插入代码片
前言
一、vue常用的指令?
常用指令
在vue中提供了一些对于页面 + 数据的更为方便的输出,这些操作就叫做指令,指令中封装了一些DOM行为, 结合属性作为一个暗号, 暗号有对应的值,根据不同的值,框架会进行相关DOM操作的绑定。
vue中的指令有很多,我们平时做项目常用的有:
v-text 解析文本 v-html 解析html标签 v-if:是动态的向DOM树中添加或者删除元素;
v-else是搭配v-if使用的,它必须紧跟在v-if或者v-else-if后面,否则不起作用
v-show:是通过标签的CSS样式display的值是不是none,控制显示隐藏 区别: 1、当条件为真的时候 没有区别 当条件为假的时候
v-if通过创建或删除DOM节点来实现元素的显示隐藏,v-show通过css中的display属性来控制
2、v-if更适合数据的筛选和初始渲染 v-show更适合元素的切换 v-for:
v-for是根据遍历数】;据来进行渲染,要配合key使用。要注意的是当v-for和v-if同处于一个节点时,v-for的优先级比v-if更高。这意味着v-if将运行在每个v-for循环中
v-on:用来绑定一个事件或者方法,简写方式是@click="" v-bind:
v-bind用来动态的绑定一个或者多个属性。没有参数时,可以绑定到一个包含键值的对象。常用于动态绑定class和style。以及href等。简写的方式是“:属性名=""”一个冒号
v-model 只能适用于在表单元素上,可以实现数据双向绑定 ,
二、v-if和v-show的区别
1.相同点
都可以控制dom元素的显示和隐藏
2.不同点
1.区别:
v-if: 控制DOM元素的显示隐藏是将DOM元素整个添加或删除;
v-show: 控制DOM 的显示隐藏是为DOM元素添加css的样式display,设置none或者是block,DOM元素是还存在的
2.性能对比
v-if有更高的切换消耗; v-show有更高的初始渲染消耗
3.编译条件
v-if是惰性的,如果初始条件为假,则什么也不做;只有在条件第一次变为真时才开始局部编译(编译被缓存?编译被缓存后,然后再切换的时候进行局部卸载);
v-show 是在任何条件下(首次条件是否为真)都被编译,然后被缓存,而且 DOM 元素保留;
4.使用场景
v-if适合运营条件不大可能改变的场景下;
v-show适合频繁切换;
三、vue的生命周期?
生命周期让我们在控制整个vue时更容易形成更好的逻辑,可以分为四个阶段:创建阶段,挂载阶段,更新阶段,销毁阶段
分别有:
创建前:beforeCreate() 只有一些实例本身的事件和生命周期函数
创建后:Created() 是最早使用data和methods中数据的钩子函数 开始创建组件之前,创建的是data和method
挂载前:beforeMount() 指令已经解析完毕,内存中已经生成dom树
挂载后:Mounted() dom渲染完毕页面和内存的数据已经同步
更新前:beforeUptate()当data的数据发生改变会执行这个钩子,内存中的数据是新。的,页面是旧的
更新后:Updated() 内存和页面都是新的
销毁前:beforeDestroy() 即将销毁data和methods中的数据此时还是可以使用的,可以做一些释放内存的操作
销毁后:Destroyed() 已经销毁完毕
下边有图片可以参考理解: