vue笔记第1篇---常用指令

插值

功能：用于解析标签体内容
写法：{{message}}，xxx 是 js 表达式，可以直接读取到 data 中的所有区域

阻止vue生成生产提示

Vue.config.productionTip = false;

v-xxx指令

• v-bind // 单向数据绑定：只能由data中的数据流向页面

• 

• v-model // 双向数据绑定：可以由data中的数据流向页面，也可以由页面(用户输入)流向data

• v-on // 绑定事件，注：绑定的事件前不需要再加on
  

• v-for // 循环：遍历数组，对象，字符串
  

• v-if,v-else,v-else-if // 判断
  v-if 做判断，隐藏(是否存在)
  区别：对于元素只是一次可以选择使用v-if(消耗内存),操作次数多v-show(并没有销毁元素)
  在vue2中，v-for优先级比v-if高
  在vue3中，v-if优先级比v-for高
  2. v-if和v-for不能同时使用
  3、同时使用需要在外层嵌套盒子，在外层进行v-if判断，在内层进行v-for循环
  

• v-cloak // 解决初始化慢 而导致页面闪动的情况
  

• v-once // 设置了以后，更改值不会发生改变，优化性能

• v-pre // 设置了以后，会让插值和指令失效

• v-text和v-html // 插值
  1.v-text和v-html
  相同点：都会覆盖文本
  不同点：v-text只读取文本，v-html读取标签
  2.插值添加值：注：不要在用提交时使用v-html,不要在动态渲染时时使用v-html