关于Vue的一些小技巧
前言
用Vue开发一个网页并不难,但是也经常会遇到一些问题,其实大部分的问题都在文档中有所提及,再不然我们通过谷歌也能成功搜索到问题的答案,为了帮助小伙伴们提前踩坑,在遇到问题的时候,心里大概有个谱知道该如何去解决问题。这篇文章是将自己知道的一些小技巧,结合查阅资料整理成的一篇文章,如果喜欢的话可以点波赞/关注,支持一下,希望大家看完本文可以有所收获。
文章内容总结:
- 组件style的scoped
- Vue 数组/对象更新 视图不更新
- vue filters 过滤器的使用
- 列表渲染相关
- 深度watch与watch立即触发回调
- 这些情况下不要使用箭头函数
- 路由懒加载写法
- 路由的项目启动页和404页面
- Vue调试神器:vue-devtools
组件style的scoped:
问题:在组件中用js动态创建的dom,添加样式不生效。
场景:
<template>
<div class="test"></div>
</template>
<script>
let a=document.querySelector('.test');
let newDom=document.createElement("div"); // 创建dom
newDom.setAttribute("class","testAdd" ); // 添加样式
a.appendChild(newDom); // 插入dom
</script>
<style scoped>
.test{
background:blue;
height:100px;
width:100px;
}
.testAdd{
background:red;
height:100px;
width:100px;
}
</style>
复制代码
结果:
// test生效 testAdd 不生效
<div data-v-1b971ada class="test"><div class="testAdd"></div></div>
.test[data-v-1b971ada]{ // 注意data-v-1b971ada
background:blue;
height:100px;
width:100px;
}
复制代码
原因:
当 <style>
标签有 scoped 属性时,它的 CSS 只作用于当前组件中的元素。
它会为组件中所有的标签和class样式添加一个scoped
标识,就像上面结果中的data-v-1b971ada
。
所以原因就很清楚了:因为动态添加的dom没有scoped
添加的标识,没有跟testAdd
的样式匹配起来,导致样式失效。
解决方式
- 推荐:去掉该组件的scoped
每个组件的css并不会很多,当设计到动态添加dom,并为dom添加样式的时候,就可以去掉scoped,会比下面的方法方便很多。
可以动态添加style
// 上面的栗子可以这样添加样式
newDom.style.height='100px';
newDom.style.width='100px';
newDom.style.background='red';
复制代码
Vue 数组/对象更新 视图不更新
很多时候,我们习惯于这样操作数组和对象:
data() { // data数据
return {
arr: [1,2,3],
obj:{
a: 1,
b: 2
}
};
},
// 数据更新 数组视图不更新
this.arr[0] = 'OBKoro1';
this.arr.length = 1;
console.log(arr);// ['OBKoro1'];
// 数据更新 对象视图不更新
this.obj.c = 'OBKoro1';
delete this.obj.a;
console.log(obj); // {b:2,c:'OBKoro1'}
复制代码
由于js的限制,Vue 不能检测以上数组的变动,以及对象的添加/删除,很多人会因为像上面这样操作,出现视图没有更新的问题。
解决方式:
this.$set(你要改变的数组/对象,你要改变的位置/key,你要改成什么value)
this.$set(this.arr, 0, "OBKoro1"); // 改变数组
this.$set(this.obj, "c", "OBKoro1"); // 改变对象
复制代码
如果还是不懂的话,可以看看这个codependemo。
- 数组原生方法触发视图更新:
Vue可以监测到数组变化的,数组原生方法:
splice()、 push()、pop()、shift()、unshift()、sort()、reverse()
复制代码
意思是使用这些方法不用我们再进行额外的操作,视图自动进行更新。
推荐使用splice
方法会比较好自定义,因为slice可以在数组的任何位置进行删除/添加操作,这部分可以看看我前几天写的一篇文章:【干货】js 数组详细操作方法及解析合集
- 替换数组/对象
比方说:你想遍历这个数组/对象,对每个元素进行处理,然后触发视图更新。
// 文档中的栗子: filter遍历数组,返回一个新数组,用新数组替换旧数组
example1.items = example1.items.filter(function (item) {
return item.message.match(/Foo/)
})
复制代码
举一反三:可以先把这个数组/对象保存在一个变量中,然后对这个变量进行遍历,等遍历结束后再用变量替换对象/数组。
并不会重新渲染整个列表:
Vue 为了使得 DOM 元素得到最大范围的重用而实现了一些智能的、启发式的方法,所以用一个含有相同元素的数组去替换原来的数组是非常高效的操作。
如果你还是很困惑,可以看看Vue文档中关于这部分的解释。
vue filters 过滤器的使用:
过滤器,通常用于后台管理系统,或者一些约定类型,过滤。Vue过滤器用法是很简单,但是很多朋友可能都没有用过,这里稍微讲解一下。
在html模板中的两种用法:
<!-- 在双花括号中 -->
{{ message | filterTest }}
<!-- 在 `v-bind` 中 -->
<div :id="message | filterTest"></div>
复制代码
在组件script
中的用法:
export default {
data() {
return {
message:1
}
},
filters: {
filterTest(value) {
// value在这里是message的值
if(value===1){
return '最后输出这个值';
}
}
}
}
复制代码
用法就是上面讲的这样,可以自己在组件中试一试就知道了,很简单很好用的。
如果不想自己试,可以点这个demo里面修改代码就可以了,demo中包括过滤器串联、过滤器传参。
推荐看Vue过滤器文档,你会更了解它的。
列表渲染相关
v-for循环绑定model:
input在v-for中可以像如下这么进行绑定,我敢打赌很多人不知道。
// 数据
data() {
return{
obj: {
ob: "OB",
koro1: "Koro1"
},
model: {
ob: "默认ob",
koro1: "默认koro1"
}
}
},
// html模板
<div v-for="(value,key) in obj">
<input type="text" v-model="model[key]">
</div>
// input就跟数据绑定在一起了,那两个默认数据也会在input中显示
复制代码
为此,我做了个demo,你可以点进去试试。
一段取值的v-for
如果我们有一段重复的html模板要渲染,又没有数据关联,我们可以:
<div v-for="n in 5">
<span>这里会被渲染5次,渲染模板{{n}}</span>
</div>
复制代码
v-if尽量不要与v-for在同一节点使用:
v-for 的优先级比 v-if 更高,如果它们处于同一节点的话,那么每一个循环都会运行一遍v-if。
如果你想根据循环中的每一项的数据来判断是否渲染,那么你这样做是对的:
<li v-for="todo in todos" v-if="todo.type===1">
{{ todo }}
</li>
复制代码
如果你想要根据某些条件跳过循环,而又跟将要渲染的每一项数据没有关系的话,你可以将v-if放在v-for的父节点:
// 根据elseData是否为true 来判断是否渲染,跟每个元素没有关系
<ul v-if="elseData">
<li v-for="todo in todos">
{{ todo }}
</li>
</ul>
// 数组是否有数据 跟每个元素没有关系
<ul v-if="todos.length">
<li v-for="todo in todos">
{{ todo }}
</li>
</ul>
<p v-else>No todos left!</p>
复制代码
如上,正确使用v-for与v-if优先级的关系,可以为你节省大量的性能。
深度watch与watch立即触发回调
watch很多人都在用,但是这watch中的这两个选项deep
、immediate
,或许不是很多人都知道,我猜。
选项:deep
在选项参数中指定 deep: true
,可以监听对象中属性的变化。
选项:immediate
在选项参数中指定 immediate: true, 将立即以表达式的当前值触发回调,也就是立即触发一次。
watch: {
obj: {
handler(val, oldVal) {
console.log('属性发生变化触发这个回调',val, oldVal);
},
deep: true // 监听这个对象中的每一个属性变化
},
step: { // 属性
//watch
handler(val, oldVal) {
console.log("默认立即触发一次", val, oldVal);
},
immediate: true // 默认立即触发一次
},
},
复制代码
这两个选项可以同时使用,另外:是的,又有一个demo。
还有下面这一点需要注意。
这些情况下不要使用箭头函数:
- 不应该使用箭头函数来定义一个生命周期方法
- 不应该使用箭头函数来定义 method 函数
- 不应该使用箭头函数来定义计算属性函数
- 不应该对 data 属性使用箭头函数
- 不应该使用箭头函数来定义 watcher 函数
示例:
// 上面watch的栗子:
handler:(val, oldVal)=> { // 可以执行
console.log("默认触发一次", val, oldVal);
},
// method:
methods: {
plus: () => { // 可以执行
// do something
}
}
// 生命周期:
created:()=>{ // 可以执行
console.log('lala',this.obj)
},
复制代码
是的,没错,这些都能执行。
but:
箭头函数绑定了父级作用域的上下文,this 将不会按照期望指向 Vue 实例。
也就是说,你不能使用this来访问你组件中的data数据以及method方法了。
this将会指向undefined。
路由懒加载写法:
// 我所采用的方法,个人感觉比较简洁一些,少了一步引入赋值。
const router = new VueRouter({
routes: [
path: '/app',
component: () => import('./app'), // 引入组件
]
})
// Vue路由文档的写法:
const app = () => import('./app.vue') // 引入组件
const router = new VueRouter({
routes: [
{ path: '/app', component: app }
]
})
复制代码
文档的写法在于问题在于:如果我们的路由比较多的话,是不是要在路由上方引入赋值十几行组件?
第一种跟第二种方法相比就是把引入赋值的一步,直接写在component
上面,本质上是一样的。两种方式都可以的,大家自由选择哈。
路由的项目启动页和404页面
实际上这也就是一个设置而已:
export default new Router({
routes: [
{
path: '/', // 项目启动页
redirect:'/login' // 重定向到下方声明的路由
},
{
path: '*', // 404 页面
component: () => import('./notFind') // 或者使用component也可以的
},
]
})
复制代码
比如你的域名为:www.baidu.com
项目启动页指的是: 当你进入www.baidu.com
,会自动跳转到login登录页。
404页面指的是: 当进入一个没有 声明/没有匹配 的路由页面时就会跳转到404页面。
比如进入www.baidu.com/testRouter
,就会自动跳转到notFind
页面。
当你没有声明一个404页面,进入www.baidu.com/testRouter
,显示的页面是一片空白。
Vue调试神器:vue-devtools
每次调试的时候,写一堆console
是否很烦?想要更快知道组件/Vuex内数据的变化?
那么这款尤大开发的调试神器:vue-devtools,你真的要了解一下了。
这波稳赚不赔,真的能提高开发效率。
安装方法:
- 谷歌商店+科学上网,搜索vue-devtools即可安装。
- 不会科学上网?手动安装
安装之后:
在chrome开发者工具中会看一个vue的一栏,如下对我们网页应用内数据变化,组件层级等信息能够有更准确快速的了解。
关于Vue的一些小技巧的更多相关文章
- Vue 使用中的小技巧
在vue的使用过程中会遇到各种场景,当普通使用时觉得没什么,但是或许优化一下可以更高效更优美的进行开发.下面有一些我在日常开发的时候用到的小技巧,在下将不定期更新~ 1.多图表resize事件去中心化 ...
- Vue 使用中的小技巧(山东数漫江湖)
在vue的使用过程中会遇到各种场景,当普通使用时觉得没什么,但是或许优化一下可以更高效更优美的进行开发.下面有一些我在日常开发的时候用到的小技巧,在下将不定期更新~ 1. 多图表resize事件去中心 ...
- 总结一下vue里一些小技巧
官方里的我就不细说了,自个撸文档就成,下面是实践里常用的几个小技巧或者说是遇到的坑,若有错误望大家指正)1.当用a标签设置新窗口打开页面,设置url时,建议给href进行v-bind绑定,然后写相对路 ...
- vue 使用中的小技巧 (一)
在vue的使用过程中会遇到各种场景,当普通使用时觉得没什么,但是或许优化一下可以更高效更优美的进行开发.下面有一些我在日常开发的时候用到的小技巧 data 和 Object.freeze 每个Vue实 ...
- vue小技巧之偷懒的文件路径——减少不必要的代码
众所周知,我们写vue项目的时候都会创建很多个文件,尤其是一些中大型项目,会有很深的文件夹,当你去引入的时候,要写很长的路径比如我要引入一个css文件, 必须得 import '../../../s ...
- Vue + Element 小技巧
说是小技巧 ,其实就是本人 就是一个小菜比 .如有大佬可以纠正,或者再救救我这个小菜比 跪谢 1.当后台返回一个字段需要根据不同字段内容在表格内显示相对应的文字(字段内容是死的,表格内需要显示对 ...
- 这几个小技巧,让你书写不一样的Vue!
前言 最近一直在阅读Vue的源码,发现了几个实战中用得上的小技巧,下面跟大家分享一下. 同时也可以阅读我之前写的Vue文章 vue开发中的"骚操作" 挖掘隐藏在源码中的Vue技巧! ...
- vue开发必须知道的小技巧
近年来,vue越来越火,使用它的人也越来越多.vue基本用法很容易上手,但是还有很多优化的写法你就不一定知道了.本文列举了一些vue常用的开发技巧.require.context() 在实际开发中,绝 ...
- springboot(十三):springboot小技巧
一些springboot小技巧.小知识点 初始化数据 我们在做测试的时候经常需要初始化导入一些数据,如何来处理呢?会有两种选择,一种是使用Jpa,另外一种是Spring JDBC.两种方式各有区别下面 ...
随机推荐
- Spark RDD 窄依赖研究
1.. 简介 spark从RDD依赖上来说分为窄依赖和宽依赖. 其中可以这样区分是哪种依赖:当父RDD的一个partition被子RDD的多个partitions引用到的时候则说明是宽依赖,否则为窄依 ...
- Mysql Limit操作
oracle : || mysql: contact contact_ws 拼接 Font Size: Large | Medium | Small select * from tabl ...
- CF614A 【Link/Cut Tree】
题意:求出所有w^i使得l<=w^i<=r 输入为一行,有三个数,分别是l,r,w.意义如题目所描述 输出为一行,输出所有满足条件的数字,每两个数字中间有一个空格 如果没有满足条件的数字则 ...
- web项目引入extjs小例子
一个新的项目,前端用extjs实现!分享一下extjs开发的准备工作! 首先去下载extjs的资源包,这里我是随便在网上下载的! 打开之后 ,目录是这样的! 需要关注的几个文件夹: builds:压缩 ...
- Ansible条件测试
本节内容: Ansible条件测试 一.Ansible条件测试 在ansible中还可以进行条件测试.如果需要根据变量.facts或此前任务的执行结果来做为某task执行与否的前提时要用到条件测试. ...
- forms.ModelForm 与 forms.Form
1. 首先 两者都是forms里的常用类. 2. 这两个类在应用上是有区别的.一般情况下,如果要将表单中的数据写入数据库或者修改某些记录的值,就要让表单类继承ModelForm; 如果提交表单后 不会 ...
- too many open file /etc/security/limits.conf
当出现too mang open file 时更改/etc/profile中的ulimit -n 65536 ,查看 然后ssh进去,或者退出之后重新登录使之生效 ...
- ref:关于JAVA中一些安全漏洞示例说明及如何规避方法代码示例总结分享
ref:http://www.xwood.net/_site_domain_/_root/5870/5874/t_c268166.html 标签:安全,漏洞,健壮,java,SQL注入,SS及CSRF ...
- 洛谷P2707 Facer帮父亲 [优先队列,数学]
题目传送门 Facer帮父亲 题目背景 Facer可是一个孝顺的孩纸呦 题目描述 Facer的父亲是一名经理,现在总是垂头丧气的. Facer问父亲,怎么啦?父亲说,公司出了点问题啊. 公司管理着N个 ...
- JDK源码分析(三)——HashMap 下(基于JDK8)
目录 概述 内部字段及构造方法 哈希值与索引计算 存储元素 扩容 删除元素 查找元素 总结 概述 在上文我们基于JDK7分析了HashMap的实现源码,介绍了HashMap的加载因子loadFac ...