vue.js基本语法

Vue.js的指令是以v-开头的
1.v-if:
  v-if是条件渲染指令，它根据表达式的真假来删除和插入元素，它的基本语法如下：
  v-if="expression",expression是一个返回bool值的表达式，表达式可以是一个bool属性，也可以是一个返回bool的运算式。
2.v-show也是条件渲染指令，和v-if指令不同的是，使用v-show指令的元素始终会被渲染到HTML，它只是简单地为元素设置CSS的style属性。
3.v-else指令
  可以用v-else指令为v-if或v-show添加一个“else块”。v-else元素必须立即跟在v-if或v-show元素的后面——否则它不能被识别。
4.v-for指令
  v-for指令基于一个数组渲染一个列表，它和JavaScript的遍历语法相似：
  v-for="item in items",items是一个数组，item是当前被遍历的数组元素。
5.v-bind指令
  v-bind指令可以在其名称后面带一个参数，中间放一个冒号隔开，这个参数通常是HTML元素的特性（attribute），例如：v-bind:class v-bind:argument="expression"
6.v-on指令
  v-on指令用于给监听DOM事件，它的用语法和v-bind是类似的，例如监听<a>元素的点击事件：
7.v-bind和v-on的缩写
  Vue.js为最常用的两个指令v-bind和v-on提供了缩写方式。v-bind指令可以缩写为一个冒号，v-on指令可以缩写为@符号。
8.插值
  文本,数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：
  <span>Message: {{ msg }}</span>
  Mustache 标签将会被替代为对应数据对象上 msg 属性的值。无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新,通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定：<span v-once>这个将不会改变: {{ msg }}</span>
9.原始 HTML
双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令：
  <p>Using mustaches: {{ rawHtml }}</p>
  <p>Using v-html directive: <span v-html="rawHtml"></span></p>
10.修饰符
修饰符 (Modifiers) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：
  <form v-on:submit.prevent="onSubmit">...</form>