Vue学习笔记三：v-bind，v-on的使用

v-bind：绑定属性值，内容相当于js，缩写:

我添加了一个input标签，如下

这样显示的title是固定的，我想使用Vue的data里面的值，就需要加v-bind指令

Vue的data加一个title

 title:"这是一个v-bind指令的提示"

可以很清楚的看到，v-bind指令使用了之后，内容相当于js，title就是变量名，拼接的话就用+，内容用''，看一下浏览器展示效果

v-bind的缩写是：，可以写成如下

v-on:绑定方法，缩写@

我在Vue的笔记一中说过，Vue是不操作DOM的，这个v-on指令可以很好的解释这个

比如，上面的input的button按钮，我想写个点击事件，如果是原生js或者jquery，我们会这样写

v-on的缩写是@，可以写成如下

js会这样写

  document.getElementById('btn').onclick=function(){
            alert('hello 许嵩');
        }

这样不好，Vue就是不让我们操作DOM的，就是让我们专注于业务的，所以看看v-on的写法吧，下面是完整的HTML

    
    
    
    
    



    
    
    


        
        
哈哈 {{ msg }} 许嵩来了

        
        
许嵩说菜糊了不来了

        
        


        
        

        
        

        
        

    

    


    

可以看到v-on方式是v-on:click="show"，这个show就是个方法名，所以Vue里写了个method方法，里面有一个show方法。

总结

又新学了两个指令，v-bind绑定属性，v-on绑定方法

防盗链接：本博客由蜀云泉发表

转载于:https://www.cnblogs.com/yunquan/p/10772902.html