用 new Vue({})新建vue实例
使用 v-bind:和{{}}双大括号语法在html中绑定变量
使用 v-on: 和 @ 语法绑定函数到标签的事件
使用 v-model: 语法使用户的页面输入反向传递回vue实例变量
事件绑定
v-bind:是用来绑定数据的，v-on:则是用来绑定事件的，比如我要绑定一个<button>的 click事件就这么写
<button v-on:click="clickButton()">Click Me</button>
当然这里的click可以换成任意一个html事件，比如load , doubleclick , mouseon , mousedown这些，不过click肯定是我们最常用的
将click动作绑定到clickButton()函数之后就需要实现这个函数了,我们要在之前的vue实例中加入新字段methods
var myVue = new Vue({
el:'#firstVue',
data:{
my_data: "test",
my_hidden: "hidden"
},
methods:{
clickButton:function(){
this.my_data = "Wow! I'm changed!"
}
}
})
我们在methods关键字里面定义了clickButton方法，并在方法内改变了之前定义的my_data变量的值
这里涉及到如何在vue实例中引用data字段的变量，如上所示，需要加this后面直接写要引用的变量就可以了
如果不加this，系统会默认你想引用的是一个全局变量，可是这里我们需要引用的是这个vue实例里的局部变量
现在整体代码和之前有些变化，看起来是这样的：
<!DOCTYPE html>
<html>
<head>
<title>Vue Demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id="firstVue">
<button v-on:click="clickButton">Click Me</button>
<p>{{my_data}}</p>
</div>
</body>
<script type="text/javascript">
var myVue = new Vue({
el:'#firstVue',
data:{
my_data: "test",
my_hidden: "hidden"
},
methods:{
clickButton:function(){
this.my_data = "Wow! I'm changed!"
}
}
})
</script>
</html>
运行一下，点击Click Me的时候"test"就会变成"Wow! I'm changed!"，这是因为变量my_data的改变。
另外，v-on:语法同样有一个缩写@，比如v-on:click="clickButton"就等价于@click="clickButton"
