vue初学者必看——要点介绍

最新推荐文章于 2025-09-26 10:22:15 发布

原创最新推荐文章于 2025-09-26 10:22:15 发布 · 997 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

# Vue #Vue 数据双向绑定 #Vue中虚拟DOM #Vue的指令 #Vue中的组件

Vue 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了Vue.js框架的基础知识，包括数据双向绑定、虚拟DOM、指令、自定义指令、过滤器、组件及组件通信等核心概念。同时，探讨了如何利用Vue的methods、directives和filters进行高效开发，以及组件间的父子、兄弟通信方式。

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

back

七、守卫函数:

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

三大守卫函数:

全局 beforeEach

路由: beforeEnter

组件的钩子函数

组件: beforeRouterEnter、beforeRouterUpdated

beforeRouterLeave