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中的计算属性和侦听器
来源：https://www.cnblogs.com/still1/p/10733654.html