前端队长Daotin

大家好，我是前端队长Daotin，想要获取更多前端精彩内容，关注我(全网同名)，解锁前端成长新姿势。以下正文：今天遇到一个在vue文件中引入本地图片的问题，于是有了这篇文章。通常，我们的一个img标签在html中是这么写的：<img src="../images/demo.png">这种写法只能引用相对路径下的图片。不能使用绝对路径。使用绝对路径的话，这类资源将会直接被拷贝，而不会经过 webpack 的处理。如果src是变量的话，我们一般会在data中定一个变量src进行动态绑定。

下面bug如何找到问题出在哪里？之前，如果报错的变量不是普通的单词，还可以在代码里面搜索，看看哪里写的有问题。但是现在的变量是 i ，如果搜索的话，代码里面有几十个位置，很难找到错误的地方。那么这种情况如何解决？解决办法：我们把错误的地方点开：就可以看到有错误的源代码文件，点击源代码：可以看到它定位了错误的位置，然后我们去源代码搜索相关位置，可以发现，代码在循环的外面。所以 i 是不存在的，问题解决。本文由博客群发一文多发等运营工具平台 OpenWrite 发布...

今天遇到一个Vue数据更新了，但是视图未更新的问题，折腾了我2小时才搞定，有必要记录下来，防止日后再次踩坑。问题描述我需要显示一个列表，而且列表是可编辑的。比如可以修改列表每一项的名称等。我从后端获取列表后，对其中的每一项数据进行初始化，增加一个editing 可编辑属性。me.groupList.forEach(item=>{ item.editing = false;});之后在模板中使用v-for遍历groupList，然后每个item增加一个icon，点击icon后，修改

cssrem：一个CSS值转REM的VSCode插件；lib-flexible：移动端弹性布局适配解决方案；vue-touch：移动端相关点击，滑动，拖动，多点触控等事件封装；vee-validate：适用于vue项目中表单验证插件；better-scroll ：可能是目前最好用的移动端滚动插件;fastclick：解决移动端click 300ms延迟vConsole：手机...

参考链接https://www.cnblogs.com/tiedaweishao/p/6644267.html

在普通的html里面：template标签默认有个 display:none; 属性，并且其里面的内容是不可见的。在vue里面：template标签类似一个隐藏的div，在审查元素的时候是找不到template标签的，但是里面的内容是可见的。<div id="app"> <template v-for="item in array"> ...

watch 有一个特点是，最初绑定的时候是不会执行的，要等到依赖改变时才执行监听计算。如何你发现在加载页面的时候watch执行了，基本上是这个被监听对象在页面加载的时候使用ajax获取值后赋值产生的改变。那我们想要让它绑定后立马执行一次该怎么办？只需要加入immediate: true 即可。watch: { firstName: { handler(newNam...

前言本命名风格指南推荐了一种统一的命名规范来编写 Vue.js 代码。这使得代码具有如下的特性：统一团队的命名规范，其它开发者或是团队成员更容易上手阅读和理解。IDEs 更容易理解代码，从而提供高亮、格式化等辅助功能。本指南只是个人总结归纳的，仅作为一种参考。命名分类现在常用的vue命名规范无外乎四种：camelCase(驼峰式 )kebab-case(...

直接上代码：mounted: function () { let that = this; $(document).on('click', function (e) { let dom = $('.myDiv')[0]; // 自定义div的class if (dom) { // 如果点击的区域不在自定义dom范...

在有些时候，子组件直接修改父组件传来的 prop 对象的属性会出现不同步的问题。比如，父组件传过来的一个对象 checkBoxObj:checkBoxObj:{ checked: false}将 checked 通过v-model绑定给子组件的 checkbox，然后点击这个checkbox，试图改变 checked 的值，但是有时候会发现 checkbox 的选中状态和...

vue中并没有 @hover 事件，但是可以使用 @mouseenter 和 @mouseleave 来模拟hover操作。

比如ul下有4个li元素。给每个li绑定点击事件@click="select_li(index)，然后这个点击时间会将一个全局变量 selectLi 赋值为 index 的值。然后在每个li上加上class样式:class="[selectLi ==index?'active':'']"即可。...

参考链接https://router.vuejs.org/zh/guide/essentials/passing-props.html#布尔模式

vue事件是同步的。如果绑定了事件(组件标签上绑定事件)组件的事件触发组件调用时绑定事件之后监听事件：$emit 抛出后活等着 $on ，如果监听到了则阻塞执行；如果为监听到或者未绑定，则会继续运行。...

https://github.com/Daotin/daotin.github.io/issues/135

各自特点template模板语法(HTML的扩展)数据绑定使用Mustache语法(双大括号)<span>{{title}}<span>JSXJavaScript的语法扩展数据绑定使用单引号<span>{title}<span>vue官方建议Vue官方建议使用template模板，但是 ：“更抽象一点来看，我...

1、 子组件不传递参数，父组件也不接受参数// 子组件this.$emit('test')// 父组件@test='test'test() { }2、 子组件传递一个参数，父组件接收时不带形参// 子组件this.$emit('test','哈哈')// 父组件@test='test'test(param) { console.log(param); // 哈哈},3、 子组件传递多个参数，父组件接收时需要使用arguments作为形参。arguments是一个

官方教程自定义组件的 v-model只需要记住：一个组件上的 v-model 默认会利用名为 value 的 prop 和名为input 的事件。小示例自定义一个custom-input组件。点击查看在线示例<template> <div class="custom-input"> <span>我的输入框：</span> <input type="text" :value="value" @input="valueC

我的博客： https://github.com/Daotin/fe-notes/issuesvue需要node.js吗？你可以用 script 标签的形式引入vue.min.js 这样的，不需要nodejs。使用node有几件事，打包部署，解析vue单文件组件，解析每个vue模块，拼在一起，转码es6，less等，启动测试服务器 localhost:8080, 帮你管理 vue-ro...

当一个对象在vue中是响应式的，如果仅仅使用普通的方式向这个对象添加或修改这个属性的值，是不会触发视图更新的。但是使用vue.set或者this.$set的方式可以使得新添加的属性也是响应式的，并触发视图更新。仅此而已。...

由来组件之间的通信可以通过props和$emit的方式进行通信，但是如果组件之间的关系非常复杂的话，通过以上的方式会很麻烦，并且程序会非常脆弱，没有建中性可言。在vue2.2.0 中新增provide和inject属性，可以方便的帮助我们进行组件间的传值。使用的方式很简单：父组件通过provide提供数据，其他组价可以使用inject注入数据。注意不推荐直接用于应用程序代码中。一般使用...

问题提出：我们知道一般vue使用ajax或者axios来获取后端数据，并且好像放在created里面和mounted里面都可以获取数据并正确渲染。那么放在created里面和mounted里面有什么区别呢？以下是一些网友的回答：一般放到created即可。关于 nextTick 可以参考下面这篇文章：Vue.nextTick的原理和用途简单来说：如果你修改了某个dom中的数据，视...