Vue--1.4Vue指令

Vue会根据不同的指令，针对标签实现不同的功能。

指令：带有v-前缀的特殊标签属性

v-前缀="表达式"

1.v-html

作用:动态解析标签innerHTML

2.v-show

作用：控制元素显示隐藏

语法：v-show=“表达式” 表达式值true显示，false隐藏

原理：从css角度进行了隐藏，添加了display:none;

场景：频繁切换显示隐藏的场景

3.v-if

作用：控制元素显示隐藏（条件渲染）

语法：v-if=“表达式” 表达式值true显示，false隐藏

场景：要么显示，要么隐藏，不频繁切换的场景

4.v-else v-else-if

作用：辅助v-if进行判断渲染

语法：v-else v-else-if=“表达式”

注意：需要紧挨着v-if一起使用

  
  
  
  



    
性别：男
    
性别：女
    

    
成绩评定A:奖励电脑一台
    
成绩评定B:奖励周末郊游
    
成绩评定C:奖励零食礼包
    
成绩评定D:奖励一周不能玩手机

5.v-on

作用：注册事件=添加监听+提供处理逻辑

语法：1）v-on：事件名=“内联语句”

2）v-on：事件名=“methods中的函数名”

简写：@事件名=""

注意：methods函数内的this指向Vue实例

  
  
  
  



    
    -    
    {{count}}
    +
    

    
    -
    {{count}}
    +
    

    切换显示隐藏
    
黑马程序员

v-on调用传参

实例：饮料自动贩卖机

  
  
  
  



    

        
饮料自动售货机
        可乐5元
        咖啡10元
    
    
银行卡余额:{{money}}元

6.v-bind

作用：动态的设置html的标签属性->src url title......

语法：v-bind:属性名=“表达式”

简写：:属性名=“表达式”

实例：图片轮播

  
  
  
  



    上一页
    
    下一页

7.v-for

作用：基于数据循环，多次渲染整个元素 ->数组、对象、数字...

语法：v-for=“(item,index) in 数组”  item是每一项，index是下标

如果不需要index，可简写为v-for=“item in 数组”

  
  
  
  



    
水果店
    

        
{{item}}
        
{{item}}
    

实例：书架

  
  
  
  



    
书架
    

        

            {{item.name}}
            {{item.author}}
            删除
        
    

v-for中的key

语法：：key=""

作用：给列表项添加的唯一标识。便于Vue进行列表项的正确排序复用。

如果不添加key，那么v-for的默认行为会尝试原地修改元素（就地复用）

注意点：

1）key的值只能是字符串或数字类型

2）key的值必须具有唯一性

3）推荐使用id作为key（唯一），不推荐使用index作为key（会变化，不对应）

8.v-model

作用：给表单元素使用，双向数据绑定->可以快速获取或设置表单元素内容

1)数据变化->试图自动更新

2)视图变化->数据自动更新

语法：v-model='变量'

  
  
  
  



    账户：


    密码：


    登录
    重置