Vue-5
Posted xxswkl-sn
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue-5相关的知识，希望对你有一定的参考价值。
slot（插槽）：
<div id="app">
<Hello>
<header> 头部 </header>
<section> 内容 </section>
<footer> 底部 </footer>
</Hello>
</div>
<template id="hello">
<div>
hello
<slot></slot>
</div>
</template>Vue.component('Hello', {
template: '#hello'
})
new Vue({
el: '#app'
})具名插槽 ：
<div id="app">
<Hello>
<header slot = "header"> 头部 </header>
<section slot = "content"> 内容 </section>
<footer slot = "footer"> 底部 </footer>
</Hello>
</div>
<template id="hello">
<div>
<slot name = "header"></slot>
<slot name = "content"></slot>
hello
<slot name = "footer"></slot>
</div>
</template> Vue.component( 'Hello', {
template: '#hello'
})
new Vue({
el: '#app'
})slot作用：可以让我们在组件中书写内容
transition-动画 ：
vue中实现过渡或是动画一共提供了这样四种形式：
- 在 CSS 过渡和动画中自动应用 class （自己写css3动画）
- 可以配合使用第三方 CSS 动画库，如 Animate.css （ 别人写好了类名，我们用）
- 在过渡钩子函数中使用 javascript 直接操作 DOM （ 自己用原生js来写动画）
可以配合使用第三方 JavaScript 动画库，如 Velocity.js （ 用别人写好的动画库）
注意：
- vue只要一使用transition组件就会自动添加6个类名 和 8 个钩子函数
- transition组件如果有name选项，就可以将类名 v- 换成 ‘name‘- 类名
- 使用第三方的css过渡库 animate.css
动态组件：
- 动态组件是vue内部提供了一个叫做component的组件，这个组件身上可以通过绑定is属性来进行 组件的切换
- keep-alive组件可以进行组件的内容缓存，将组件的内容存入浏览器缓存中，这样可以大大的节省街切换的事件
- keep-alive 和 component动态组件两者常常一起搭配使用
过滤器
- vue 1.x内部提供提供了 10 个过滤器， 这10个过滤器是针对 数字 纸币符号 日期 大小写 小数位数等的格式化（格式化数据的一个工具）
- 过滤器一样也有两种声明形式
- 全局声明
- Vue.filter(过滤器名称，回调函数) 回调函数中有一个参数value
- value值就表示的是格式化数据的值
- 局部声明
- 全局声明
new Vue({
filters: {
'过滤器名称'： function( value ){
return
}
}
})- 过滤器的回调函数必须有返回值
- 使用：我们用一个叫做管道符的来使用过滤器
<div id="app">
<p> {{ time | date('*') }} </p>
<p> {{ time | time('*') }} </p>
</div>
</body> // 全局声明
Vue.filter( 'date', function ( val,type ) {
var date = new Date( val )
return `￥${ date.getFullYear()} ${ type } ${ date.getMonth() + 1 } ${ type } ${ date.getDate() }`
})
new Vue({
el: '#app',
data: {
time: Date.now()
},
// 局部声明
filters: {
'time': function( val,type ){
var date = new Date( val )
return `￥${ date.getFullYear()} ${ type } ${ date.getMonth() + 1 } ${ type } ${ date.getDate() }`
}
}
})生命周期 ：
- 什么是生命周期呢？
- 当前组件在创建到销毁经历的一系列过程，称之为生命周期
- 生命周期的分为几个阶段？每个阶段有哪些钩子函数
- 生命周期分为3个阶段，这三个阶段分别是： 初始化 、 运行中 、 销毁
- 初始化阶段：有4个钩子函数 ， 触发条件是自动的
- beforeCreate
- 组件即将创建，进行组件事件和生命周期的初始化
- 项目中一般不使用
- 有的开发者也会在这里进行数据请求
- created
- 组件创建完成
- 项目中：
- 异步请求接口数据
- 数据修改
- beforeMount
- 组件即将挂载
- 判断根实例组件是否有el选项，如果没有，那么手动挂载，判断根实例组件中的其他子组件是否有template选项，如果没有，那么使用outerhtml插入
- 项目中：
- 异步请求接口数据
- 数据修改
- mounted
- 组件挂载结束
- 使用真实DOM替换VDOM
- 项目中
- 异步请求接口数据
- 数据修改
- 真实DOM操作可以了( Vue一般情况下不要直接操作真实DOM, 一般可以进行第三方库的实例化（静态数据渲染来的） )
- beforeCreate
- 初始化阶段：有4个钩子函数 ， 触发条件是自动的
- 总结： 初始化过程中在项目中使用
- 数据请求：created
- DOM操作： mounted
- 数据修改： beforeMount created mounted
- 运行中阶段：有2个钩子函数 ： 触发条件是： 当data选项中的数据发生改变时
- beforeUpdate：
- 内部操作 ： vdom生成和diff的对比
- 我们可以不使用
- updated
- Rdom已经生成，可以进行异步数据请求得到的dom渲染的第三方库实例化
- 销毁阶段： 有2个钩子函数
- beforeDestory: 组件即将销毁，准备调用 $destroy() 方法
- destoryed： 组件销毁结束
- 总结：
- 这两个钩子函数没有什么区别，功能很相似
- 项目中：这两个钩子函数都可以用来做善后,把一些计时器，第三方库实例化出来的实例
- 组件销毁的两种方式：
- 使用$destroy()方法（内部销毁）
- 缺点： 会将组件的模板也保留下来 - 使用开关销毁（外部销毁）
- v-if（ 这种类型的销毁不会留有模板） - 有一个钩子函数可以不写，这个钩子函数就是我们 render 函数
- 钩子函数： 钩子函数就是options配置项中的一个方法，在特定的触发条件（ 时机 ）下会自动触发
- 除了根实例组件以外，其他的组件中的数据项 data 必须是一个函数，而且这个函数必须返回一个对象
- 为什么是函数呢？
- 原因：我们希望组件的数据是独立的，有一定作用域的
- 为什么返回值是对象？
- 原因： 是为了符合 数据驱动 原理设计，让observer将data选项中的数据设置 getter 和 setter
<body>
<div id="app">
<button @click = "flag = false"> 销毁 </button>
<Hello v-if = "flag"></Hello>
</div>
<template id="hello">
<div>
<input type="text" v-model = "money">
<h3> {{ money }} </h3>
</div>
</template>
</body> Vue.component( 'Hello',{
template: '#hello',
data () { //除了根式
return {
money: 2000
}
},
//初始化
beforeCreate () {
/*
这个阶段：组件创建前
data data选项中的数据获取不到
RDOM 拿不到
项目中： 没什么用
但是这个阶段是一个对事件和生命周期的准备阶段，也是必不可少的
*/
console.log('1-beforeCreate')
console.log( 'data', this.money )
console.log( '真实DOM',document.querySelector('h3') )
},
created () { // 组件创建结束
/*
这个阶段：
data data选项中的数据获到了
RDOM 拿不到
项目中：
数据的修改
异步数据请求
*/
this.money = 20000
console.log('2-created')
console.log( 'data', this.money )
console.log( '真实DOM',document.querySelector('h3') )
},
beforeMount () { //组件即将挂载
/*
这个阶段：
data data选项中的数据获到了
RDOM 拿不到
项目中：
数据的修改
异步数据请求
*/
this.money = 10000000
console.log('3-beforeMount')
console.log( 'data', this.money )
console.log( '真实DOM',document.querySelector('h3') )
},
mounted () { //组件挂载结束了
/*
这个阶段：
data: 可以获得数据
RDOM: 拿到了
项目中：
数据修改
异步数据请求
真实DOM操作可以了( Vue一般情况下不要直接操作真实DOM, 一般可以进行第三方库的实例化（静态数据渲染来的） )
*/
this.time = setInterval( () => {
console.log( 1 )
},1000)
document.querySelector('h3').style.background = 'red'
console.log('4-mounted')
console.log( 'data', this.money )
console.log( '真实DOM',document.querySelector('h3') )
},
// ------------------------------------运行中---------------------
beforeUpdate () { //表示组件即将更新 vdom --diff--> vdom的不同（patch对象）
/*
这个阶段：
data: 拿到了
RDOM： 获得
这个阶段进行的是vdom的生成和diff算法的对比，都是内部进行的，我们在项目中可以不使用
*/
console.log(' 1- beforeUpdate ')
console.log( 'data', this.money )
console.log( '真实DOM',document.querySelector('h3') )
},
updated () { // 组件更新结束 ， 通过render函数将vdom渲染成了真实dom,然后驱动vue进行视图更新
/*
这个阶段：
动态数据的渲染，进行dom操作（ 第三方库的实例化 ）
*/
document.querySelector('h3').style.background = 'blue'
console.log(' 2- updated ')
console.log( 'data', this.money )
console.log( '真实DOM',document.querySelector('h3') )
},
// --------------------------------------销毁 -------------
beforeDestroy () {
console.log( 'beforeDestroy ')
},
destroyed () {
clearInterval( this.time )
console.log( 'destroyed')
}
})
new Vue({
// el: '#app',
data: {
msg: 'hello 1902',
flag: true
}
}).$mount('#app')以上是关于Vue-5的主要内容，如果未能解决你的问题，请参考以下文章