1, 每个Vue.js 应用都是通过Vue构造函数创建一个根实例启动的, 所以 当vue-cli 构建项目的时候，它的main.js 里面 new Vue({el: “#app”}) ，它就是来启动vue 应用的。同时也看到 Vue 构造函数 接受一个对象作为参数， 这个对象包括数据，模版，方法 等还有生命周期函数。
new Vue({
el: "#app",
data: {
count: 1
}
})
new Vue() 构造函数调用，会返回一个对象，如果我们把这个对象赋值给一个变量， 这个变量就自动指向了data 对象，通过变量可以对data 对象进行读写。
var vm = new Vue({
el: "#app",
data: {
count: 1
}
})
console.log(vm.count) // 1 直接访问data 对象的属性。
vm.count =5; // 动态修改data 对象的属性。
console.log(vm.count) // 5
构造函数生成的对象，就是vue实例，还暴露了一些方法和属性，这些属性和方法都以$ 开头。 vm.$el 就指向了 “#app” 这个html 元素， vm.$data 也指向了 data 对象。 vm.$data.count ==> 1
2, vue 的生命周期
每个实例启动之后，从存在到消失都经历一系列的过程。Vue 是通过构造函数进行启动的，启动之后，它需要观测数据，初始化 事件，就是观察vue 构造函数中的data 对象， methods 对象，进行数据和事件绑定，完成这些事情后，就意味着创建实例成功。所以在这里，vue 提供了两个生命周期函数，beforeCreate, created。 vue 实例启动之后，到实例开始创建之前是beforeCreate 阶段，实例创建完成后是created阶段。
创建vue 实例之后，就开始编译dom ,因为vue 是虚拟dom，这个阶段主要是创建虚拟dom 放到内存中， 因此 它先找el 选项，再找template 选项，这两个都是vue 构造函数中的配置对象中的两个属性。如果有template 选项，它就会对这个选项进行渲染，template 模版会整个替代到el 挂载元素中的内容。 如果没有template选项，vue 就会渲染 我们写的html 代码。在vue 中，我们所写的html 代码其实就是模版。 这时虚拟dom创建完毕。
虚拟dom创建完毕后，就需要创造真实的dom到我们的页面中，这就是所谓的挂载到dom 中。它这里提供了两个生命周期函数。beforeMount, 就是虚拟dom 创建完成，开始渲染真实dom之前的阶段。Mounted: 真实的dom渲染出来，这时我们看到了页面。
在整个实例存在过程中，我们随时都可能更新数据，更新数据就会重新渲染dom. 这里也提供了两个生命周期函数， dom 更新之前 beforeUpdate, dom 更新完成后 updated.
销毁实例也会有两个生命周期函数：beforeDestroy: 销毁实例之前，destroyed, 销毁实例之后。
3，html 模板
在vue 中，我们所写的html其实就是模版，模版的话，vue 肯定定义的它的语法。
1， 最简单的语法{{}}, 和handlbar 一样,{{}}里面的内容就变量，它会自动绑定到vue构造函数中data对象中的变量。
2，稍微复杂点，就是{{}} 里面可以放js 表达式，如{{3+2}}, 再复杂一点是，{{}} 里面可以调用函数，不过函数要写到 构造函数的methods方法中。
<div id="app">
{{transItem(20)}} // transItem是一个函数，可以接受参数，只不过它要写到methods中，使用场景是，服务传递过来数字，而我们要显示文字，
</div>
在methods中定义transItem函数
var vm = new Vue({
el: "#app",
methods: {
transItem (item) {
return parseInt(item)> 30? 'hello' : 'world'
}
}
})
根据传递的数据大小，显示不同的文字描述
3， vue 还提供了一系列的指令来对html 模版进行优化。
v-bind 指令： 操作html 元素的属性, 如 <div v-bind:id="dynamicId"></div>. v-bind 表示，把元素的id 属性绑定到dynamicId 变量上，dynamicId 就是data 对象中声明的变量，如果这个变量的值发生改变，元素的id 也就跟着发生变化了。在 使用v-bind指令时，双引号””里面的也是变量，js 会对它进行求值，所以里面也可以进行简单的计算，如字符串拼接。 <div v-bind:id="'list-' + id"></div>。 v-bind 还提供了简写，就是：<div :id="'list-' + id"></div>
v-if /v-show指令： 操作元素的显示和隐藏。<p v-if="seen">Now you see me</p> seen 是一个变量，取值true or false, 取值为true 时p元素显示，取值为false时，元素隐藏。
v-show 也是同样的道理，
v-on 指令，给元素绑定事件。<a v-on:click="doSomething"> 给a 元素绑定了click 事件，相对应的事件处理函数就是doSometing. 所有的事件处理函数都要写到vue 构造函数中 methods 属性中。对于事件来说， 经常会阻止事件的默认形为，阻止事件冒泡等。Vue 的处理方式是提供修饰符。<form v-on:submit.prevent="onSubmit"></form> 在submit 事件后加 .prevent， prevent修饰表示阻止事件的默认形为。
最后vue 提供了过滤器语法，所谓的过滤器就是对文本进行格式化, 如大小写转换。｛｛mes｝｝想对mes 变量转换成首字母大写，那可以用过滤器。过滤器的语法是 在变量的后面加 |，再加上 我们自定义的进滤器。自定义的过滤器都要写在vue构造函数中的filters 属性中 {{ message | capitalize }}
// html
<div>{{mes | capitalize }}</div>
// script
new Vue({
// ...
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
})
4， 计算属性
计算属性，根据名字可以知道，这个属性是计算出来的，根据一个现有的属性得到一个新的属性，这个属性可以直接在html 模版中使用。例如我们买东西，知道单价和数量，计算出总价，总价就是一个计算属性，它依赖单价和数量。所有的计算属性都放到computed 中。 计算属性也是属性，和data 对象中的属性没有什么区别，只不过它是计算出来的， vue 自动调用的函数而已。我们只需在html 模版中写出函数名，vue 自动执行这个函数。
<div id="app">
<div>
数量: <input type="text" v-model="quantity">
</div>
<div>
单价: <input type="text" v-model="price">
</div>
<div>
总价: <span>{{total}}</span>
</div>
</div>
// script
var vm = new Vue({
el: "#app",
data: {
quantity: 0,
price: 0
},
computed: {
total: function(){
return parseFloat(this.quantity) * parseFloat(this.price)
}
}
})
计算属性和方法实现的功能是一样的，但是为什么不使用方法？ 这时主要是因为计算属性有缓存，它的优势主要在于多次调用上。如果在页面中多次调用 total 属性，它不会进行计算，直接从缓存中去取。而方法则是调用一次，执行一次。多次调用，多次执行。如果计算量特别大的话，方法会影响性能。 计算属性只有在它的依赖发生变化后，它才会自动进行计算。
此外还有一个watch 方法，它也是主要对属性进行监听。如果属性发生了变化，它也相应的作出变化。它监听的是属性变化，而computed 是属性变化后得出的结果。上面的列子用 watch 写，如下，可以看到非常麻烦
var vm = new Vue({
el: "#app",
data: {
quantity: 0,
price: 0,
total: 0
},
watch : {
quantity: function(value){
this.total = this.price * this.quantity
},
price: function(){
this.total = this.price * this.quantity
}
}
})
Watch 的主要作用是执行异步操作。 Computed 计算属性，主要是同步操作，只要它依赖的属性发生变化，它会立即作出改变。但有的时候，依赖发生变化后，却不会立即返回结果，如果，我们数量发生变化，但价格却要到数据库中查询，很显然，价格不是会立即获得，Computed 计算total 总价就会失败。这时只能用watch 去监听 quantity 属性的变化.
var vm = new Vue({
el: "#app",
data: {
quantity: 0,
price: 0,
total: 0
},
watch : {
quantity: function(){
this.getPrice();
}
},
methods:{
getPrice: function(){
axios.get('https://yesno.wtf/api')
.then(function (response) {
vm.price = response.data.price
vm.total = vm.quantity * vm.price;
})
.catch(function (error) {
alert(error)
})
}
}
})