vue五个指令入门示例

• 指令是带有前缀 v-，以表示它们是 Vue 提供的特殊特性。它们会在渲染的 DOM 上应用特殊的响应式行为
• 本文介绍5个指令的用法，他们分别是v-bind、v-if 、v-for 、v-on、v-model

1.v-bind指令

• 示例代码

           
                    span的title属性有值，鼠标移过来能看见！
            

该指令的意思是：“将这个元素节点的 title 特性和 Vue 实例的 message 属性保持一致”

注意:span 元素的title属性特点是：鼠标停留在上面就会显示出来

• 效果

  
  
  image.png

2.v-if、v-for条件与循环指令

• v-if
  代码

            
                    span的title属性有值，鼠标移过来能看见！
            
            
现在你看到我了
        
        
        

效果

image.png

注意:如果vif值没有定义，将不会显示，控制台会报异常vif找不到

• v-for

            
                    span的title属性有值，鼠标移过来能看见！
            
            
现在你看到我了
            

                    

                      {{ todo.text }}
                    
            
        
        

效果

image.png

3.v-on 指令-添加事件监听器

• 点击事件

v-on:click="方法名"

                
{{ message }}
                反转消息

 

效果

image.png

4.v-model - 实现表单输入和应用状态之间的双向绑定

                
{{ message }}
                反转消息
                
        
        

效果

image.png

vue应用的message的值会跟随输入的值变化而变化,初始化的时候input的值也被vue应用的message赋值，实现双向绑定

5.其他指令

• v-html
  该指令可以把demohtml变量数据解析成html