Vue进阶

最新推荐文章于 2022-06-21 15:40:25 发布

Taylor Lin

最新推荐文章于 2022-06-21 15:40:25 发布

阅读量112

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/taylor_lin/article/details/94021245

版权

笔记专栏收录该内容

21 篇文章 0 订阅

订阅专栏

slot 作用域插槽

旧： slot-scope

使用流程
在组件的模板中书写slot插槽，并将当前组件的数据通过 v-bind 绑定在 slot标签上
在组件使用时，通过slot-scope = “slotProp” 来接收slot标签身上绑定的数据
通过 slotProp.xxx 就可以进行使用了

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<Hello>
<template slot = "default" slot-scope = "slotProp">
<p> {{ slotProp.msg }} </p>
</template>
</Hello>
</div>
<template id="hello">
<div>
<slot name = "default" :msg = "msg"></slot>
</div>
</template>
</body>
<script src="../../lib/vue.js"></script>
<script>
Vue.component('Hello',{
template: '#hello',
data () {
return {
msg: 'hello'
}
}
})
new Vue({
el: '#app'
})
</script>
</html>

新： v-slot

<div id="app">
<Hello>
<template v-slot:default = "slotProp">
{{ slotProp.msg }}
</template>
</Hello>
</div>
<template id="hello">
<div>
<slot name = "default" :msg = "msg"></slot>
</div>
</template>

new Vue({
components: {
'Hello': {
template: '#hello',
data () {
return {
msg: 'hello'
}
}
}
}
}).$mount('#app')

属性验证

案例：价格的增加，拿到的数据必须做验证 309 + 10 319 30910

props: [ ‘msg’ ] 没有进行验证，知识单纯的接收了一个父组件传递来的数据
props: { attr: attrType } 进行普通属性验证
props: { type: typeType, default: value } 这里的default是为这个属性设置初始值
props: { validator ( val ) { return boolean }} 可以进行一个条件的比较
注意：除了以上形式的属性验证以外，将来工作中还可能遇到的是第三方封装的类库 vue-validate vee-validate …

过渡效果 && 动画

使用形式

在 CSS 过渡和动画中自动应用 class
可以配合使用第三方 CSS 动画库，如 Animate.css 【要求】
在过渡钩子函数中使用 JavaScript 直接操作 DOM
可以配合使用第三方 JavaScript 动画库，如 Velocity.js

beforeEnter: function (el) {
// ...
},
// 当与 CSS 结合使用时
// 回调函数 done 是可选的
enter: function (el, done) {
// ...
done()
},
afterEnter: function (el) {
// ...
},
enterCancelled: function (el) {
// ...
},
// --------
// 离开时
// --------
beforeLeave: function (el) {
// ...
},
// 当与 CSS 结合使用时
// 回调函数 done 是可选的
leave: function (el, done) {
// ...
done()
},
afterLeave: function (el) {
// ...
},
// leaveCancelled 只用于 v-show 中
leaveCancelled: function (el) {
// ...
}

过渡模式 mode
in-out 先进入在离开
out-in 先离开在进入

生命周期

什么是生命周期？
vue中的生命周期指的是组件从创建到销毁一个过程，在这个过程中，我们在每一个特定的阶段会触发一些方法（这些方法具备一些功能），我们给这些方法起了个名字叫做（生命周期钩子函数/ 组件钩子）
为什么要学习生命周期？
因为我们想在生命周期钩子中实现项目功能，那么我们必须知道每一个钩子函数的具体用途
这个生命周期是谁的生命周期？
组件
项目中生命周期如何书写（功能）

Vue的生命周期分为三个阶段，分别为：初始化，运行中，销毁，一共8个钩子函数
注意：生命周期钩子函数不允许写成箭头函数
初始化：
beforeCreate

组件创建前触发，目的是为了组件的生命周期和组件中的事件做准备
数据没有获得，真实dom也没有渲染出来
可以进行数据请求，提供了一次数据修改的机会
执行一次
created
组件创建结束
数据得到了，真实dom没有渲染出来
可以进行数据请求，提供了一次数据修改的机会
执行了一次
beforeMount
组件挂载前
任务：判断el 判断 template
如果el没有，那么我们需要手动挂载，如果有，那么判断template
如果template有，那么进行render函数
如果template没有，那么通过 outerHTML 手动书写模板
数据可以获得，但是真实dom还没有渲染
可以进行数据请求，也提供了一次数据修改的机会
执行一次
mounted
组件挂载结束
数据获得了，真实dom也获得了
可以进行数据请求，也就可以修改数据
执行了一次
可以进行真实dom的操作了（可以进行第三方库的实例化了）
综上总结：
兵哥推荐：
数据请求一般写在created里面
第三方库实例化我们一般会往mounted中写

-------------------------- 运行中------------------------------
触发条件：数据更新
beforeUpdate

更新前
重新渲染 VDOM , 然后通过diff算法比较两次vdom,生成patch 补丁对象
这个钩子函数更多的是内部进行一些操作，我们就不在多干预了
可以触发多次
updated
更新结束
真实dom得到了，数据也得到了（更新后的）
动态数据获取（第三方库实例化）

过滤器

什么是过滤器？用来格式化数据的一个函数 $ 10 ‘$’ + price 日期的格式化
vue 1.x 版本借鉴了 angular , 提供 10 个过滤器，包括有：日期小数点位数保留货币大小写等
Vue 2.x 废弃了这 10个过滤器，但是它提供了自定义过滤器的方式
使用方式
全局定义过滤器\

<p> {{ time | timeFilter('/)}} </p>

Vue.filter('timeFilter',function ( val,type ) {
console.log( val )
//val 就是我们获得的数据
// return newVal return 的结果就是格式化之后的新数据 return的结果就是页面呈现的结果
var date = new Date ( val )
// 2019-6-26
return date.getFullYear() + type + ( date.getMonth() + 1 ) + type + date.getDate()
})

局部定义过滤器

new Vue({
el: '#app',
data: {
time: Date.now()
},
filters: { //过滤器的配置项
'timeFilter': function ( val,type ){
var date = new Date ( val )
return date.getFullYear() + type + ( date.getMonth() + 1 ) + type + date.getDate()
}
}
})

过滤器要想获得我们的数据，要通过一个叫做 ‘管道符 | ’ 来获取数据
过滤器是对已经有的数据进行格式化，也就是必须先有数据，在去格式

Taylor Lin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue进阶

slot 作用域插槽旧： slot-scope使用流程在组件的模板中书写slot插槽，并将当前组件的数据通过 v-bind 绑定在 slot标签上在组件使用时，通过slot-scope = “slotProp” 来接收slot标签身上绑定的数据通过 slotProp.xxx 就可以进行使用了<!DOCTYPE html><html lang="en">...
复制链接

扫一扫