vue点滴
vue学习过程中遇到问题的笔记
chunchun1230
这个作者很懒,什么都没留下…
展开
-
2020-12-24
minix 是个什么东西, 就是混合,把你混合给我浅显表述就是 你说: ‘我叫李四’, 我说: ‘我叫张三’,然后把你 混合给我, 就成了 我说: ‘我叫张三我叫李四’,所有解说都在例子里,如下:// minix.jsexport default { data () { return { name: 'minix', minixName: 'minixObj', ...转载 2020-12-24 09:52:18 · 150 阅读 · 0 评论 -
Vue中的异步组件
使用过vue 的小伙伴都知道Vue自定义组件,和组件引入方式。今天笔者要记录并介绍vue 组件的三种引入方式。 传统引入方式,即最常见的引入方式 import leftLine from "@/views/admanage/components/stepline";components: { leftLine },这是使用本地注册的方式将组件引入,在项目初始加载时,组件就被引入、使用、加载当项目越来越大的时候,就需要考虑速度性能的问题,显然上面的方法是不合理的,这就需要..转载 2020-12-23 14:10:53 · 194 阅读 · 0 评论 -
Vue—组件实例之$nextTick
一、概述DOM更新循环结束后,执行延迟回调。二、详解$nextTick有两个使用场景。场景一钩子函数created中进行的DOM操作一定要放在$nextTick的回调函数中。因为created执行时,DOM并未进行任何渲染,无法操作DOM。与之对应的钩子函数mounted中可以进行任何DOM操作,因为该钩子执行时,已完成DOM渲染。<script>export default { created() { this.$nextTick(() => {转载 2020-12-22 22:54:29 · 224 阅读 · 1 评论 -
vue 兄弟组件之间的传值
一. 子传父,父传子。二.1、兄弟之间传递数据需要借助于事件车,通过事件车的方式传递数据2、创建一个Vue的实例,让各个兄弟共用同一个事件机制。3、传递数据方,通过一个事件触发bus.$emit(方法名,传递的数据)。4、接收数据方,通过mounted(){}触发bus.$on(方法名,function(接收数据的参数){用该组件的数据接收传递过来的数据}),此时函数中的this已经发生了改变,可以使用箭头函数。实例如下:我们可以创建一个单独的js文件eventVue.js,内容转载 2020-12-22 10:06:02 · 503 阅读 · 0 评论 -
vue中的事件修饰符
(1). stop:阻止冒泡(通俗讲就是阻止事件向上级DOM元素传递) 点击内层div的结果: 点击外层div的结果: 修改代码,为内层点击事件添加事件".stop"修饰符: 再次点击内层div的结果如下: 。(2). prevent:阻止默认事件的发生 默认事件指对DOM的操作会引起自动执行的动作,比如点击超链接的时候会进行页面的跳转,点击表单提交按钮时会重新加载页面等,使用".prevent"修饰符可以阻止这些事件转载 2020-12-21 15:36:47 · 242 阅读 · 0 评论 -
Vue如何自定义一个过滤器
html代码:<div id="app"> <input type="text" v-model="msg" /> {{msg| capitalize }}</div>js代码:var vm=new Vue({ el:"#app", data:{ msg:'' }, filters: { capitalize: function (value) { if (!转载 2020-12-18 12:56:28 · 532 阅读 · 0 评论 -
vue——@click的事件命令以及修饰符
1、@click.stop 阻止事件冒泡//只弹出“noclick”<div id="app"> <div v-on:click="dodo"> <button v-on:click.stop="doThis">阻止单击事件继续传播</button> </div> </div> <script> var app = new Vue({ el: "#app", .转载 2020-09-29 13:51:41 · 17714 阅读 · 1 评论 -
vue星级评分组件
<template> <div class="Rating-gray"> <i v-for="(item,index) in itemClasses" :key="index" class="fa" :class="item"></i> </div></template><script>//星星长度const LENGTH =5;//星星对应的classconst CLS_ON = ".原创 2020-09-22 13:53:57 · 316 阅读 · 0 评论 -
Vue-组件参数校验与非props特性
1.组件参数校验——父组件向子组件传递一些内容,子组件有权对接收的内容进行一些约束(即组件接收的参数是有规则可定义的),这些约束就是组件参数校验。子组件通过props接收传递参数,并说明传递参数的属性:type——参数类型 required——是否必传 default ——默认传的值 validator——自定义校验器,要求字符串长度等2.props特性——子组件里声明了对父组件传递的属性的接收(父子组件之间有对应关系)(1)传递的属性不会在控制台的dom标签上显示(2)子组件模板可以通转载 2020-09-08 11:52:45 · 149 阅读 · 0 评论 -
vue-cli4.0更新后怎样将eslint关闭
昨天新起了个项目,刚开始就报一长串错误,百度了一下发现是eslint的原因,但是我根本就没安装那个包,然后继续百度,发现是vue-cli升级了,eslint成了默认选项的必选包了;如何解决呢?1、在新建项目时不勾选: 你会法现,eslint是默认的,选中它空格就好了,然后选择自己需要的内容就好了2、如果你不知道自己需要什么内容,就选择默认的;虽然里面也有eslint;建完项目后将他关闭就好了;在新建好的项目根目录下新建文件vue.config.js...转载 2020-09-07 18:17:01 · 723 阅读 · 1 评论 -
执行build命令期间移除所有的console
利用babel-plugin-transform-remove-console插件在执行build命令期间移除所有的console地址:https://www.babeljs.cn/docs/babel-plugin-transform-remove-console1.执行命令行安装此插件npm install babel-plugin-transform-remove-console --save-dev2.在babel.config.js引入此插件module.exports =原创 2020-09-03 15:21:18 · 278 阅读 · 0 评论 -
Vue自定义v-model实现Vue的双向数据绑定--Vue高级特性
一、自定义v-model实现Vue的双向数据绑定父组件中<p>{{name}}</p><custormModel v-model="name" />data() { return { // 组件 custormModel 中的 input 输入改变,绑定到了这里,实现双向绑定 name: '颜色' }},components: { custormModel}组件custo..转载 2020-05-21 13:04:19 · 307 阅读 · 0 评论 -
Vue父子组件生命周期执行顺序及钩子函数的个人理解
Vue父子组件生命周期执行顺序及钩子函数的个人理解先附一张官网上的vue实例的生命周期图,每个Vue实例在被创建的时候都需要经过一系列的初始化过程,例如需要设置数据监听,编译模板,将实例挂载到DOM并在数据变化时更新DOM等。同时在这个过程中也会运行一些叫做生命周期钩子的函数(回调函数),这给了用户在不同阶段添加自己代码的机会。1、vue的生命周期图在vue实例的整个生命周期的各个阶段,会提供不同的钩子函数以供我们进行不同的操作。先列出vue官网上对各个钩子函数的详细解析。 .转载 2020-05-21 08:42:57 · 336 阅读 · 0 评论 -
vue中v-show和v-if的异同
一、官方解释:v-if是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。 v-if也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。 相比之下,v-show就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。 一般来说,v-if有更高的切换开销,而v-show有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用v-show较好;如果在运行时条件很少...转载 2020-05-18 09:31:50 · 186 阅读 · 0 评论 -
vue3以上版本出现bugThis dependency was not found: * core-js/modules/es.object.to-string in ./src/router/i
报错:This dependency was not found:* core-js/modules/es.object.to-string in ./src/router/index.jsTo install it, you can run: npm install --save core-js/modules/es.object.to-strin原因:最新的 vue-cli 3.x的版本,core-js是3.x的版本,而这个版本中,对那些polly补丁包进行了整理,这其实是一个版转载 2020-05-17 19:06:32 · 3032 阅读 · 0 评论