1、双括号表达式
<h1>双括号表达式</h1>
<div>{{msg.toUpperCase()}}</div>
2、数据绑定:
<!--数据绑定-->
<h3>强制数据绑定</h3>
<a v-bind:href="site">baidu</a>
<!--简写-->
<a :href="site">baidu</a>
3、事件监听:需要在methods中定义函数
<!--click中只能调用函数-->
<h3>绑定事件监听</h3>
<p><button v-on:click="study">学习vue</button></p>
<!--简写-->
<p><button @click="study">学习vue</button></p>
<!--传参-->
<p><button @click="study('aaa')">学习vue</button></p>
js:
<script>
export default{
name:"Template",
data(){
return {
msg:'hello',
site:'http://www.baidu.com'
}
},
methods: {
study(name){
alert('学习愉快.',name);
console.log('happy',name);
}
}
}
</script>