``` //方法 methods：{ functionName(){ //逻辑代码 } } ``` ``` {{ ok ? 'YES' : 'NO' }} 三元运算 <button @click="functionName()">点击事件</button> 绑定事件用@ <div :class=''whichColor">切换背景色</div> 带:的属性，可以在data中定义成变量 ``` #### 指令 指令 (Directives) 是带有`v-`前缀的特殊 attribute。 * `v-if`指令将根据表达式属性的值的真假来 插入/移除元素。 * `v-bind`指令可以用于响应式地更新 HTML attribute： * `v-on`指令，它用于监听 DOM 事件 * `v-show`指令将根据表达式属性的值的真假来 添加/删除元素 * `v-for` 遍历数组 > v-show是节点已经创建好，添加了隐藏属性，v-if是直接添加节点和删除节点 >  #### 缩写 v-bind:src=:src v-on:cllick=@click #### 1. 插值语法（双大括号表达式） 1\. 功能: 用于解析标签体内容 2\. 语法: {{xxx}} ，xxxx 会作为 js 表达式解析 #### #### 2. 指令（以 v-开头） 1\. 功能: 解析标签属性、解析标签体内容、绑定事件 2\. 举例：v-bind:href = 'xxxx' ，xxxx 会作为 js 表达式被解析 3\. 说明：Vue 中有有很多的指令，此处只是用 v-bind 举个例子