VUE学习笔记

之前写的一些VUE笔记的汇总,以前的随笔文章太松散了,自己回过头来看起来都不方便,就抽空把他们整理在了这一篇里。

生命周期

关于生命周期,官方有一张详细的生命周期图片,但是本人英文水平实在有限,就自行制作了一张:

VUE生命周期

其中钩子函数很重要(钩子函数:就是在某个阶段被触发的函数),需要方法在何时使用,可以参照图中标注添加到相应的钩子函数中。

组件传参

父组件向子组件传参:

子组件:

子组件

父组件:

父组件

子组件向父组件传参:

子组件:

1
2
3
4
5
6
7
8
9
<button @click="setData"></button>

methods: {
//定义一个方法,在子组件触发
setData: function(){
//向父组件传递,父组件通过funcName调用,传递this.data数据
this.$emit('getData',this.data);
}
}

父组件:

1
2
3
4
5
6
7
8
9
//组件上触发子组件定义的方法,触发父组件定义的方法传递数据
<component @getData="getComponent"></component>

methods: {
getComponent: function (data){
//将获取的数据传送到父组件的数据中
this.getSuccess = data
}
}

事件相关

阻止事件冒泡

由阻止冒泡事件引导,学习到事件触发时还可以这么写:

目前只用过click.stop效果拔群~ 有机会再尝试下其他的

1
2
3
4
5
6
7
8
9
10
11
12
<!-- 阻止单击事件冒泡 -->
<a @click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form @submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a @click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form @submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div @click.capture="doThis">...</div>
<!-- 只当事件在该元素本身(而不是子元素)触发时触发回调 -->
<div @click.self="doThat">...</div>

当需要在方法中获得当前标签时:

1
2
3
4

@click="func($event)"

$event.target就是当前被点击的标签

路由嵌套

为什么要用路由嵌套,官方文档的这张图还是挺形象的:

vur-router

当我只希望profile和posts变化的时候就需要用到路由的嵌套了。

关于详细的使用方法,请参考官方文档,我在这就写一下关键代码:

1
2
3
4
5
6
7
8
9
{
path: '/User/:id',
component: User,
children: [
{path: '',name: 'User', component: UserHome},
{path: 'Profile',name: 'Profile', component: Profile},
{path: 'Posts',name: 'Posts', component: Posts}
]
}

transition

官方过渡效果介绍

vue提供了内置组件transtion,用来包裹目标元素或组件,为其添加CSS动画过渡事件。

使用组件包裹的元素或组件会自动添加过渡CSS:

v-enter: 进入过渡开始状态,在元素被插入时生效,下一帧移除。

v-enter-active: 进入过渡的结束状态,在元素插入时生效,在完成进入transition后移除。

v-leave: 离开过渡开始状态,在元素离开时生效,下一帧移除。

v-leave-active: 离开过渡结束状态,在元素离开时生效,在完成离开transition后移除。

(PS:以上的v指的是transition的name属性值,CSS动画一般设置在enter-active与leave-active)

属性:

属性名 值类型 介绍
name String 用于生成过渡CSS的class名,例如:name=”str”就会生成str-enter/str-leave等class名,默认是v
appear Boolean 是否在初次渲染时使用过渡,默认false
css Boolean 是否使用CSS完成过渡样式,默认true,如果取消的话就只能通过javascript钩子完成过渡效果
type String 当被过渡的元素或组件,即使用transition又使用了animation时,需要type属性明确VUE监听哪一个,默认监听持续时间长的
mode String (当过渡的元素或组件需要新旧交替时)控制离开/进入转换的时序。可选值有’in-out’和’out-in’默认同步

当需要JS钩子写样式时,需要在transition中绑定JS方法:

1
2
3
4
5
6
7
8
9
10
<transition
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:after-enter="afterEnter"
v-on:enter-cancelled="enterCancelled"
v-on:before-leave="beforeLeave"
v-on:leave="leave"
v-on:after-leave="afterLeave"
v-on:leave-cancelled="leaveCancelled">
</transition>

使用vue-cli引用jquery

参考文章

首先npm安装jquery: npm install jquery

修改build/webpack.base.conf.js下的两处代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
module.exports = {
// 其他代码...
resolve: {
extensions: ['', '.js', '.vue'],
fallback: [path.join(__dirname, '../node_modules')],
alias: {
'src': path.resolve(__dirname, '../src'),
'assets': path.resolve(__dirname, '../src/assets'),
'components': path.resolve(__dirname, '../src/components'),

// webpack 使用 jQuery,如果是自行下载的
// 'jquery': path.resolve(__dirname, '../src/assets/libs/jquery/jquery.min'),
// 如果使用NPM安装的jQuery
'jquery': 'jquery'
}
},

// 增加一个plugins
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery"
})
],

至此,jQuery和$已经可以正常使用了。

mCustomScrollbar滚动插件的使用:

该插件没有npm安装方式,直接从github下载源码,然后引入:

import ‘./assets/libs/mCustomScrollbar/jquery.mCustomScrollbar.min.css’
import ‘./assets/libs/mCustomScrollbar/jquery.mCustomScrollbar.js’

引入完毕,给需要的修改的滚动条添加滚动样式:

1
2
3
4
5
mounted () {
$(".content").mCustomScrollbar({
axis:"y"
});
}

但是只有样式不能滚动,原因是这个插件还基于’jquery-mousewheel’插件

这个插件有npm安装方式,直接npm install jquery-mousewheel –save,然后再import ‘jquery-mousewheel’就行了

keep-alive

一个很神奇的标签:

<keep-alive>包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和<transition>一样,<keep-alive>是一个内置组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中。

当组件在<keep-alive> 内被切换,它的activateddeactivated这两个生命周期钩子函数将会被对应执行。主要用于保留组件状态或避免重新渲染。

用这个组件包裹住router-view路由视图,即可达到缓存路由中ajax信息的功效!

坚持原创技术分享,您的支持将鼓励我继续创作!