1.v-bind

• v-bind用来动态绑定标签上的属性的值。（标签上的属性值不能使用插值表达式来设置）

2.v-for

• 列表渲染, 所在标签结构, 按照数据数量, 循环生成

3.v-show v-if

原理

• v-show 用的display:none隐藏   (频繁切换使用)
• v-if  直接从DOM树上添加或移除

小结

• v-show 性能较好，对应需要频繁切换显示与隐藏的功能，可以使用v-show。
  • 注意无论变量是否为true还是false,它一定会创建元素的。
• v-if 会动态创建和删除元素。
  • 在频繁的切换可见与不可见时，它的效率会低一点
  • 如果变量的值为false,它将不会创建元素

4.v-if,v-else-if,else 判断

<标签 v-if="条件">        </标签> 
<标签 v-else-if="条件">   </标签> 
<标签 v-else-if="条件">   </标签> 
<标签 v-else>             </标签>

5. v-on和methods 给标签绑定事件

语法

1. <标签 v-on: click ="要执行的少量代码" >//简单代码直接写
2. <标签 v-on:事件名="methods中的函数" >//直接调用
3. <标签 v-on:事件名="methods中的函数(实参)">//加小括号调用函数传递参数

注意

1. v-on可以简写成 @。 即 @事件名="methods中的函数"
2. 事件名可以是任意合法的dom事件

-v-on事件修饰符语法:

<标签 @事件名.修饰符="methods里函数" />

• .stop - 阻止事件冒泡
• .prevent - 阻止默认行为，子元素可以继承
• .once - 程序运行期间, 只触发一次事件处理函数

-v-on按键修饰符

• @keyup.enter  -  监测回车按键
• @keyup.esc     -   监测返回按键
• 等等...

6.v-model双向绑定

• 把value属性和vue数据变量, 双向绑定到一起
• 语法: v-model="data数据变量"
• 双向数据绑定

• • 数据变化 -> 视图自动同步
  • 视图变化 -> 数据自动同步

-v-model修饰符

• trim：清除空白
• number：转成数值类型