vue常用指令

介绍

vue是以数据驱动和组件化开发为核心的前端框架，可以快速搭建前端应用

常用指令

指令：页面+数据的操作（以数据去驱动DOM）

<div v-xxx=""></div>

• v-if：做元素的插入（append）和删除（remove）操作（隐藏时不可见）
  • v-else-if：条件判断与if同级
  • v-else：以上条件都不满足时执行
• v-for：遍历数组等对象
  • 数组：(item,index)
  • 对象：(vlaue,key,index)（值前键后）
• v-show：display:none 和display:block的切换（隐藏时可见）
• v-text：在HTML标签中插入文本，不可解析html标签
• v-html：在html标签中插入html元素，可以解析html标签

数据流和事件绑定

• v-bind:属性='变量名'：单向数据流绑定

  • 缩写：:属性
  • 内存改变影响页面改变
  • v-bind就是对属性的简单赋值，当内存中值改变，还是会触发重新渲染

  <input type='text' v-bind:value='msg' :class='msg'>
  

• v-model='变量名'：双向数据流绑定

  • 页面对于input的value改变，能影响内存中msg变量
  • 内存js改变msg的值，会影响页面重新渲染最新值

  <h3>双向数据绑定v-model</h3>
  <input type='text' :class='msg' v-model='msg'>
  

• v-on:事件名='方法名'：事件绑定

  • 缩写：@事件名='方法名'

  <h3>事件绑定v-on</h3>
  <button v-on:click='changeMsg()'>改变数据</button>
  changeMsg(){···
  }