您的位置：首页 > Web前端 > Vue.js

slot 作用域插槽,属性验证,过渡效果 && 动画,VUE生命周期,过滤器

2019-06-26 19:45 656 查看

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

<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

<!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">
<Father></Father>
</div>

<template id="father">
<div>
<h3> 这里是父组件 </h3>
<Son :money = "money" :n = "n"></Son>
</div>
</template>
<template id="son">
<div>
<h3> 这里是子组件 </h3>
<p> 父亲给了我  {{ money + 100}}  钱  </p>
<p> num: {{ num }} </p>
</div>
</template>

</body>
</html>

<script
20000
src="../../lib/vue.js"></script>
<script>
/*
父子组件通信会使用到 props
*/

Vue.component('Father',{
template: '#father',
data () {
return {
money: 1000,
n: 400
}
}
})

Vue.component('Son',{
template: '#son',
props: {
// key: value   key就是我们接收的属性    value就是我们想要的这个属性的数据类型
'money': Number, // String   Boolean       Object...
'n': {
validator ( val ) { //属性验证函数，一般常用于条件的比较
// val 就是我们得到的数据
return  val > 300 //返回值是一个布尔值
}
},
'num': {
type: Number,
default:200
}
}
})

new Vue({
el: '#app'
})
</script>

案例:日期

<!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">
<p> {{ time | timeFilter('=')}} </p>
</div>
</body>
</html>

<script src="../../lib/vue.js"></script>
<script>
/*
Vue.filter( 过滤器的名称， 过滤器的回调函数 )
*/

Vue.filter('timeFilter',function ( val,type ) {
console.log( val )
//val 就是我们获得的数据
// return newVal   return 的结果就是格式化之后的新数据  return的结果就是页面呈现的结果

var date = new Date ( val )

// 2019-6-26   2019/6/26

return date.getFullYear() + type + ( date.getMonth() + 1 ) + type + date.getDate()
})

new Vue({
el: '#app',
data: {
time: Date.now()
}
})
</script>

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) {

// ...

}

案例:点击按钮，然一个p标签显示或隐藏（要有透明度的过渡）

我们使用Vue提供的 transition 组件时，vue会提供6（4）个类名，8个 钩子函数 给大家使用
钩子函数： 特定的时间（ 满足某一个条件 ） ， 就会自动触发的一个方法
一个过渡或是一个动画我们分为两个大阶段
进入,离开

<!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>
<style>
.yyb-enter-active, .yyb-leave-active {
transition: opacity 2s;
}
.yyb-enter, .yyb-leave-to /* .v-leave-active below version 2.1.8 */ {
opacity: 0;
}
</style>
</head>
<body>
<div id="app">
<button @click = "change"> 切换 </button>
<transition name = "yyb">
<p v-show = "flag"> 1903 </p>
</transition>
</div>
</body>
</html>

<script src="../../lib/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
flag: true
},
methods: {
change () {
this.flag = !this.flag
}
}
})
</script>

案例2:点击按钮，然一个p标签显示或隐藏（要有透明度的过渡）

<!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>
<link href="https://cdn.bootcss.com/animate.css/3.7.2/animate.css" rel="stylesheet">
</head>
<body>
<div id="app">
<button @click = "change"> 切换 </button>
<transition
enter-active-class = "animated slideInLeft"
leave-active-class = "animated slideOutLeft"
>
<p v-show = "flag"> 1903 </p>
</transition>
</div>
</body>
</html>

<script src="../../lib/vue.js"></script>
<script>
/*
引用第三方的 Animate.css文件
*/
new Vue({
el: '#app',
data: {
flag: false
},
methods: {
change () {
this.flag = !this.flag
}
}
})
</script>

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

生命周期（非常重要）

什么是生命周期？

vue中的生命周期指的是组件从创建到销毁一个过程，在这个过程中，我们在每一个特定的阶段会触发一些方法（这些方法具备一些功能），我们给这些方法起了个名字叫做（生命周期钩子函数/ 组件钩子）
为什么要学习生命周期？

因为我们想在生命周期钩子中实现项目功能，那么我们必须知道每一个钩子函数的具体用途
这个生命周期是谁的生命周期？

组件

过滤器

什么是过滤器？

用来格式化数据的一个函数 $ 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()
}
}
})

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

Vue的生命周期

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

初始化：

beforeCreate    ------------   相亲准备前（ 爸妈准备， 你根本是局外人 ）
1. 组件创建前触发，目的是为了组件的生命周期 和 组件中的事件做准备
2. 数据没有获得，真实dom也没有渲染出来
3. 可以进行数据请求，提供了一次数据修改的机会
4. 执行一次

created         ------------  爸妈告诉你了，这边有几个备选， 选一个吧
1. 组件创建结束
2. 数据得到了，真实dom没有渲染出来
3. 可以进行数据请求，提供了一次数据修改的机会
4. 执行了一次

beforeMount      -----------  互相加一个微信，先聊天
1. 组件挂载前
2. 任务： 判断el   判断 template
如果el没有，那么我们需要手动挂载，如果有，那么判断template
如果template有，那么进行render函数
如果template没有，那么通过 outerHTML 手动书写模板
3. 数据可以获得，但是真实dom还没有渲染
4. 可以进行数据请求，也提供了一次数据修改的机会
5. 执行一次

mounted         ------------  见面
1. 组件挂载结束
2. 数据获得了，真实dom也获得了
3. 可以进行数据请求，也就可以修改数据
4. 执行了一次
5. 可以进行真实dom的操作了（ 可以进行第三方库的实例化了 ）

运行中时

beforeUpdate
1. 更新前
2. 重新渲染 VDOM , 然后通过diff算法比较两次vdom,生成patch 补丁对象
3. 这个钩子函数更多的是内部进行一些操作，我们就不在多干预了
4. 可以触发多次

updated
1. 更新结束
2. 真实dom得到了，数据也得到了（ 更新后的 ）
3. 动态数据获取（  第三方库实例化  ）

综上总结推荐：*

1.数据请求一般写在created里面

2.第三方库实例化我们一般会往mounted中写

案例:

<!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></Hello>
</div>
<template id="hello">
<div>
<p> {{ msg }} </p>
</div>
</template>
</body>
</html>

Vue.component('Hello',{
template: '#hello',
data () {
return {
msg: 'hello 相亲了'
}
},
beforeCreate () {
console.log('1-beforeCreate')
console.log('data',this.msg)
console.log('真实dom',document.querySelector('p'))

// fetch('./data.json')
//   .then( res => res.json())
//   .then( data => this.msg = data )
//   .catch( error => console.log( error ))

},

created () {
console.log('2-created')
console.log('data',this.msg)
console.log('真实dom',document.querySelector('p'))
// fetch('./data.json')
// .then( res => res.json())
// .then( data => this.msg = data )
// .catch( error => console.log( error ))
},
beforeMount () {
console.log('3-beforeMount')
console.log('data',this.msg)
console.log('真实dom',document.querySelector('p'))
// fetch('./data.json')
// .then( res => res.json())
// .then( data => this.msg = data )
// .catch( error => console.log( error ))
},
// render() render函数作用是将  jsx 转换成 vdom 对象模型

mounted () {
console.log('4-mounted')
console.log('data',this.msg)
console.log('真实dom',document.querySelector('p'))
fetch('./data.json')
.then( res => res.json())
.then( data => this.msg = data )
.catch( error => console.log( error ))
}

})

new Vue({
el: '#app'
})

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

slot 作用域插槽,属性验证,过渡效果 && 动画,VUE生命周期,过滤器