Vue指令以及Vue修饰符

一丶vue指令

条件渲染
v-if 不频繁 直接创建销毁
v-show 频繁切换选择 隐藏 不支持template

文本渲染
v-html 解析html标签 xss攻击(脚本攻击) innerhtml
v-text 不解析 innertext
v-once 只渲染一次 进行缓存
v-for 循环战术 v-for="(item, index) in或者for(es6) obj"
:key=“index+id”
eg: 在vue虚拟dom渲染 如果结构一样 只会改变里面的内容 结构不变 所以需要key去绑定不一样的dom

v-on:input v-bind:value 实现数据双向绑定
v-model 相当于

文本输入框切换 列子

vue内置标签
包括没有语义 不会渲染

<select v-model="selectValue">
 	<option value="0" disabled>请选择</option>
	<option v-for="(item,index) in obj" :key="item.id" :value="item.id">{{item}}</option>
</select>

二丶事件修饰符

v-model.number 输入框中的字符串转成数字

v-model.trim 去掉前后的空格

时间修饰符可以连续使用 v-model.number.trim

三丶键盘事件

v-on:keyup @keyup

四丶样式绑定

class 追加类不回覆盖前面的 :class="{b:ture}" :class="[{b:true}, ‘c’, className]"
style :style="{color:’#fff’}"

五丶属性

方法属性
methods 没有缓存 data更新 方法重新执行

计算属性
底层也是使用的Object.defineProperty() get set
computed 有缓存 只要依赖的的数据没有改变 就不会重新执行

监听属性
watch 里面可以执行异步代码

watch:{
liu(newValue,oldValue){}
}

六丶生命周期

beforeCreate 页面组件加载之间可以使用加载动画效果 获取不到数据
craeted 可以获取数据 可以发送axios请求

beforeMount 第一次渲染函数之前 渲染前
mounted 页面渲染已经完毕 获取真实dom 可以发送axios请求

beforeUpdate 数据更新前
update 数据更新后 不要这里修改数据 会造成死循环

beforeDestory 实例销毁前
destoryed 实例销毁后 实力上方法 监听都被销毁

vm.$destory 强制销毁