1.1 创建第一个Vue实例
官方网站：https://cn.vuejs.org
学习 --> 安装
刚开始学习Vue，使用最简单的安装方式，直接用<script>引入
我们下载开发版本的Vue.js
创建一个index.html， 引入Vue.js
使用Vue.js创建一个实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入门</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">{{msg}}</div>
<script>
new Vue({
el: "#app", //挂载点
data: {
msg: "hello world"
}
})
</script>
</body> </html>
1.2 Vue实例中的数据，事件和方法
v-text指令
<div v-text="number"></div>
v-html指令
<div v-html="number"></div>
绑定事件
<div id="app">
<div v-on:click="clickFn">{{content}}</div>
</div>
<script>
new Vue({
el: "#app",
data: {
content: "hello"
},
methods: {
clickFn: function () {
//改变数据
//当数据发生变化的时候，Vue会自动帮你去更新页面
//不需要直接去操作DOM
this.content = "world"
}
}
})
</script>
v-on:click 可以简写成 @click
<div @click="clickFn">{{content}}</div>
现在的编程，不是面向DOM去编程了，而是面向数据去编程了。
当数据发生改变，页面就会自动发生变化了。
想让页面的数据发生变化，并不需要直接的去操作DOM，通过this.xxx="xxx"，去改变实例中的数据就行了。
Vue实例会监听到你数据的改变，自动的帮你对模板进行更新，页面就会自动跟着变化了。
1.3 Vue中的属性绑定和双向数据绑定
我们希望属性title的值可以改变
<div id="app">
<div v-bind:title="title">hello world</div>
</div>
<script>
new Vue({
el: "#app",
data: {
title: "this is title"
}
})
</script>
v-bind:title 的意思是，我当前title这个属性，和Vue实例中的title这个数据项进行绑定。
那么经过这样写之后，v-bind:title = "title"， 双引号中的title就不再是字符串了，而是表达式了， 双引号中的title是一个变量。
v-bind: 可以缩写成 :
<div :title="title">hello world</div>
v-bind:title 和 :title 意思是一样的。
双向数据绑定
什么是单向绑定？
答：数据决定页面的显示，但是页面无法决定你数据里面的内容。
使用v-model指令，来进行双向数据绑定，可以在页面中改变数据。
<div id="app">
<input v-model="content" />
<div>{{content}}</div>
</div>
<script>
new Vue({
el: "#app",
data: {
title: "this is title",
content: "this is content"
}
})
</script>
1.4 Vue中的计算属性和侦听器