目录
导读
1.Vue实例
1.1创建Vue实例
根标签el
初始数据data
定义方法methods
计算属性computed
状态监听watch
过滤器filters
2 数据绑定
v-model
v-text
v-html
v-bind
v-on
v-for
v-if和v-show
3.组件
3.1了解组件
3.2 两种组件注册类型：全局注册和局部注册
全局注册
局部注册组件
3.3组件之间数据传递
4.组件的生命周期 钩子函数
4.1钩子函数
导读本章着重在：
Vue实例的创建和数据绑定Vue的事件监听操作Vue组件的注册和组件之间的数据传递的方法Vue生命周期钩子函数的使用 1.Vue实例 1.1创建Vue实例Vue实例：通过new关键字实例化Vue({})构造函数
var vm = new Vue({// 选项 })选项中可以添加的内容：
选项 说明dataVue实例数据对象methods定义Vue实例中的方法components定义子组件computed计算属性filters过滤器el唯一根元素watch监听数据变化 根标签el说明：
在创建Vue实例时，el表示唯一根标签，class或id选择器可用来将页面结构与Vue实例对象vm中的el绑定。
用法：
{{name}} //唯一根元素通过id值与Vue中的el选项绑定var vm = new Vue({ el: '#app', // 通过el与div元素绑定 data: {name: 'Vue实例创建成功！'}}) 初始数据data说明：
Vue实例的数据对象为data，Vue会将data的属性转换为getter、setter，从而让data的属性能够响应数据变化。
用法：
{{name}}
var vm = new Vue({ el: '#app', // 通过el与div元素绑定 data: {name: '定义初始数据'}})console.log(vm.$data.name)console.log(vm.name)console.log(vm._data.name)console.log(vm.$data.name===vm.name)console.log(vm.$data.name===vm._data.name)
说明：
methods属性用来定义方法，通过Vue实例可以直接访问这些方法
在定义的方法中，this指向Vue实例本身
定义在methods属性中的方法可以作为页面中的事件处理方法使用
当事件触发后，执行相应的事件处理方法
用法：
var vm = new Vue({ el: '#app', data: { msg: '' }, methods: { // 定义事件处理方法showInfo showInfo ：function() { this.msg = '触发单击事件' } }})
说明：
计算属性结果会被缓存起来，当依赖的响应式属性发生变化时，才会重新计算，返回最终结果。
用法：
总价格：{{totalPrice}}
单价：{{price}}
数量：{{num}}
减少数量增加数量 var vm = new Vue({ el: '#app', data: {price: 20, num: 0}, computed: {// 总价格totalPricetotalPrice () {return this.price * this.num} }})
说明：
事件处理方法是根据用户所需自行定义的，通过单击事件、键盘事件等条件触发，但不能自动监听当前Vue对象的状态变化。 watch状态监听功能，监听当前Vue实例中的数据变化，就会调用当前数据所绑定的事件处理方法。
用法：
var vm = new Vue({ el: '#app', data: {cityName: ‘shanghai’ },watch: {cityName (newName, oldName) { console.log(newName, oldName)} }})
监听过程：
说明：
在前端页面开发中，通过数据绑定可以将data数据绑定到页面中，页面中的数据经过逻辑层处理后展示最终的结果。 数据的变化除了在Vue逻辑层进行操作外，还可以通过过滤器来实现。即在页面中直接操作数据，返回最终结果。
用法：
{{message | toUpcase}}var vm = new Vue({ el: '#app', data: {message: 'helloworld' }, filters: {// 将 helloworld 转换为 HELLOWORLDtoUpcase (value) { return value ? value.toUpperCase() : ''} }})
两种样式绑定方法：绑定内联样式、绑定样式类
var vm=new Vue({ el:'#app', data: {myDiv: { backgroundColor: 'red',width: '100px', height: '100px‘} pink:'pink', width:'100%',height: '200px'}})
内置指令：
路径说明v-model双向数据绑定（语法糖）v-on/@监听事件v-bind/:单向数据绑定v-text插入文本内容v-html插入包含HTML的内容v-for列表渲染v-if条件渲染v-show显示隐藏 v-modelv-model主要实现数据双向绑定，通常用在表单元素上，例如input、textarea、select等。
用法：
var vm = new Vue({ el: '#app', data: {msg: 'v-model指令' }})
v-text是在DOM元素内部插入文本内容
用法：
var vm = new Vue({ el: '#app', data: {msg: '我是v-text ' }})
v-html是在DOM元素内部插入HTML标签内容
用法：
var vm = new Vue({el: '#app',data: { msg: '我是v-html' } })
v-bind可以实现单向数据绑定
用法：
var vm = new Vue({ el: '#app', data: {msg: '我是v-bind ' }})
v-on是事件监听指令，直接与事件类型配合使用
用法：
{{msg}}
请单击var vm = new Vue({ el: '#app', data: {msg: '请单击按钮查看内容' }, methods: {showInfo () { this.msg = '我是v-on指令'} }})
→→→→
v-for可以实现页面列表渲染，常用来循环数组
用法：
索引是：{{key}}，元素内容是：{{item}}var vm = new Vue({el: '#app',data: { list: [1, 2, 3]} })
v-if用来控制元素显示或隐藏，属性为布尔值。 v-show可以实现与v-if同样的效果
用法：
我是v-if 显示/隐藏var vm = new Vue({el: '#app',data: { isShow: true} })
人面对复杂问题的处理方式：
将一个复杂的问题，拆分成很多个可以处理的小问题。
组件化思想：
将一个逻辑复杂的页面拆分成一个个小的功能块，每个功能块完成独立的功能，整个页面的管理和维护就变得容易。
每个组件都用于实现页面的一个功能块。 每一个组件又可以进行细分。
组件：在Vue中，组件是构成页面中独立结构单元，组件主要以页面结构形式存在，不同组件也具有基本交互功能。
组件必须先注册，再使用
3.2 两种组件注册类型：全局注册和局部注册 全局注册Vue.component()方法实现全局注册组件。
局部组件：注册的组件是挂载在某个实例中的
注册局部组件：通过Vue实例的components属性来实现
我是vm实例中的局部组件
' } var vm = new Vue({el: '#app',// 注册局部组件components: {myComponent: com1 } })3.3组件之间数据传递
上层传递到下层：
一个页面会从服务器请求到很多的数据，可能需要多个子组件进行展示。
不会让子组件发送网络请求，而是直接让大组件(父组件)将数据传递给小组件(子组件)。
props传值：
props即道具，用来接收父组件中定义的数据，其值为数组，从上到下的实现单向数据流传递。
Vue.component('my-parent',{ props: ['name'], template: '我是父组件{{name}}'})var vm = new Vue({ el: '#app'}) 4.组件的生命周期 钩子函数 4.1钩子函数
钩子
说明
beforeCreate
创建实例对象之前执行：在实例初始化之后，数据观测 (data observer)
和 event/watcher 事件配置之前被调用。
created
创建实例对象之后执行：在实例创建完成后被立即调用。
在这一步，实例已完成以下的配置：数据观测 (data observer)，property 和方法的运算，
watch/event 事件回调。然而，挂载阶段还没开始，$el property 目前尚不可用。
beforeMount
页面挂载成功之前执行：在挂载开始之前被调用：相关的 render 函数首次被调用。
mounted
页面挂载成功之后执行：实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。
如果根实例挂载到了一个文档内的元素上，当 mounted 被调用时 vm.$el 也在文档内。
beforeUpdate
组件更新之前执行：数据更新时调用，发生在虚拟 DOM 打补丁之前。
这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。
updated
组件更新之后执行：
由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。
然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，
通常最好使用计算属性或 watcher 取而代之。
beforeDestroy
实例销毁之前执行：实例销毁之前调用。在这一步，实例仍然完全可用。
destroyed
实例销毁之后执行：
实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，
所有的事件监听器被移除，所有的子实例也都被销毁。