02 Vue基本用法：变量、模板绑定、属性绑定和事件绑定

    
    
    



    

        
        
{{msg}}
        
数量：{{(num + 1) * 10}}
        
原样显示带有HTML标签的变量：{{menu_template}}

        
        


        
        

        


        
        点击后调用绑定的函数
        点击后调用绑定的函数

    
    

上面的代码中，包含了VueJS最基本的4中用法：

1、变量的使用

        
        
{{msg}}
        
数量：{{(num + 1) * 10}}
        
原样显示带有HTML标签的变量：{{menu_template}}

这段HTML代码，通过 {{}} 使用了new Vue() 中 data{} 定义的一些变量，在VueJS中实现了数据和页面元素的双向绑定。

 

2、模板的绑定

这段HTML代码，通过v-html="变量名称"的形式，实现了带有html标签的变量的显示。

 

3、属性的绑定

这段HTML代码，通过【v-bind:src】的形式，实现了html元素属性的绑定；它的缩写格式为 【:src】

 

4、事件的绑定

        
        点击后调用绑定的函数
        点击后调用绑定的函数

这段HTML代码，通过【v-on:click】的形式，实现了点击事件的绑定；它的缩写格式为【@click】;

一般的，绑定事件后，会调用对应的函数实现业务功能，如上述代码就调用了名为 count_num()的函数，该函数在 new Vue() 代码中通过 methods:{

count_num:function(){

}

}方式来定义。

 

5、VueJS程序的结构说明

通过上述代码可以看出来，VueJS程序包括两个部分：

（1）模板

    

        
        
{{msg}}
        
数量：{{(num + 1) * 10}}
        
原样显示带有HTML标签的变量：{{menu_template}}

        
        


        
        

        


        
        点击后调用绑定的函数
        点击后调用绑定的函数

    

（2）js代码