vue基础知识总结（一）

MVVM

M数据模型 V视图模型 VM同步Model和View的对象

插值表达式 {{}}

可以写简单的表达式，方法，以及三元表达式

v- 指令

1. v-text
2. v-html
3. v-bind:(绑定属性简写’:’)
- 绑定属性可以拼接参数 :href=“‘del.php?id=’+id”
- 绑定类名 :class=”{‘类名’:布尔值(或定义一个变量)}”
4. v-for (也可以用 of 代替 in)
- v-for渲染数组 v-for=”item in arr” || v-for=”(item, index) in arr”
- v-for渲染对象 v-for=”value in obj” || v-for=”(value, key, index) in obj”
- v-for迭代数字 v-for=”item in 10”

使用v-for渲染数组和对象

v-for能够根据data中数据的变化自动刷新视图

注意，以下两种情况不会触发视图更新

1. 当使用数组的length属性去改变数组的时候，不会触发视图更新
2. 使用数组下标的方式去改变数组的时候，也不会触发视图更新

解决上述问题：

• 使用Vue.set(arr, index, newVal) arr是需要改变的数组，index是数组里面的项， newVal是改变后的值
• Array.prototype.splice()
  

  注意 v-for必须结合key属性来使用，它会唯一标识数组中的每一项，未来当数组中的那一项改变的时候，它会只更新那一项，好处就是提升性能。注意key的值唯一，不能重复

5. v-model指令用来双向数据绑定：就是model和view中的值进行同步变化

注意v-model只能在input,textarea,selet标签使用

6. v-on 事件绑定

• 简写@click=”xxx(参数)”
• 通过 $event(固定值,不加引号)传递时间对象

事件修饰符

• .stop 阻止冒泡
• .prevent 阻止浏览器默认行为
• .once 只触发一次事件
• .capture 实现事件捕获触发事件
• .self 事件在该元素本身（而不是子元素）触发时触发回调

按键修饰符

• v-on:keyup.enter=”fn”

7. v-if 和 v-show 控制元素的 显示隐藏

• v-if通过控制dom控制元素显示隐藏
• v-show通过控制样式display:none控制元素显示隐藏 不支持语法

使用场景

• 涉及大量dom操作，使用v-show
• 设涉及到异步数据渲染，使用v-if

8. v-cloak 解决插值表达式闪烁问题。当vue实例结束编译 v-cloak会自动消失