1.模板理解
动态的html页面,包含了一些js语法代码,在页面的用法主要分为双大括号和一些指令(一些以V-开头的标签属性)。
2.双大括号
语法:{{表达式}}
3.指令一
绑定数据
例子,动态修改图片的URL
<div id="img">
<img v-bind:src="url" alt="">
<div>{{msg}}</div>
<div v-text="msg"></div>
<div v-html="msg"></div>
</div>
new Vue({
el:'#img',
data:{
url:'https://cn.vuejs.org/images/logo.png',
msg:'<a href="http://baidu.com">百度</a>'
}
});
4.指令二
接听事件
没有参数
<div id="btn">
<button v-on:click="test">按钮</button>
</div>
new Vue({
el:'#btn',
data: {
},
methods:{
test(){
alert("good!")
}
}
});
有参数:@等同于v-on:
<div id="btn">
<button @click="test(msg)">按钮</button>
</div>
new Vue({
el:'#btn',
data: {
msg: '我是帅哥'
},
methods:{
test(s){
alert(s);
}
}
});