Vue基础
一、创建项目
vue create my-app
二、模板语法
1.插值语法 {{}}
会将数据解释为普通文本，而非 HTML 代码
<div id="app">{{name}}</div>
使用javascript表达式
<div id="app">{{'个人介绍：'+name}}</div>
<div id="app">{{isShow ? name : ''}}</div>
<div id="app">{{ name.split('').join('-') }}</div>
2.v-text
使用指令的方式渲染普通文本
<div v-text="name" id="app"></div>
3.v-html
会将内容转换成html
<div id="app" v-html="name"></div>
3.表单元素数据绑定
v-model 数据双向绑定
<input v-model="name">
v-model修饰符
.lazy
在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步。可以添加 lazy 修饰符转为在 change 事件之后进行同步
<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg">
.number
如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：
<input v-model.number="age" type="number">
.trim
自动过滤用户输入的首尾空白字符
<input v-model.trim="msg">
4.属性绑定
v-bind可以给元素绑定动态属性
<!--绑定字符串-->
<div v-bind:id="'box'"></div>
<!--绑定变量-->
<div v-bind:id="idName"></div>
<!--js表达式-->
<div v-bind:id="idName+'1'"></div>
也可以通过:简写完成属性绑定
<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>
5.事件绑定
通过v-on给元素绑定事件
用在普通元素上时，只能监听原生DOM事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件
<!-- 点击事件 -->
<button v-on:click="getName"></button>
也可以通过@简写事件绑定
<!-- 点击事件 -->
<button @click="getName"></button>
事件修饰符
-
.stop- 调用event.stopPropagation()阻止冒泡事件传播。 -
.prevent- 调用event.preventDefault()组织默认事件执行。 -
.capture- 添加事件侦听器时使用 capture 模式（影响冒泡执行顺序）。`当元素发生冒泡时，先触发带有capture 修饰符的元素。若有多个该修饰符，则由外而内触发。就是谁有该事件修饰符，就先触发谁`
-
.self- 只当事件是从侦听器绑定的元素本身触发时才触发回调。 -
.{keyCode | keyAlias}- 只当事件是从特定键触发时才触发回调。 -
.native- 监听组件根元素的原生事件（用于给某个自定义组件绑定事件）。 -
.once- 只会触发一次回调。 -
.left- (2.2.0) 只当点击鼠标左键时触发。 -
.right- (2.2.0) 只当点击鼠标右键时触发。 -
.middle- (2.2.0) 只当点击鼠标中键时触发。
6.条件渲染
v-show
根据表达式之真假值，切换元素的 display属性
<div v-show="true" id="box"></div>
v-if & v-else-if & v-else
根据表达式的值来有条件地渲染元素。在切换时元素被销毁并重建
<div v-if="xxx">内容1</div>
<div v-else-if="xxx">内容2</div>
<div v-else >内容3</div>
7.列表渲染（循环）
基于数据多次渲染某一段元素，并且为为当前遍历的元素提供别名,循环渲染数据时需要为元素添加key作为当前元素的唯一标识
另外也可以为数组索引指定别名 (或者用于对象的键)
<div v-for="item in list" :key="i.id">
{{ item.text }}
</div>
<div v-for="(item, index) in list"></div>
三、组件
1.创建组件
全局组件 （全局注册的组件可以直接在各个页面直接调用）
Vue.component('button-com', {
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">点击{{ count }} 次</button>'
})
//组件调用
<button-com></button-com>
局部组件 （局部注册的组件需要在调用的页面进行配置才可以使用）
//组件
var Child = {
template: '<h1>自定义组件!</h1>'
}
//组件调用
new Vue({
el: '#app',
components: {
// <runoob> 将只在父模板可用
'h1-com': Child
}
})
<h1-com></h1-com>
2.数据data
data是一个函数（确保数据独立唯一），从该函数内返回一个对象作为当前Vue 实例的数据对象。Vue 会把 data 的 property 转换为 getter/setter，从而让 data 的 property 能够响应数据变化。data内返回的属性都可以在当前组件内通过this访问
Vue.component('button-com', {
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">点击{{ count }} 次</button>'
})
3.props
props 可以是数组或对象，用于接收来自父组件的数据。props 可以是简单的数组，或者使用对象作为替代，对象允许配置高级选项，如类型检测、自定义验证和设置默认值
// 数组语法
Vue.component('demo-com', {
props: ['size', 'myMessage']
})
// 对象语法，提供验证
Vue.component('demo-com', {
props: {
// 检测类型
height: Number,
// 检测类型 + 其他验证
age: {
type: Number,
default: 0,
required: true,
validator: function (value) {
return value >= 0
}
}
}
})
基于对象的语法使用选项：
-
type：规定当前属性接受的数据类型：String、Number、Boolean、Array、Object、Date、Function -
default：为当前属性指定一个默认值。如果该 prop 没有被传入，则换做用这个值。对象或数组的默认值必须从一个函数返回 -
required：Boolean定义该 prop 是否是必填项 -
validator：Function自定义验证函数验证属性值
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行
4.计算属性
当数据需要进行一些处理才可以正确显示的时候，就可以使用computed属性计算，计算属性的结果会被缓存，当计算的数据发生变化时才会重新计算
data: {
message: 'Hello'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
使用场景：
-
当页面中有某些数据依赖其他数据进行变动
-
每个计算属性默认是其他get方法的实现，但是添加set方法
-
计算属性可以一个方法监听多个属性变化
5.数据监听
当需要随时监听一个属性发生的所有变化的时候，可以使用watch监听
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
}
可选参数：
-
handler：数据变化的回调
-
immediate：规定是否进入页面后就会执行一次监听 （默认false）
-
deep: 是否开启深度监听，即所有属性都加上监听器，如果其中一个发生改变了就执行handler函数
使用场景：
-
数据变化时执行异步或开销较大的操作
-
数据监听是以每个单独数据为基础进行的监听
6.自定义事件
可以通过自定义事件让父子组件之间完成数据传递
<!--事件绑定-->
<my-component @getName="getNameFun"></my-component>
<!--事件触发-->
this.$emit('getName')
7. .sync修饰符
在有些情况下，我们可能需要对一个 prop 进行“双向绑定”，可以通过.sync修饰符修饰该属性为组建的双向绑定属性
<!--父组件-->
<demo-com :title.sync="title"></demo-com>
<!--子组件-->
this.$emit('update:title', newTitle)
8.过滤器
自定义过滤器，可被用于一些常见的文本格式化
<div>{{name | nameFilter}}</div>
filters: {
nameFilter: function (value) {
return value="我是"+value
}
}
9.生命周期
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数
| 生命周期钩子 | 详细 |
|---|---|
| beforeCreate | 在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。 |
| created | 实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。 |
| beforeMount | 在挂载开始之前被调用：相关的 render 函数首次被调用。 |
| mounted | el 被新创建的 vm.替换，并挂载到实例上去之后调用该钩子。如果实例挂载了一个文档内元素，当被调用时el 也在文档内。 |
| beforeUpdate | 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。 |
| updated | 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。 |
| activated | keep-alive 组件激活时调用。 |
| deactivated | keep-alive 组件停用时调用。 |
| beforeDestroy | 实例销毁之前调用。在这一步，实例仍然完全可用。 |
| destroyed | Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。 |
beforeCreate: function () {
console.group('beforeCreate 创建前状态===============》');
var state = {
'el': this.$el,
'data': this.$data,
'message': this.message
}
console.log(state);
},
created: function () {
console.group('created 创建完毕状态===============》');
var state = {
'el': this.$el,
'data': this.$data,
'message': this.message
}
console.log(state);
},
beforeMount: function () {
console.group('beforeMount 挂载前状态===============》');
var state = {
'el': this.$el,
'data': this.$data,
'message': this.message
}
console.log(this.$el);
console.log(state);
},
mounted: function () {
console.group('mounted 挂载结束状态===============》');
var state = {
'el': this.$el,
'data': this.$data,
'message': this.message
}
console.log(this.$el);
console.log(state);
},
beforeUpdate: function () {
console.group('beforeUpdate 更新前状态===============》');
var state = {
'el': this.$el,
'data': this.$data,
'message': this.message
}
console.log(this.$el);
console.log(state);
},
updated: function () {
console.group('updated 更新完成状态===============》');
var state = {
'el': this.$el,
'data': this.$data,
'message': this.message
}
console.log(this.$el);
console.log(state);
console.log('updated == ' + document.getElementsByTagName('p')[0].innerHTML);
},
beforeDestroy: function () {
console.group('beforeDestroy 销毁前状态===============》');
var state = {
'el': this.$el,
'data': this.$data,
'message': this.message
}
console.log(this.$el);
console.log(state);
},
destroyed: function () {
console.group(