关于vue.js:Vue的回顾

47次阅读

共计 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-ifv-if 是一样用法,它是v-if 不成立状况下才会走到 v-else-if 这里来 v-else前面毋庸跟任何语句,当后面 v-ifv-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:[‘自定义属性名‘]
      • 应用传递的数据

        • this.自定义属性名
    • 留神点:props 传递过去的数据是单向数据流,不可批改。
  • 子组件调用父组件办法

    • 在子组件上定义一个办法

      • < 子组件 @自定义办法名 =“ 父组件办法”></ 子组件 >
    • 在子组件里调用该办法

      • this.$emit(“自定义办法名 “, 参数),这样就会触发 父组件办法

正文完
 0