A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

一、 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
版权声明:本文为博主原创文章,转载请附上博文链接!

1 个回复

倒序浏览
奈斯,感谢分享!
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马