Vue指令

 Vue的指令

指令(Directives) 是带有v- 前缀的特殊属性,指令属性是单一的js表达式.

指令的职责就是表达式的值发生变化时,在DOM中做出相应的回应.

 

1、v-text和v-html

v-text:插入一段文本

//插入一段文本

    

View Code

v-html:既可以插入一段文本也可以插入html标签

//既可以插入一段文本也可以插入html标签


    

View Code

 

2、v-bind：绑定元素的属性来执行相应的操作

​​v-bind​​ 指令可以更新 HTML 属性：

<a v-bind:href="url">...</a>

 

在这里 ​​href​​​ 是参数，告知 ​​v-bind​​​ 指令将该元素的 ​​href​​​ 属性与表达式 ​​url​​ 的值绑定。

缩写==>可以用：代替v-bind

<a :href="url">...</a>

 

 

    
    
    
    
    
    


    

        腾讯   
        点我   
        

        


        
加油,吧
  
        
 
    

    

View Code

 

3、 v-for：根据变量的值来循环渲染元素

数组的v-for

我们用 ​​v-for​​​ 指令根据一组数组的选项列表进行渲染。​​v-for​​​ 指令需要使用​​item in items​​​ 形式的特殊语法，​​items​​​ 是源数据数组并且 ​​item​​ 是数组元素迭代的别名。

    
    
    
    
    




    

        

            {{ item.message }}
        

    

View Code

结果：

在 ​​v-for​​​ 块中，我们拥有对父作用域属性的完全访问权限。​​v-for​​ 还支持一个可选的第二个参数为当前项的索引。

 

    
    
    
    
    




    

        {{ parentMessage }} - {{ index }} - {{ item.message }}
    

View Code

 

结果：

你也可以用 ​​of​​​ 替代 ​​in​​ 作为分隔符，因为它是最接近 JavaScript 迭代器的语法：

<div v-for="item of items"></div>

对象的 ​​v-for​​

你也可以用 ​​v-for​​ 通过一个对象的属性来迭代。

    
    
    
    
    




    

        {{ value }}
    

View Code

结果：

 

你也可以提供第二个的参数为键名：

    

        {{ key }}: {{ value }}
    

结果：

 

第三个参数为索引：

    

        {{ index }}. {{ key }}: {{ value }}
    

结果：

 

4、v-on：监听元素事件，并执行相应的操作

事件:click\keydown

<button v-on:click="greet"></button>

可以用@代替v-on

 简写为

 <button @click="greet"></button>

​​v-on​​ 可以接收一个定义的方法来调用。

    
    
    
    
    




    
    Greet

View Code

    
    
    
    



    

        

            苹果
        

        

            香蕉
        

        

            香梨
        

        

            其它
        

        


        


    

动态生成html

 

5、v-if：根据表达式的真假值来动态插入和移除元素

条件判断(v-if\v-else)

v-if 指令将根据表达式的真假值(true 或 false )来决定是否插入 元素。

    
    
    
    
    




    

        

            哈哈哈
        

    


    

        

            呵呵呵
        

    

View Code

改变布尔值后，

 

实现tag切换

    
    
    
    
    
    




    

        
二维码登录

        
邮箱登录

    

    

        
    

    
  
        

            
            
邮箱：

            
密码：

            

        

    

View Code

 

 6、v-show：根据表达式的真假值来隐藏和显示元素

根据表达式的真假值来渲染元素

用法和v-if大致一样：

<h1 v-show="ok">Hello!</h1>

 

 不同的是带有 ​​v-show​​​ 的元素始终会被渲染并保留在 DOM 中。​​v-show​​​ 只是简单地切换元素的 CSS 属性 ​​display​​。

根据时间切换2段文本内容

    
    
    
    
    




   

          

         一闪一闪
      

      
亮晶晶

   

View Code

 

 7、实现了数据和视图的双向绑定

可以用 v-model 指令在表单控件元素上创建双向数据绑定。

​​v-model​​ 会忽略所有表单元素的 ​​value​​、​​checked​​、​​selected​​ 特性的初始值。

因为它会选择 Vue 实例数据来作为具体的值。

你应该通过 JavaScript 在组件的​​data​​ 选项中声明初始值。

 

输入框

    
    
    
    
    





input 元素：


消息是: {{ message }}


textarea 元素：

{{ message2 }}

View Code

复选框

复选框如果是一个则为逻辑值，如果是多个则绑定到同一个数组：

以下实例中演示了复选框的双向数据绑定：

    
    
    
    
    





单个复选框：


{{ checked }}

多个复选框：


Runoob

Google

taobao


选择的值为: {{ checkedNames }}

View Code

实例中勾选复选框效果如下所示：

单选按钮

以下实例中演示了单选按钮的双向数据绑定：

    
    
    
    
    






Runoob



Google


选中值为: {{ picked }}

View Code

选中后，效果如下图所示：

select 列表

以下实例中演示了下拉列表的双向数据绑定：

    
    
    
    
    





选择一个网站RunoobGoogle


选择的网站是: {{selected}}

View Code

选取 Runoob，输出效果如下所示：

 

8、自定义指令

View Code

 

小练习——维护用户信息

    
    
   
    


      

        

            
            
            
        

          

                








                    
                        
 
                        
{{item.age}}
                        
{{index}}
                        
                        
                    
                

          

    

    

View Code

数组操作

- push  #从末尾添加
    - pop  #从末尾删除
    - shift #从头添加
    - unshift #从头删除
    - splice #删除元素。splice(index,howmany,item1,.....,itemX)，从index位置开始删除howmany个元素，如果有item则用item替换被删除的元素

- reverse #反转