![](https://img-blog.csdnimg.cn/20200119101252421.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue
Vue
Poetry Code
如果你正在学习前端,记得关注我噢~
展开
-
【记录】vue项目中@import 后面的波浪号~ 代表什么意思
在使用vue-element-admin框架的时候,发现原来导入样式也可以这也写!写法挺高级的,就此记录下~由于是在webstorm中编写的项目,编辑器好像不识别这种写法,所以一直报错。这种写法其实是webpack中的一个配置。这里用~符号,表示后面的值为 alias, 然后就会去vue.config.js的 alias 配置中找相应的值。然后拼接成最后的地址:'src/styles/...原创 2020-03-30 22:43:56 · 2530 阅读 · 0 评论 -
入门Vuex看这篇就够了
文章目录1.Vuex 概述1.1传统组件之间的传值方式1.2Vuex 是什么1.3使用 Vuex 统一管理状态的好处1.4什么情况下我应该使用 Vuex?2.Vuex的使用3.Vuex 的核心概念3.1 State3.1.1组件访问 State 中数据的第一种方式:3.1.2组件访问 State 中数据的第二种方式:3.2 Mutation3.3Action3.3.1触发 actions 异步任务...原创 2020-03-17 00:17:20 · 717 阅读 · 24 评论 -
Vue项目配置代码格式化工具
1.为什么要用Prettier用来替代lint中的一些场景,比如说分号/tab缩进/空格/引号,这些在lint工具检查出问题之后还需要手动修改,而通常这样的错误都是空格或者符号之类的,这样相对来说不太优雅,利用格式化工具自动生成省时省力。2.配置过程在项目根目录创建一个 .prettierrc文件文件中添加所需要的规则,如将分号;进行去除(semi),或者将双引号改为单引号(singl...原创 2020-03-13 00:03:33 · 3729 阅读 · 2 评论 -
Vue项目优化——通过 externals 加载外部 CDN 资源
1.发现项目中存在的问题为了直观地发现项目中存在的问题,我们可以在打包时生成报告。我们可以通过VueCli可视化的UI面板运行bulid直接查看报告。而在报告中我们发现了有这么一个文件,体积比较大,这样可能会造成我们较长时间的请求。2.那么这个文件是怎么来的呢?它的作用是什么?原来,其实默认情况下,项目中我们通过 import 语法导入的第三方依赖包,最终会被打包合并到同一个文件中,而这...原创 2020-03-09 16:33:05 · 3094 阅读 · 3 评论 -
填坑记录之Vue中v-model与:model区别
初做vue项目中遇到这个问题,记录一下。源代码:打算做的表单验证功能。结果发现在验证的过程中username规则的第一条正确了却一直通过不了。通过控制台得知长度一直为1。原来是拿不到数据。v-model通常用于input的双向数据绑定,它并不会向子组件传递数据。:model是v-bind:model的缩写,是绑定自定义属性.它只是将父组件的数据传递给子组件,并没有实现父组件和子组...原创 2020-02-15 20:43:46 · 1286 阅读 · 1 评论 -
报错信息记录——Vue组件模板只能有一个根元素
报错信息Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.报错分析编译模板错误。组件模板应该只包含一个根元素。在一个组件模板中应该只存在一个根元素,所以在每个组...原创 2020-02-09 15:13:55 · 1064 阅读 · 0 评论 -
Vue中$event的用法
因为在Vue API文档里$event的用法找不到,所以我自己总结了一下。通常的用法是用来获取当前元素的最新值。$event.target.value <body> <div id="app"> <input type="text" @click="abc($event)" value="123" /> </div>...原创 2020-02-05 21:25:10 · 17351 阅读 · 7 评论 -
Vue入门指南——数组变异方法
一、数组变异方法在 Vue 中,直接修改对象属性的值无法触发响应式。当你直接修改了对象属性的值,你会发现,只有数据改了,但是页面内容并没有改变变异数组方法即保持数组方法原有功能不变的前提下对其进行功能拓展push()往数组最后面添加一个元素,成功返回当前数组的长度pop()删除数组的最后一个元素,成功返回删除元素的值shift()删除数组的第一个元素,成功返...原创 2020-01-28 13:15:27 · 990 阅读 · 0 评论 -
Vue入门指南——1张图搞懂生命周期!
目录:一、什么是生命周期?二、图解一、什么是生命周期?从Vue实例创建、运行、到销毁期间,总是伴随着各种各样的事件,这些事件,统称为生命周期!生命周期钩子:就是生命周期事件的别名而已;生命周期钩子 = 生命周期函数 = 生命周期事件二、图解如果您也正在学习前端的路上,记得关注该博主,学习更多关于前端的知识~博主主页 Poetic Code...原创 2020-01-28 01:12:56 · 618 阅读 · 0 评论 -
Vue入门指南——过滤器
目录:一、过滤器的作用是什么?二、自定义全局过滤器三、 全局过滤器的使用四、局部过滤器五、带参数的过滤器六、带参过滤器的使用七、注意事项一、过滤器的作用是什么?格式化数据,比如将字符串格式化为首字母大写,将日期格式化为指定的格式等二、自定义全局过滤器过滤器中的 function 里的第一个参数,已经被规定死了,永远都是 过滤器 管道符前面传递过来的数据。Vue.filter(‘过滤器名称...原创 2020-01-28 00:06:15 · 988 阅读 · 4 评论 -
Vue入门指南——侦听器
目录:一、什么是侦听器?二、侦听器的应用场景三、侦听器的用法四、注意事项一、什么是侦听器?侦听器是用来检测数据变化从而来添加执行自己自定义逻辑的代码(数据一旦发生变化就通知侦听器所绑定方法 )。这一点和计算属性很相似,然而计算属性一般作用于简单的一些小逻辑代码,如果逻辑比较复杂可以使用侦听器。二、侦听器的应用场景一般用于异步或者开销较大的操作(如 ajax,计时器等一些耗时操作)三、...原创 2020-01-27 22:01:10 · 1325 阅读 · 0 评论 -
Vue入门指南——计算属性
目录:1. 为何需要计算属性?2. 计算属性的用法3. 计算属性与方法的区别4.小案例1. 为何需要计算属性?表达式的计算逻辑可能会比较复杂,使用计算属性可以使模板内容更加简洁2. 计算属性的用法computed: { reversedMessage: function () { return this.msg.split('').reverse().join('') ...原创 2020-01-27 00:26:43 · 1850 阅读 · 0 评论 -
Vue入门指南——分支结构
目录:一、v-if二、v-else-if & v-else三、v-show四、v-show 和 v-if的区别五、总结一、v-ifv-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true 值的时候被渲染。<div id="app"> <!-- 判断是否加载,如果为真,就加载,否则不加载--> <...原创 2020-01-22 19:55:13 · 2146 阅读 · 0 评论 -
Vue入门指南——自定义全局指令和局部指令
目录:一、简介二、如何自定义指令1.自定义全局指令2.自定义局部指令三、以传参的方式进行指令设置四、函数简写一、简介当开发需求做一个自动获取焦点事件的时候,我们最原生的做法就是通过获取元素来注册事件,document.getElementById("search").focus();然而在vue中并不提倡我们直接操作DOM元素。那我们该怎么办呢?这时候就需要我们自定义指令来实现这个功能了...原创 2020-01-20 16:54:34 · 1765 阅读 · 0 评论