快速上手vue必看——要点介绍

一、 Vue 数据双向绑定

//数据双向绑定:
 
Object.defineProperty(obj, 'name', {
 
Value: "",
 
Writable:"" ,
 
get() {
 
},
 
set(val) {
 
}
 
});

二、 Vue中虚拟DOM

虚拟DOM: 其实就是一个对象。

虚拟DOM2和虚拟DOM1进行比较，比较完成后（diff）DOCUMENT

三、Vue的指令

V-model V-text v-if v-show v-bind(? v-on(@) v-html

v-if v-show

四、 vue的methods

@click="xxxx"
 
methods: {
 
xxxx() {
 
this.xxxx
 
}

五、Vue的directives(自定义指令)

自定义指令: 一般有相同DOM操作的时候（v-focus）

1) 全局自定义
 
Vue.directive('focus', function(el, bindings) {
 
})
 
2）局部
 
directives: {
 
focus() {
 
}}

六、 Vue中的自定义filters(过滤器)

过滤器: 对数据再次处理，来达到你想要的数据。
 
Vue.filter('', function() {})
 
filters: {
 
my() {
 
}}

七、 Vue中的组件

组件就是一个对象
 
let top = {
 
template: 'html代码',
 
data() {
 
return {}
 
},
 
methods:{}
 
}
 
 
 
Vue.component()
 
components: {
 
top
 
}
}}

八、 组件通信

父传子 props 自定义属性

子传父 @event 自定义事件

兄弟 EventBus 事件车 $on $off $emit()

九、 Vue DOM操作

ref

this.$refs.refname

#<!-- 这个函数什么时候使用？

更新数据后需要使用DOM节点。

–>

this.list = [“2222”]

this.$nextTick(function() {

this.$refs.list

})
十、 内置组件

template
keep-alive
transtion
十一、 vue-router

1.npm install

``<!–

注册了两个全局组件

router-view

router-link
–>``
2.Vue.use(VueRouter)

3./:id 路由传参数

router-link :to="{name:’’, params: {id: ‘’}}"

router-link :to="{path:’’, query: {id: ‘’}}" 将变量值放入了url中

4.切割代码

import()=>’’

5.$route对象

$route.params

$route.meta (路由元)

6.$router对象

push

go

back

七、守卫函数:

即将进入相关路由时执行的函数。

三大守卫函数:

全局 beforeEach

路由: beforeEnter

组件的钩子函数

组件: beforeRouterEnter、beforeRouterUpdated

beforeRouterLeave