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