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>