一、 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()



Vuex 全局的定义变量:state ->view-> actions -> state(状态) 单向数据流。

九、 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
---------------------
【转载，仅作分享，侵删】
作者：Ryan Ji
原文：https://blog.csdn.net/qq_42451979/article/details/82924489
版权声明：本文为博主原创文章，转载请附上博文链接！

奈斯，感谢分享！