<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统
通用模式

var vm = new Vue({
  // 选项
})

1.v-once

只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

<!-- 渲染一次  -->
<div v-once>{{ mes }}</div>

2.v-text

更新元素的 textContent。如果要更新部分的 textContent ，需要使用 {{ Mustache }} 插值。

<span v-text="msg"></span>
<!-- 和下面的一样 -->
<span>{{msg}}</span>
<div v-html="html"></div>

3.v-html

更新元素的 innerHTML 。注意：内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译 。

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

4.v-show 、v-if

v-show:根据表达式之真假值，切换元素的 display CSS 属性。

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

v-if：直接操作DOM对象，会更加消耗性能

<div v-if="Math.random() > 0.5">
  Now you see me
</div>

当频繁的显示隐藏时可以使用 v-show，从而节约性能。

5.v-else、v-else-if

v-else：限制：前一兄弟元素必须有 v-if 或 v-else-if，可以不需要有表达式。

<div v-if="Math.random() > 0.5">
  Now you see me
</div>
<div v-else>
  Now you don't
</div>

v-else-if：前一兄弟元素必须有 v-if 或 v-else-if， 可以与v-if、v-else链式使用。

<div v-if="type === 'A'"> A </div>
<div v-else-if="type === 'B'"> B </div>
<div v-else-if="type === 'C'"> C </div>
<div v-else>
  Not A/B/C
</div>

6.v-for

基于源数据多次渲染元素或模板块。此指令之值，必须使用特定语法alias in expression，v-for的优先级别还要大于v-if在同时使用的时候。

//可以为数组索引指定别名 (或者用于对象的键)：
<div v-for="(item, index) in items"> {{ 数值，下标 }}</div>
<div v-for="(val, key) in object">{{ 数值，下标 }}</div>
<div v-for="(val, name, index) in object">{{ 数值，下标 , 下标}}</div>

7.v-on

缩写：@
绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。

用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。

在监听原生 DOM 事件时，方法以事件为唯一的参数。如果使用内联语句，语句可以访问一个 $event 属性：v-on:click="handle('ok', $event)"。
修饰符：

• .stop - 调用 event.stopPropagation() 阻止冒泡到父元素。
• .prevent - 调用 event.preventDefault() 消除元素默认的动作。
• .capture - 添加事件侦听器时使用 capture 模式。
• .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
• .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
• .native - 监听组件根元素的原生事件。
• .once - 只触发一次回调。
• .left- (2.2.0) 只当点击鼠标左键时触发。
• .right - (2.2.0) 只当点击鼠标右键时触发。
• .middle - (2.2.0) 只当点击鼠标中键时触发。
• .passive - (2.3.0) 以 { passive: true } 模式添加侦听器

<!-- 方法处理器 -->
<button v-on:click="doThis"></button>

<!-- 动态事件 (2.6.0+) -->
<button v-on:[event]="doThis"></button>

<!-- 内联语句 -->
<button @click="jian(1,2,$event)"></button>

//在methods 的方法中可以声明一个函数，通过event.targer.属性值进行调用查看
jian: function (q, w, event) { //直接函数命名默认第一个参数时event，多参事件名放在后面
  console.log(q, w, event.target.innerHTML);
  
<!-- 缩写 -->
<button @click="doThis"></button>

<!-- 动态事件缩写 (2.6.0+) -->
<button @[event]="doThis"></button>

<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>

<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>

<!-- 阻止默认行为，没有表达式 -->
<form @submit.prevent></form>

<!--  串联修饰符 -->
<button @click.stop.prevent="doThis"></button>

<!-- 键修饰符，键别名 -->
<input @keyup.enter="onEnter">

<!-- 键修饰符，键代码 -->
<input @keyup.13="onEnter">

<!-- 点击回调只会触发一次 -->
<button v-on:click.once="doThis"></button>

<!-- 对象语法 (2.4.0+) -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>

8.v-bind

缩写：：
动态地绑定一个或多个特性，或一个组件 prop 到表达式。可以修改DOM对象的属性。

• .prop - 作为一个 DOM property 绑定而不是作为 attribute 绑定。(差别在哪里？)
• .camel - (2.1.0+) 将 kebab-case 特性名转换为 camelCase. (从 2.1.0 开始支持)
• .sync (2.3.0+) 语法糖，会扩展成一个更新父组件绑定值的 v-on 侦听器。

<!-- 绑定一个属性 -->
<img v-bind:src="imageSrc">
data:{ imageSrc : 'http://sanyetongsj.oss-cn-shanghai.aliyuncs.com/system/root/jinze/vue.jpg'}

<!-- 动态特性名 (2.6.0+) -->
<button v-bind:[key]="value"></button>

<!-- 缩写 -->
<img :src="imageSrc">

<!-- 动态特性名缩写 (2.6.0+) -->
<button :[key]="value"></button>

<!-- 内联字符串拼接 -->
<img :src="'/path/to/images/' + fileName">

<!-- class 绑定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]">

<!-- style 绑定 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>

<!-- 绑定一个有属性的对象 -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

<!-- 通过 prop 修饰符绑定 DOM 属性 -->
<div v-bind:text-content.prop="text"></div>

<!-- prop 绑定。“prop”必须在 my-component 中声明。-->
<my-component :prop="someThing"></my-component>

<!-- 通过 $props 将父组件的 props 一起传给子组件 -->
<child-component v-bind="$props"></child-component>

<!-- XLink -->
<svg><a :xlink:special="foo"></a></svg>

9.v-model

在表单控件或者组件上创建双向绑定
在下面属性可有效

<input>
<select>
<textarea>

修饰符：

• .lazy - 取代 input 监听 change 事件
• .number - 输入字符串转为有效的数字
• .trim - 输入首尾空格过滤

<input type="text" v-model.number="numb">
<input type="text" v-model.trim="spanc">
<input type="text" v-model.number="change">

10.v-block

这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

<style>
[v-cloak] {
  display: none;
}
</style>
<div v-cloak>
  {{ message }}
</div>