锐客网

VueJS|02 Vue基本用法(变量、模板绑定、属性绑定和事件绑定)

02 VueJS基本用法{{msg}} 数量:{{(num + 1) * 10}} 原样显示带有HTML标签的变量:{{menu_template}}VueJS|02 Vue基本用法(变量、模板绑定、属性绑定和事件绑定)
文章图片
VueJS|02 Vue基本用法(变量、模板绑定、属性绑定和事件绑定)
文章图片

上面的代码中,包含了VueJS最基本的4中用法:
1、变量的使用
{{msg}} 数量:{{(num + 1) * 10}} 原样显示带有HTML标签的变量:{{menu_template}}

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

2、模板的绑定

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

3、属性的绑定
VueJS|02 Vue基本用法(变量、模板绑定、属性绑定和事件绑定)
文章图片
VueJS|02 Vue基本用法(变量、模板绑定、属性绑定和事件绑定)
文章图片

这段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}}VueJS|02 Vue基本用法(变量、模板绑定、属性绑定和事件绑定)
文章图片
VueJS|02 Vue基本用法(变量、模板绑定、属性绑定和事件绑定)
文章图片

(2)js代码

【VueJS|02 Vue基本用法(变量、模板绑定、属性绑定和事件绑定)】



    笔记 vuejs