条件渲染
<input type="text" v-model="score">
<h2 v-if="score > 90">优秀</h2>
<h2 v-else-if="score > 60">良好</h2>
<h2 v-else>不及格</h2>
v-show和v-if区别
- v-show在不显示的时候也会渲染元素，只不过在样式上设置display:none,v-if为false是不渲染元素
- v-show不能和template使用
- 在开发中要频繁进行显示隐藏操作时，用v-show，因为不会进行频繁的dom操作，否则使用v-if
列表渲染
<!-- 遍历数组 -->
<ul>
<li v-for="(m,index) in movies">{{index + 1}}.{{m}}</li>
</ul>
<!-- 遍历对象 -->
<ul>
<li v-for="(value, key, index) in info">{{value}}-{{key}}-{{index}}</li>
</ul>
<!-- 遍历数字 -->
<ul>
<li v-for="(num, index) in 10">{{num}}-{{index +1}}</li>
</ul>
数据结构
movies: [
'色戒',
'飞驰人生',
'热辣滚烫',
'大话西游'
],
info: {
name: 'xiaolin',
age: 18,
school: 'bighongying'
}
vue将被侦听的数组的变更方法进行包裹，所以他们也会触发视图更新。包括
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
上面的方法会直接修改原来的数组，但是某些方法不会替换原来的数组，而是会生成新的数组，比如
filter()
concat()
slice()
v-for中的key是什么作用
认识v-node
vnode全称是virtual Node,也就是虚拟节点，可以理解为html创建出来的VNode。VNode本质是一个javascript对象。对于一个真实node来说
<div class="title" style="font-size: 30px;color: red;">哈哈哈</div>
在vue中的VNode为
const vnode = {
type: "div",
prors: {
class: "title";
style: {
"font-size": "30px",
color: "red";
},
},
children: "哈哈哈"
}
vue会将template->VNode->真实dom，好处是可以做多平台的渲染。 如果我们不只是一个简单的div,而是有一大堆元素，那么它们会形成一个VNode tree,对于
<div>
<p>
<i>哈哈哈哈</i>
<i>哈哈哈哈</i>
</p>
<span>嘻嘻嘻嘻嘻</span>
<strong>呵呵呵呵</strong>
</div>
他的VNode Tree为
加key的好处
对于有key和无key,vue会执行两种不同的算法，对于无key，会执行patchunkeyedchildren方法，此时的diff算法。从头开始对比元素，不同的替换掉，多出的移除或者添加。 如果有key的话，vue内部执行patchKeyedChildren方法。 从头开始遍历比较节点，找到不同之后。再从后往前遍历节点。此时增加新节点或者删除旧节点。
key官方解释
- key主要用于虚拟dom,在新旧nodes对比时辨识VNodes
- 如果不使用key，vue会尽可能地修改复用相同类型元素的算法
- 使用key，会基于key的变化重新排列元素顺序，并且移除、销毁key不存在的元素
vue基本语法
计算属性computed
计算属性将被混入组件实例中。所有getter和setter的this上下文自动地绑定为组件实例。 计算属性完整写法
fullName: {
get: function() {
return this.firstName + " " + this.lastName;
},
set: function(newVal) {
console.log(newVal);
}
},
如果直接写一个函数则默认只执行get方法。
计算属性优点
- 计算属性会基于依赖关系进行缓存；
- 在数据不发生变化时，计算属性是不需要重新计算的
- 如果依赖的数据发生变化，在使用时，计算属性依然会重新进行计算
侦听器watch
什么是侦听器？ 开发中我们在data返回对象中定义了数据，这个数据通过插值语法等方式绑定到template中，当数据发生变化时，template会自动进行更新来显示最新的数据，但是在某些情况下，我们希望代码逻辑中监听某个数据的变化，这个时候就用watch来完成。
watch: {
question(newVal,oldVal) {
console.log("新值：",newVal,"旧值:",oldVal);
}
}
监听对象可以使用两种方式。第一种
csn: {
handler(newVal,oldVal) {
console.log(`the newVal is ${newVal.title}`);
},
deep: true，
immediate: true //可选
}
监听整个对象，性能开销比较大，获得的newVal是一整个对象 第二种有时只想关心里面的特定属性
'csn.title'(newVal,oldVal) {
console.log("newVal:",newVal);
},
利用字符串写法。
