Vue2系列(lqz)——slot插槽 (内容分发)、2 transition过渡、3 生命周期、4 swiper学习、5 自定义组件的封装、6 自定义指令、7 过滤器
文章目录
1 slot插槽 (内容分发)
a. 单个slot
b. 具名slot
*混合父组件的内容与子组件自己的模板-->内容分发
*父组件模板的内容在父组件作用域内编译；子组件模板的内容在子组件作用域内编译。
1.1 基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="box">
<!-- 不使用插槽写的aaa不会显示,使用就会显示-->
<child1>aaa</child1>
</div>
</body>
<script>
var bus = new Vue() //new一个vue的实例，就是中央事件总线
Vue.component('child1', {
template: `<div>
首页
<slot></slot>
</div>`,
})
var vm = new Vue({
el: '#box',
})
</script>
</html>
1.2 插槽应用场景1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="box">
<!-- 写了一个轮播组件，用户想轮播什么就放什么-->
<swiper>
<p v-for="data in 4">{{data}}</p>
</swiper>
<swiper>
<img :src="data" v-for="data in 5">
</swiper>
</div>
</body>
<script>
var bus = new Vue() //new一个vue的实例，就是中央事件总线
Vue.component('swiper', {
template: `<div>
<slot></slot>
</div>`,
})
var vm = new Vue({
el: '#box',
})
</script>
</html>
1.3 插槽应用场景2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="box">
<!--通过插槽实现在一个组件中控制另一个组件的显示隐藏-->
<navbar> <button @click="isShow=!isShow">点我显示隐藏</button></navbar>
<swiper v-if="isShow"></swiper>
</div>
</body>
<script>
Vue.component('navbar', {
template: `<div>
navbar
<slot></slot>
</div>`,
})
Vue.component('swiper', {
template: `<div>
<p>111</p>
<p>222</p>
<p>333</p>
</div>`,
})
var vm = new Vue({
el: '#box',
data:{
isShow:true
}
})
</script>
</html>
1.4 具名插槽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="box">
<!-- 具名插槽，把p标签给a插槽，div标签给b插槽-->
<navbar>
<p slot="a">pppp</p>
<div slot="b">bbbb</div>
</navbar>
</div>
</body>
<script>
Vue.component('navbar', {
template: `<div>
<slot name="a"></slot>
navbar
<slot name="b"></slot>
</div>`,
})
var vm = new Vue({
el: '#box',
data:{
}
})
</script>
</html>
2 transition过渡
Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。
(1)单元素/组件过渡 * css过渡 * css动画 * 结合animate.css动画库
(2) 多个元素过渡(设置key)
*当有相同标签名的元素切换时，需要通过 key 特性设置唯一的值来标记以让 Vue 区分它们，否则 Vue 为了效率只会替换相同标签内部的内容。
mode:in-out ; out-in
(3)多个组件过渡
(4)列表过渡(设置key)
*<transition-group>不同于 transition， 它会以一个真实元素呈现：默认为一个 <span>。你也可以通过tag 特性更换为其他元素。
* 提供唯一的 key 属性值
3 生命周期
i. 生命周期各个阶段https://cn.vuejs.org/v2/guide/instance.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%9B%BE%E7%A4%BA
ii. 生命周期钩子函数的触发条件与作用
4 swiper学习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<!-- <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css"> -->
<!--<script src="https://unpkg.com/swiper/swiper-bundle.js"> </script> -->
<style>
.swiper-container {
width: 80%;
height: 600px;
}
</style>
</head>
<body>
<div id="box">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="data in datalist">
{{data}}
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1608145297276&di=dd396caeaa0bb6a2a50609a109cd3120&imgtype=0&src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2Fattachments2%2Fday_110915%2F1109151356c0717d7e6a91e985.jpg" alt="">
</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- 如果需要滚动条 -->
<div class="swiper-scrollbar"></div>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
datalist: [],
},
mounted() {
setTimeout(() => {
this.datalist = ['111', '222', '333']
}, 2000)
//轮播图初始化不是放在这，因为数据变化和dom更新是异步的
//需要放在updated中
},
updated() {
var mySwiper = new Swiper('.swiper-container', {
// direction: 'vertical', // 垂直切换选项
loop: true, // 循环模式选项
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 如果需要滚动条
scrollbar: {
el: '.swiper-scrollbar',
},
})
},
})
</script>
</html>
5 自定义组件的封装
自定义封装swiper组件（基于swiper） 注意： 防止swipe初始化过早
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<!-- <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css"> -->
<!--<script src="https://unpkg.com/swiper/swiper-bundle.js"> </script> -->
<style>
.swiper-container {
width: 80%;
height: 600px;
}
</style>
</head>
<body>
<div id="box">
{{name}}
<!-- diff算法检测到key变化了，会把swipper删掉，重新创建，触发组件的mounted执行，完成swipper实例化，不在updated中初始化-->
<!-- 子组件的mounted在根组件的mounted之前执行，所有组件挂载完成后，根组件才挂载-->
<swipper :key="datalist.length">
<!-- <swipper>-->
<div class="swiper-slide" v-for="data in datalist">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1608145297276&di=dd396caeaa0bb6a2a50609a109cd3120&imgtype=0&src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2Fattachments2%2Fday_110915%2F1109151356c0717d7e6a91e985.jpg" alt="">
</div>
</swipper>
</div>
</body>
<script>
Vue.component('swipper',{
template:`
<div class="swiper-container">
<div class="swiper-wrapper">
<slot></slot>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<div class="swiper-scrollbar"></div>
</div>
`,
mounted(){
console.log('子组件mounted')
var mySwiper = new Swiper('.swiper-container', {
// direction: 'vertical', // 垂直切换选项
loop: true, // 循环模式选项
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 如果需要滚动条
scrollbar: {
el: '.swiper-scrollbar',
},
})
},
// updated(){//如果跟组件中有数据变化，就会导致swipper组件触发update(vm.name='ss'测试一下),导致多次执行，影响效率，所以使用key+mounted方式
// console.log('子组件update')
// var mySwiper = new Swiper('.swiper-container', {
// // direction: 'vertical', // 垂直切换选项
// loop: true, // 循环模式选项
// // 如果需要分页器
// pagination: {
// el: '.swiper-pagination',
// },
// // 如果需要前进后退按钮
// navigation: {
// nextEl: '.swiper-button-next',
// prevEl: '.swiper-button-prev',
// },
//
// // 如果需要滚动条
// scrollbar: {
// el: '.swiper-scrollbar',
// },
//
// })
// }
})
var vm = new Vue({
el: '#box',
data: {
name:'lqz',
datalist: [],
},
mounted() {
setTimeout(() => {
this.datalist = ['111', '222', '333']
}, 2000)
//轮播图初始化不是放在这，因为数据变化和dom更新是异步的
//需要放在updated中
},
})
</script>
</html>
6 自定义指令
(1)自定义指令介绍 directives
(2)钩子函数* 参数 el,binding,vnode(vnode.context)* bind,inserted,update,componentUpdated,unbind
(3)函数简写
(4)自定义指令-轮播
*inserted 插入最后一个元素时调用(vnode.context.datalist.length-1)
*this.$nextTick()
6.1 基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="box">
<div v-mystyle>divdiv我是div</div>
</div>
</body>
<script>
//自定义指令，以后用的时候必须 v-指令名，即v-mystyle
Vue.directive('mystyle',{
//当被改指令修饰的标签插入到dom中会执行
inserted(){
console.log('我执行了')
},
})
var vm = new Vue({
el: '#box',
data: {
},
})
</script>
</html>
6.2 让所有使用自定义指令的标签背景都变红色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="box">
<div v-mystyle>divdiv我是div</div>
<p v-mystyle>我是p，用了自定义指令，会变红</p>
</div>
</body>
<script>
//自定义指令，以后用的时候必须 v-指令名，即v-mystyle
Vue.directive('mystyle',{
//当被改指令修饰的标签插入到dom中会执行
inserted(el){
//el就是被修饰标签的dom
console.log(el)
//所以我们直接操作dom
el.style.background='red'
},
})
var vm = new Vue({
el: '#box',
data: {
},
})
</script>
</html>
6.3 用户指定自定义指令的背景色,修改变量，背景变化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="box">
<!--放js的变量，所以用'red'-->
<div v-mystyle="'red'">divdiv我是div</div>
<p v-mystyle="mycolor">我是p，用了自定义指令，会变红</p>
</div>
</body>
<script>
//自定义指令，以后用的时候必须 v-指令名，即v-mystyle
Vue.directive('mystyle',{
//当被改指令修饰的标签插入到dom中会执行
inserted(el,input){ //该方法，如果更新变量mycolor，并不会变化，所以需要重写update方法 vm.mycolor='yellow'
//el就是被修饰标签的dom
console.log(el)
console.log(input) //input的value属性是传入的变量
//所以我们直接操作dom
// el.style.background='red'
el.style.background=input.value
},
update(el,input){
el.style.background=input.value
}
})
var vm = new Vue({
el: '#box',
data: {
mycolor:'green',
},
})
</script>
</html>
6.4 通过指令控制swipper初始化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<!-- <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css"> -->
<!--<script src="https://unpkg.com/swiper/swiper-bundle.js"> </script> -->
<style>
.swiper-container {
width: 80%;
height: 600px;
}
</style>
</head>
<body>
<div id="box">
<div class="swiper-container">
<div class="swiper-wrapper">
<!--v-comp把当前索引值和数组总长度传入，如果索引等于数组总长度减一说明都加载完了，完成swipper初始化-->
<div class="swiper-slide" v-for="(data,i) in datalist" v-comp="{index:i,length:datalist.length}">
{{data}}
</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- 如果需要滚动条 -->
<div class="swiper-scrollbar"></div>
</div>
</div>
</body>
<script>
Vue.directive('comp', {
inserted(el, input) {
console.log(input.value)
//只要校验到传入的是最后一个插入了，就初始化swipper
if (input.value.index === input.value.length - 1) {
var mySwiper = new Swiper('.swiper-container', {
// direction: 'vertical', // 垂直切换选项
loop: true, // 循环模式选项
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 如果需要滚动条
scrollbar: {
el: '.swiper-scrollbar',
},
})
}
},
})
var vm = new Vue({
el: '#box',
data: {
datalist: [],
},
mounted() {
setTimeout(() => {
this.datalist = ['111', '222', '333']
}, 2000)
},
})
</script>
</html>
7 过滤器
https://cn.vuejs.org/v2/guide/filters.html
ele图片转换，猫眼电影图片转换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="js/vue.js"></script>
</head>
<body>
<div id="box">
<!--猫眼数据：https://m.maoyan.com/#movie-->
<ul>
<li v-for="data in datalist">
<h2>{{data.nm}}</h2>
<br>
<!-- <img :src="data.img" alt="">-->
<!-- <img :src="changePath(data.img)" alt="">-->
<!-- 过滤器-->
<img :src="data.img | myChange" alt="">
</li>
</ul>
</div>
</body>
<script>
//定义过滤器
Vue.filter('myChange',function (url) {
return url.replace('w.h','128.180')
})
var vm = new Vue({
el: '#box',
data: {
datalist: [],
},
methods:{
changePath(url){
return url.replace('w.h','128.180')
}
},
mounted() {
//http://p0.meituan.net/w.h/movie/b16c1c0d5ac9e743c6ffbbf7eba900522725807.jpg
//http://p0.meituan.net/128.180/movie/b16c1c0d5ac9e743c6ffbbf7eba900522725807.jpg
axios.get("./json/test.json").then(res => {
console.log(res.data.coming) // axios 自动包装data属性 res.data
this.datalist = res.data.coming
}).catch(err => {
console.log(err);
})
},
})
</script>
</html>
Vue2系列(lqz)——slot插槽 (内容分发)、2 transition过渡、3 生命周期、4 swiper学习、5 自定义组件的封装、6 自定义指令、7 过滤器的更多相关文章
- Vue slot插槽内容分发
slot插槽使用 使用场景,一般父组件中又一大段模板内容需要运用到子组件上.或者更加复杂的,子组件需要运用到父组件大段模板内容,而子组件却不知道挂载的内容是什么.挂载点的内容是由父组件来决定的. Sl ...
- Vue2.0 【第二季】第4节 Vue的生命周期（钩子函数）
目录 Vue2.0 [第二季]第4节 Vue的生命周期(钩子函数) 第4节 Vue的生命周期(钩子函数) Vue2.0 [第二季]第4节 Vue的生命周期(钩子函数) 第4节 Vue的生命周期(钩子函 ...
- asp.net C#母版页和内容页事件排版载入顺序生命周期
asp.net C#母版页和内容页事件排版载入顺序生命周期 关于ASP页面Page_Load发生在事件之前而导致的问题已经喜闻乐见,对于问题的解释也非常全面.可是怎样解决这个问题则较少有人说明,我就再 ...
- 组件(4)：使用slot进行内容分发
组件的作用域(一) 父组件模板的内容在父组件作用域内编译:子组件模板的内容在子组件作用域内编译. 父子组件的编译相互独立,编译时只能使用各自作用域中的属性和方法,例如,你不可以在父组件模板内,将一个指 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十九║Vue基础: 样式动态绑定+生命周期
回顾 哈喽大家好,前后端分离系列文章又开始了,今天周一,还是感谢大家花时间来观看我写的博客,周末呢,没有写文章,但是也没有闲着,主要是研究了下遗留问题,看过之前文章的应该知道,之前的在AOP使用Red ...
- [易学易懂系列|rustlang语言|零基础|快速入门|（5）|生命周期Lifetime]
[易学易懂系列|rustlang语言|零基础|快速入门|(5)] Lifetimes 我们继续谈谈生命周期(lifttime),我们还是拿代码来说话: fn main() { let mut a = ...
- vue2.0使用slot插槽分发内容
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- Vue系列：Slot 插槽的使用范例
插槽对于自定义的组件开发来说,是十分强大的功能.这篇主要做个简单梳理 插槽可以分3种: 1.简单插槽 2.具名插槽 3.作用域插槽
- wepy - 与原生有什么不同（slot插槽）
wepy官方文档是这样介绍的 简单描述就是: index.wpy:子组件 panel.wpy:父组件 1.slot是内容分发的占位符 2.slot父组件在子组件使用时,名称必须一致 3.slot子组件 ...
- 前端MVC Vue2学习总结（二）——Vue的实例、生命周期与Vue脚手架（vue-cli）
一.Vue的实例 1.1.创建一个 Vue 的实例 每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({ // 选项 }) 虽然没有完全遵循 ...
随机推荐
- GPU技术在大规模计算和并行计算中的应用和挑战
目录 1. 引言 2. 技术原理及概念 3. 实现步骤与流程 4. 应用示例与代码实现讲解 5. 优化与改进 GPU 技术在大规模计算和并行计算中的应用和挑战 随着计算机硬件的不断发展和计算能力的提高 ...
- 聊聊 RocketMQ 主从复制
提到主从复制,我们可能立马会联想到 MySQL 的主从复制. MySQL 主从复制是 MySQL 高可用机制之一,数据可以从数据库服务器主节点复制到一个或多个从节点. 这篇文章,我们聊聊 Rocket ...
- 1、笔记本刷ubuntu，安装饥荒服务器
目录 笔记本刷ubuntu,安装饥荒服务器 一.准备 二.笔记本刷机 1.制作Ubuntu server U盘启动盘 2.刷机 3.设置电源不休眠 三.安装饥荒服务器 四.最后说下网络 笔记本刷ubu ...
- 【Shell】ps 命令
ps 命令 Linux ps (英文全拼:process status)命令用于显示当前进程的状态,类似于 windows 的任务管理器. 1. ps 常用的命令 ps -aux #显示所有进程信息 ...
- 【转载】Linux虚拟化KVM-Qemu分析（十）之virtio驱动
原文信息 作者:LoyenWang 出处:https://www.cnblogs.com/LoyenWang/ 公众号:LoyenWang 版权:本文版权归作者和博客园共有 转载:欢迎转载,但未经作者 ...
- modulemap的使用方法
modulemap的作用 modulemap 文件是用来解决 C,Object-C,C++ 代码在 Swift 项目中集成的问题的. 在 Swift 项目中,如果需要使用 C,Object-C 或 ...
- 仪酷LabVIEW AI视觉工具包及开放神经网络交互工具包常见问题解答
前言 哈喽,各位朋友,好久不见~ 之前给大家分享了基于LabVIEW开发的AI视觉工具包及开放神经网络交互工具包,不少朋友私信说在安装和使用过程中会遇到一些问题,今天我们就集中回复一下大家问到最多的问 ...
- Flask工厂模式蓝图使用Celery实例【亲测可用，已应用于项目中】
单一模式运行Celery在官方文档中已经贴出范例代码,这里我们不过多介绍. 在使用Flaks编写大型项目时,使用工厂模式的好处显而易见.因在Celery4.x以上版本已经抛弃了init_app方法,所 ...
- SQL Server 内存占用较高 - 清除缓存 或 设置内存最大占用值
SQL Server对服务器内存的使用策略是用多少内存就占用多少内存,只用在服务器内存不足时,才会释放一点占用的内存,所以SQL Server 服务器内存往往会占用很高 查看内存状态: DBCC Me ...
- 如何正确使用 ThreadLocal，你真的用对了吗？
引言: 当多线程访问共享且可变的数据时,涉及到线程间同步的问题,并不是所有时候,都要用到共享数据,所以就需要ThreadLocal出场了. ThreadLocal又称线程本地变量,使用其能够将数据封闭 ...