开始
一个实例的创建
//一个实例的产生
var vm = new Vue({
//你的代码
})数据与方法
vue的实例中采用了响应式系统，其实就是数据的双向绑定。
如果创建了一个对象，并且又在vue的实例中添加了这个对象，那么就可以实现“响应”.
<script>
//创建一个对象
var data = {a:1}
//把对象加入到实例中。实例会找到所有的属性
var vm = new Vue({
data:data
})
vm.a === data.a //true
//设置某一个值，另外一个也会发生改变 ,反之亦然
vm.a = 2;
data.a//2
</script>但是响应式必须满足的条件是，对象和实例中都存在才可以。
vue中提供了一些预定义的方法和属性，为了和用户的区分开来，所以前面会添加$。
模版语法
插值
<!--大括号是最常见的插值方式，它会和数据对象进行绑定更新-->
<p>{{msg}}</p>纯HTML
在vuejs中，单纯的大括弧数据绑定只能实现纯文本，但是提供了v-html来显示具有html结构的数据。
<body>
<div id="app">
<p >{{datas}}</p>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
datas:"<em>你好啊</em>"
}
})
</script>
</body>在网页中将会显示具有em（倾斜）属性的文本，如果没有v-html的绑定，就只会显示纯文本。
javascript
每一个{{}}中都可以使用javascript语句，但是限制的是，只能使用一个语句。
<div id="app">
<p >{{number+1}}</p>
</div>指令
指令是带有v-的特殊属性，一般是产生单个js的表达式。作用是，当表达式的值发生改变的时候，响应式的作用域dom结构。
参数
有的指令后面可以跟一个参数，以冒号开始，告知绑定的数据的作用。
<p v-on:click="onclick">点我</p>它的含义就是，点击时触发点击事件，执行onclick函数。
计算属性与观察者
什么是计算属性，首先我们知道在{{}}运算符中可以执行js的计算,但是只建议进行简单的计算。如果把冗长的计算过程放在其中，不仅代码不宜阅读，而且不宜维护，所以对于计算的部分当然是放在js的地方。
HTML
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>JS
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// a computed getter
reversedMessage: function () {
// `this` points to the vm instance
return this.message.split('').reverse().join('')
}
}
})这是js官方文档提供的一个实例。没错所谓的计算属性，就是把计算的部分放在vue的实例中，在HTMl只是提供一个引用。
那么这个时候就有一个疑问了，computed和methods的区别是什么？
1.computed在dom加载完毕就执行，而methods中的方法需要调用才可以执行。
2.二者都可以达到相同的效果。
3.computed的是基于依赖的关系，也就是最后的结果reverseMessage，取决于message是否发生改变。
4.computed的优势在于依赖缓存，假设有一个开销比较大计算属性A，B依赖A产生结果。如果A没有发生变化，那么B会调用之前的缓存，而无需重新计算。但是在methods中，每一次的调用，都会进行一遍计算。
所以computed的重要点在于依赖，如果没有依赖关系的computed是没有意义的。
computed本质上还是一个属性，所以使用的时候，采用属性的方式调用。
观察者
虽然默认的vue是没有setter的，但是我们可以自行添加。
比如当你想要在执行计算属性的时候，执行另一个异步操作（通常是为了解决开销大的情况），那么这个时候采用watch。
比如一个vuejs官方文档的实例：
<script>
var watchExampleVM = new Vue({
el: '#watch-example',
data: {
question: '',
answer: 'I cannot give you an answer until you ask a question!'
},
watch: {
// 如果 question 发生改变，这个函数就会运行
question: function (newQuestion) {
this.answer = 'Waiting for you to stop typing...'
this.getAnswer()
}
},
methods: {
// _.debounce 是一个通过 lodash 限制操作频率的函数。
// 在这个例子中，我们希望限制访问 yesno.wtf/api 的频率
// ajax 请求直到用户输入完毕才会发出
// 学习更多关于 _.debounce function (and its cousin
// _.throttle), 参考: https://lodash.com/docs#debounce
getAnswer: _.debounce(
function () {
if (this.question.indexOf('?') === -1) {
this.answer = 'Questions usually contain a question mark. ;-)'
return
}
this.answer = 'Thinking...'
var vm = this
axios.get('https://yesno.wtf/api')
.then(function (response) {
vm.answer = _.capitalize(response.data.answer)
})
.catch(function (error) {
vm.answer = 'Error! Could not reach the API. ' + error
})
},
// 这是我们为用户停止输入等待的毫秒数
500
)
}
})
</script>