共计 6319 个字符,预计需要花费 16 分钟才能阅读完成。
vue 插件的举荐装置
vuetur 关键字高亮 语法错误检测
vue 2snippets 语法提醒
官网地址
v-on 罕用的修饰符
- @事件名.stop 阻止冒泡
- @事件名.prevent 阻止默认事件
- @keyup.enter 回车触发 针对 input
v-if v-else-if v-else 指令
v-if="一句话表达式(最初转换成 boolean 值,如果为真,则进行该语句所在标签渲染,如果为假则不渲染,该标签将不存在)"
v-else-if
和 v-if
是一样用法,它是v-if
不成立状况下才会走到 v-else-if
这里来 v-else前面毋庸跟任何语句,当后面
v-if 和
v-if-else\` 都不成立时,它就会执行,当后面任何一个执行渲染,它就不执行
对于 computed
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<title>Document</title> | |
</head> | |
<!-- 计算属性 | |
应用场景:依赖一个或者多个值产生一个新的值 | |
1: 放到 computed:{} | |
2: 实质是一个函数 return 一个值 | |
3: 它 return 的值就是该计算属性的值 | |
4:它可当属性应用 | |
--> | |
<!-- 计算属性传参 --> | |
<body> | |
<div id='app'> | |
<p>{{msg}}</p> | |
<p>{{msg.split("").reverse().join("")}}</p> | |
<!-- 这里的 getMsg 等效于 "xxx" --> | |
<p>{{getMsg("!")}}</p> | |
<!-- <p>xxx</p> --> | |
</div> | |
<script src='./vue.js'></script> | |
<script> | |
new Vue({ | |
el: '#app', | |
data: { | |
msg: "abcdefg", | |
money: 10 | |
}, | |
computed: {getMsg() { | |
// return "xxx" | |
return function (info) {return this.msg.split("").reverse().join("") + info | |
} | |
} | |
} | |
}) | |
</script> | |
</body> | |
</html> |
transition 单元素动画
动画体要用 transition 包住,name 属性 定义名称,该值就是前面 css 的一个前缀
.xxx-enter-active 进入动画的执行体 | |
.xxx-leave-active 来到动画的执行体 | |
.xxx-enter 从什么状态到失常状态 | |
.xxx-leave-to 从失常状态到什么状态 |
/* 进入动画的执行体 */ | |
.xxx-enter-active {transition: all 2s} | |
/* 来到动画的执行体 */ | |
.xxx-leave-active {transition: all 2s;} | |
/* 进入前状态:心愿从什么状态变到失常状态 */ | |
.xxx-enter { | |
opacity: 0; | |
transform: translateX(-400px); | |
} | |
/* 来到时的状态,心愿从失常状态变到一个什么状态 */ | |
.xxx-leave-to { | |
opacity: 0; | |
transform: translateX(400px); | |
} | |
// 用 if show、管制 | |
<button @click="bol=!bol"> 点我啊 </button> | |
<transition name="xxx"> | |
<div class="box" v-if="bol"></div> | |
</transition> |
单元素动画和 animation 联合
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<title>Document</title> | |
</head> | |
<!-- 单元素动画与 animation 联合 | |
条件: v-if/v-show | |
办法: | |
1:transition 包住 | |
2:transition 上定义一个 name="xxx" xxx 就是前面 css 的前缀 | |
3: 退出动画执行体 | |
.xxx-enter-active 进入动画的执行体 | |
.xxx-leave-active 来到动画的执行体 | |
.xxx-enter 从什么状态到失常状态 | |
.xxx-leave-to 从失常状态到什么状态 | |
--> | |
<style> | |
.box { | |
width: 300px; | |
height: 300px; | |
background-color: #f00; | |
margin: 0 auto; | |
} | |
.xxx-enter-active {animation: move 1.5s;} | |
.xxx-leave-active {animation: move 1.5s linear reverse;} | |
@keyframes move { | |
0% { | |
opacity: 0; | |
transform: translateX(-400px); | |
} | |
100% { | |
opacity: 1; | |
transform: translateX(0); | |
} | |
} | |
</style> | |
<body> | |
<div id='app'> | |
<button @click="bol=!bol"> 点我啊 </button> | |
<transition name="xxx"> | |
<div class="box" v-if="bol"></div> | |
</transition> | |
</div> | |
<script src='./vue.js'></script> | |
<script> | |
new Vue({ | |
el: '#app', | |
data: {bol: true} | |
}) | |
</script> | |
</body> | |
</html> |
多元素动画
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<title>Document</title> | |
</head> | |
<!-- 多元素动画 | |
应用场景:进入 / 来到 v-if/v-show | |
1: 用 transition-group 包住 | |
2: 多元素动画的每一个子元素都要加一个 key 值 | |
3:加一个 name="xxx" xxx 是前面 css 的前缀 | |
.xxx-enter-active 进入动画的执行体 | |
.xxx-leave-active 来到动画的执行体 | |
.xxx-enter 进入前的状态:心愿从什么状态变到失常状态 | |
.xxx-leave-to 来到时的状态:心愿从失常状态变到什么状态 | |
--> | |
<style> | |
.box { | |
width: 300px; | |
height: 300px; | |
background-color: #f00; | |
margin: 0 auto; | |
} | |
.box2 { | |
width: 300px; | |
height: 300px; | |
background-color: #0f0; | |
margin: 0 auto; | |
} | |
.xxx-enter-active, | |
.xxx-leave-active { | |
transition: all 2s linear; | |
/* transition;动画的元素 动画时长 动画曲线 延时 */ | |
} | |
.xxx-enter-active:nth-child(1) {transition-delay: 0s;} | |
.xxx-enter-active:nth-child(2) {transition-delay: 0.5s;} | |
.xxx-enter { | |
opacity: 0; | |
transform: translateX(-300px); | |
} | |
.xxx-leave-to { | |
opacity: 0; | |
transform: translateX(300px); | |
} | |
</style> | |
<body> | |
<div id='app'> | |
<button @click="bol=!bol"> 点我啊 </button> | |
<transition-group name="xxx"> | |
<div class="box" v-if="bol" key="1"></div> | |
<div class="box2" v-if="bol" key="2"></div> | |
</transition-group> | |
</div> | |
<script src='./vue.js'></script> | |
<script> | |
new Vue({ | |
el: '#app', | |
data: {bol: true} | |
}) | |
</script> | |
</body> | |
</html> |
对于 includes map filter findindex
<!-- includes | |
返回值 = 数组.includes(值) | |
返回值为 boolean 值 | |
true 示意该值在数组中存在 | |
false 示意该值在数组中不存在 | |
--> | |
<!-- map | |
应用场景:对数组进行遍历,每一项进行一个操作,生成一个新的数组 | |
返回值 = 数组.map((item,index)=>{ | |
return 值 | |
return 的值是什么,返回值.push(值) | |
}) | |
--> | |
<!-- filter | |
应用场景:过滤出数组中符合条件的项,并返回一个新的数组 | |
返回值 = 数组.filter((item,index)=>{ | |
return boolean 值 | |
如果 boolean 为 true 返回值.push(item) | |
如果 boolean 为 falsse 返回值不 push 它 | |
}) | |
--> | |
<!-- findIndex | |
应用场景:查找出数组中第一个符合条件的下标, 如果没有符合条件的,返回 -1 | |
返回值 = 数组.findIndex((item,index)=>{ | |
return boolean 值 | |
如果 boolean 值为 true 返回值 =index,停止循环 | |
如果 boolean 值为 false 持续循环上来,直到完结 | |
}) | |
找到了 返回值 = 相应的下标 找不到 返回值 =-1 | |
--> |
对于 vue 办法中的实参 $event
$event:事件对象,也就是事件驱动源,vue 帮咱们默认传递了实参 $event,所以能够不写,办法申明时能够应用
过滤器的根本应用
有的时候,有些数据没法间接拿来用,就须要对这些数据进行过滤解决,过滤器就是用来做这个性能的
-
全局过滤器(全局过滤器定义后,所有组件都可应用)
-
定义(在 main.js 中做全局定义)
- //value 是过滤器的要过滤的值,这里 return 的值就是最终过滤器的值
Vue.filter(“ 过滤器名字 ”,function(value){
return 返回值
}) -
应用
- // 这里的 value 就是过滤器办法外面的参数,也就是要过滤的值
{{value | 过滤器名字}}
-
- 部分过滤器(只能利用于以后组件)
** 作用:** 平时我的项目中用的较多的,就是对一些字符串加工之类的,如:接口传了你一个工夫戳,你须要转换成相应的失常工夫格局等。
* 定义(在本人所在组件外面定义)* // 下面的 value 是过滤器的要过滤的值,return 的值就是过滤器定义的后果 | |
filters: {过滤器名字(value) {return 返回值} | |
} | |
* // 这里的 value 就是过滤器办法外面的参数,也就是要过滤的值 | |
\{\{value \| 过滤器名字 \}\} |
Demo
<template> | |
<div>{{time | formatTime}}</div> | |
</template> | |
<script> | |
export default {data() { | |
return {time: "1546275661000"}; | |
}, | |
filters: {formatTime(str) {let _date = new Date(+str); | |
let _year = _date.getFullYear(); | |
let _month = ("0" + _date.getMonth() + 1).slice(-2); | |
let _day = ("0" + _date.getDate()).slice(-2); | |
let _h = ("0" + _date.getHours()).slice(-2); | |
let _m = ("0" + _date.getMinutes()).slice(-2); | |
let _s = ("0" + _date.getMinutes()).slice(-2); | |
return (_year + "-" + _month + "-" + _day + "" + _h +":"+ _m +":" + _s); | |
} | |
} | |
}; | |
</script> | |
<style> | |
</style> |
路由传参
- 配置 写法
this.$router.push({ | |
path:'', | |
query:{name(参数名):参数 | |
} | |
}) |
* 拼接写法this.$router.push("门路?name=xxx")
路由接参
this.$route.query.name
moment
根本应用:moment().format(“YYYY 年 MM 月 DD 日 HH:mm:ss”)
取以后工夫并按某格局输入:moment().format(“ 工夫格局 ”)
给出一个毫秒工夫,并按某格局输入
moment(毫秒工夫).format(“ 工夫格局 ”)
- Y 年 M 月 D 日
- H 小时,以 24 小时计 h 以 12 小时计
- m 分钟 s 秒
官网文档:http://momentjs.cn/docs/#/parsing/string/
es6 对象办法
Object.keys(对象) : 将对象的 key 值转换成数组
Object.values(对象) : 将对象的 value 值转换成数组
Object.entries(对象) : 将对象的 key 值和 value 值转换成数组(一个二维数组)
for of 进行一个循环解决
Object.assign(最终合并对象{}, 须要被合并的对象{},……)
用于多个对象的合并,并返回一个合并后的对象
组件的生命周期
beforeCreate: 创立前,它不能拜访拜访 data 与 methods
created: 创立后,它能够拜访 data 与 methods, 然而还不能拜访 vue 渲染后的 dom
beforeMount: 渲染前,它还不能拜访 vue 渲染后的 dom
mounted: 渲染后,它能够拜访 vue 渲染后的 dom
beforeUpdate: 更新前,数据已批改,然而页面还没有实现渲染
updated: 更新后,数据已批改,且页面已实现渲染
beforeDestroy: 销毁前,啥都能够拜访,然而筹备要销毁了,个别用于善后工作
destroyed: 销毁后,停止了渲染,然而还是能够拜访 data 再来 methods, 然而不能拜访 vue 渲染后的 dom, 还是能够做善后工作
export,export default,import 的根本应用
export default 一个 js 里只能写一个
export default 它配套的 import 不必写 import {}它是 import 名字 from 门路
export 配套的 import import {名字(export 中对应的名字)} from “ 门路 ”
然而 export 能够写多个
应用 exporrt default 导出的值,在 import 名字 from “ 门路 ”, 这个名字能够轻易定义
然而应用 export 导出的值,在 import {名字} from “ 门路 ” 这里的名字必须和 export 的名字对应上
组件传值之 props 与 emit
父组件通过 props 向下传递数据给子组件;子组件通过 emit 给父组件发送音讯。
-
父组件传值子组件
-
在子组件标签上定义一个属性
- < 子组件 :
自定义属性名
=“值”></ 子组件 >
- < 子组件 :
-
在子组件中接收数据
-
在 props 中接管,props 放到
- props:[‘
自定义属性名
‘]
- props:[‘
-
应用传递的数据
- this.
自定义属性名
- this.
-
- 留神点:props 传递过去的数据是单向数据流,不可批改。
-
-
子组件调用父组件办法
-
在子组件上定义一个办法
- < 子组件 @
自定义办法名
=“父组件办法
”></ 子组件 >
- < 子组件 @
-
在子组件里调用该办法
- this.$emit(“
自定义办法名
“, 参数),这样就会触发父组件办法
- this.$emit(“
-