v-on指令: v-on：也可以简写为@:

    
     {
   {num}}
     num+1
    
复制代码

关于v-on:的一些事件处理:

    
     
hello world
    
复制代码

v-text和v-html指令:

    
    
     
      //不解析标签，原样输出    
     
      //解析标签
    
复制代码

v-bind:(绑定属性 添加单个类名)

    
 
     
    hello world 
    
复制代码

v-bind:(添加多个类名)

    
 
     
    hello world 
    
复制代码

v-bind 动态控制单个类名的添加移除:

    
 
     
    hello world 
    
复制代码

v-bind 动态控制多个类名的添加移除:

    
 
     
    hello world 
    
复制代码

v-bind 图片属性的绑定:

    
 
     
    
复制代码

v-bind style的绑定:

    
     
    
复制代码

v-model: 双向数据绑定(经常用于表单元素的绑定)

    
     
    
复制代码

v-model用于复选框的案例

    
     
     
{
   {mes}}{
   {t}}
    
复制代码

v-if和x-show 根据变量来判断元素的显示隐藏

v-if:直接切换结构

    
     切换  
     
hello world
    
     
你好世界
    
复制代码

v-show 通过display:none来切换显示隐藏 没有v-else

    
     切换  
     
hello world
 
    
v-if和v-show的对比：v-if初次加载时的性能更好；v-show切换时性能更好复制代码

v-for：

    
     
{
   {index}}{
   {item}}
    
复制代码