<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02 VueJS基本用法</title>
<script src="https://cdn.bootcss.com/vue/2.6.9/vue.min.js"></script>
</head>
<body>
<div id="app">
<!-- 1、变量的使用 -->
<div>{{msg}}</div>
<div>数量：{{(num + 1) * 10}}</div>
<div>原样显示带有HTML标签的变量：{{menu_template}}</div>
<!-- 2、模板绑定 -->
<div v-html="menu_template"></div>
<!-- 3、属性绑定 -->
<div><img v-bind:src="header_img" /></div>
<div><img :src="header_img" /></div>
<!-- 4、事件绑定 -->
<button v-on:click="count_num()">点击后调用绑定的函数</button>
<button @click="count_num()">点击后调用绑定的函数</button>
</div>
<script>
new Vue({
el:'#app',
data:{
msg:'Hello，VueJS！',
num:1,
header_img:'https://img2.mukewang.com/5d4ce1eb00011c7640323024-140-140.jpg',
menu_template:'<div><span>菜单-1</span> | <span>菜单-2</span> | <span>菜单-3</span></div>'
},
methods:{
count_num:function () {
this.num += 1;
}
}
})
</script>
</body>
</html>上面的代码中，包含了VueJS最基本的4中用法：
1、变量的使用
<!-- 1、变量的使用 -->
<div>{{msg}}</div>
<div>数量：{{(num + 1) * 10}}</div>
<div>原样显示带有HTML标签的变量：{{menu_template}}</div>这段HTML代码，通过 {{}} 使用了new Vue() 中 data{} 定义的一些变量，在VueJS中实现了数据和页面元素的双向绑定。
2、模板的绑定
<!-- 2、模板绑定 -->
<div v-html="menu_template"></div>这段HTML代码，通过v-html=”变量名称”的形式，实现了带有html标签的变量的显示。
3、属性的绑定
<!-- 3、属性绑定 -->
<div><img v-bind:src="header_img" /></div>
<div><img :src="header_img" /></div>这段HTML代码，通过【v-bind:src】的形式，实现了html元素属性的绑定；它的缩写格式为 【:src】
4、事件的绑定
<!-- 4、事件绑定 -->
<button v-on:click="count_num()">点击后调用绑定的函数</button>
<button @click="count_num()">点击后调用绑定的函数</button>这段HTML代码，通过【v-on:click】的形式，实现了点击事件的绑定；它的缩写格式为【@click】;
一般的，绑定事件后，会调用对应的函数实现业务功能，如上述代码就调用了名为 count_num()的函数，该函数在 new Vue() 代码中通过 methods:{
count_num:function(){
}
}方式来定义。
5、VueJS程序的结构说明
通过上述代码可以看出来，VueJS程序包括两个部分：
（1）模板
<div id="app">
<!-- 1、变量的使用 -->
<div>{{msg}}</div>
<div>数量：{{(num + 1) * 10}}</div>
<div>原样显示带有HTML标签的变量：{{menu_template}}</div>
<!-- 2、模板绑定 -->
<div v-html="menu_template"></div>
<!-- 3、属性绑定 -->
<div><img v-bind:src="header_img" /></div>
<div><img :src="header_img" /></div>
<!-- 4、事件绑定 -->
<button v-on:click="count_num()">点击后调用绑定的函数</button>
<button @click="count_num()">点击后调用绑定的函数</button>
</div>（2）js代码
<script>
new Vue({
el:'#app',
data:{
msg:'Hello，VueJS！',
num:1,
header_img:'https://img2.mukewang.com/5d4ce1eb00011c7640323024-140-140.jpg',
menu_template:'<div><span>菜单-1</span> | <span>菜单-2</span> | <span>菜单-3</span></div>'
},
methods:{
count_num:function () {
this.num += 1;
}
}
})
</script>
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/10488.html
