vue一些知识点总结
指令
v-text 设置元素的innerText
v-text和插值语法的区别：v-text更新部分文本，innerText更新全部文本
v-html 设置元素的innerHTML
v-text和v-html的区别 v-html能识别html标签，v-text不能识别html标签（类比innerHTML和innerTEXT
v-on 给元素绑定事件 可简写为@
<button v-on:click="doClick">按钮</button>
<button @click="doClick">按钮</button>
事件简单，可以写在行内，事件复杂，写在vue实例的methods
默认情况下，vue数据只能用到vue语法，只要使用了v-bind指令，就可以使用vue的数据
事件修饰符
<button @click.prevent="doCommit">提交</button>
enter：输入框按下enter键
prevent：阻止默认跳转，表单提交
stop：阻止事件冒泡
事件方法的this指向
原生dom的this指向--事件源
vue事件方法的this指向--vue实际对象
vue会被data和methods的成员平铺到vue实例数据，直接this.数据/方法
事件参数
每个事件都有一个默认形参，代表事件对象
默认情况下，如果事件方法传递了参数，就会覆盖原先默认的事件对象e
解决方案 使用$event
<button @click="doDelete(id,$event)"></button>
v-bind 让原生属性（src、alt、value等）使用vue的值
简洁写法： ：属性名=“属性值”
<img v-bind:src="obj.url" v-bind:title="obj.title" >
样式绑定 ：class={类名1：布尔值，类名2：布尔值} （如果类名有 - ，需要加引号
<div :class="{greenBorder:flag, 'red-box':flag }"></div> <!-- flag值为布尔值-->
v-for 列表渲染
<li v-for="(item,index) in list">{{item}}</li>
这个指令写在哪个标签里，就会重复生成谁
v-for更新检测
数组的方法
- 会改变原数组的元素值：reverse/pop/push
- 不会改变原数组的元素值：slice/filter/concat
v-for更新，可以选择覆盖整个数组，或使用vue$set强制更新
v-model 与表单元素双向绑定
表单的value值变化，vue实例data中的数据也会变化
data中的数据变化，表单的数据也会变化
v-model只能用于表单元素，v-model的值需要在data中声明
v-model修饰符
lazy：只在失去焦点和enter键的时候，才会修改data
number：自动把输入框内容转为数字（能转就转，不能转就不转
trim：取出字符串首尾空格
绑定其他表单
默认情况下，v-model绑定的都是value属性（多选框checkbox
checkbox绑定的值
- 数组类型：绑定value
- 非数组类型：绑定checked
<!-- 数组类型小案例 -->
<!-- HTML结构 -->
<div id="app">
<ul>
<li v-for="(item,index) in list">
<input type="checkbox" v-model="item.select"> <label for="">{{ item.name }}</label>
</li>
</ul>
</div>
<script>
/* 创建vue实例 */
var app = new Vue({
//el:挂载点
el: '#app',
//data: 要渲染的数据
data: {
list: [
{ name: '前端', select: false },
{ name: 'UI', select: true },
{ name: 'Java', select: false }
]
},
})
</script>
v-if 条件判断
- 单分支 v-if=“条件”
- 双分支v-else
- 多分支 v-else-if=“条件”
v-show 修改css属性display
v-show与v-if区别
v-if条件渲染，不满足条件元素不会添加到DOM树
v-show一定会添加到DOM树，修改css样式display属性实现效果
computed计算属性
解决数据渲染，代码冗余，适用数据需要经过计算的场合
语法：（）{} 函数写法，只有get方法
computed:{
computed属性名(){
return this.msg.split('').reverse().join('')
}
}
{}对象写法，有get和set方法
computed:{
computed属性名: {
get(){
},
set(val){
}
}
}
watch侦听器
需要实时监听一个数据变化
在vue实例对象中声明侦听器语法
watch:{
侦听的数据名(newVal,oldVal){
}
}
普通侦听：只能侦听值类型，不能侦听引用类型
深度侦听 侦听引用类型内部数据变化
watch: {
侦听的数据名: {
deep: true,
handler(newVal, oldVal) {
}
}
}
特殊属性key
（背景）vue底层原理：
虚拟DOM：
- 实质是对象，与真实对象相比，属性少
- diff算法作用，对比新旧Node，找出不同的地方，为了提高渲染技能，只替换不同的地方
vue会用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法
key的作用：给元素添加一个唯一标识符，让vue算法准确识别元素，强制更新DOM
应用：v-if：切换盒子的时候，如果连个盒子的dom结构相同，vue默认不更新
v-for（一般需要加key值）
key值为数组下标时，数组原地更新，会影响到后面的元素
key值为数组中的id属性，元素之间互不影响
有id属性就用id，没有用数组下标
\
