vue學習筆記【二、數據綁定、事件監聽】

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>