Vue 深入浅出
关注
分享
扫一扫
文章平均质量分 59
提莫拌一团蘑菇
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
vue 事件修饰符最全详解（阻止事件冒泡、阻止默认行为...）等，一文解决你所有问题
vue 事件修饰符最全详解（阻止事件冒泡、阻止默认行为...）等，一文解决你所有问题。一、修饰符的定义在 Vue.js 中，修饰符是用于在事件处理程序中添加额外功能的特殊标记，来改变事件的行为。它们通常以点（.）开头，能够简化事件处理的逻辑。以下是一些常用的7种事件修饰符：.stop：阻止事件冒泡。.prevent：阻止事件的默认行为。.capture：使用事件捕获模式。.self：只有当事件是从侦听器绑定的元素本身触发时才触发回调。.once：只触发一次回调。.passive：告诉浏览原创 2025-01-14 14:10:00 · 1248 阅读 · 0 评论 -
params || ‘‘ 和 params ?? ‘‘ 的区别
逻辑 OR 运算符会返回第一个真值（truthy value）。如果左侧的操作数是假值（falsy value），则返回右侧的操作数。时才返回右侧的操作数。如果左侧的操作数是任何其他值（包括。设置一个默认值，你可以使用逻辑 OR 运算符 (在 Vue.js 中，如果你想要给变量。空值合并运算符只在左侧的操作数是。），它都会直接返回左侧的操作数。是上述任何一个假值，那么。) 或空值合并运算符 (原创 2024-08-15 11:21:45 · 485 阅读 · 0 评论 -
vue使用scss，全局引入公共scss样式和变量
1. 安装sass的loader, 让scss 变量可以全局使用(1)安装依赖npm install sass-resources-loader --save-dev(2) 修改build中的utils.jsreturn {// 将下面一行: scss: generateLoaders('sass')// 修改成:scss: generateLoaders('sass').concat( { loader: 'sass-resources-loader', o原创 2020-09-10 10:17:59 · 1682 阅读 · 0 评论 -
Vue 的数据响应式原理以及具体实现
一、理解Vue的设计思想MVVM框架的三要素:数据响应式、模板引擎及其渲染 (1) 数据响应式:监听数据变化并在视图中更新Object.defineProperty() Proxy(2) 模版引擎:提供描述视图的模版语法插值:{{}} 指令:v-bind，v-on，v-model，v-for，v-if(3) 渲染:如何将模板转换为html模板 => vdom => dom二、数据响应式原理数据变更能够响应在视图中，就是数据响应式。vue2中利用 Ob...原创 2020-07-05 20:03:41 · 633 阅读 · 0 评论 -
Vue 浅谈自定义指令 directive
自定义指令除了核心功能默认内置的指令 ( 和 )，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操 作，这时候就会用到自定义指令。???? 例子：输入框获取焦点1. 定义 v-focus 指令(1) 全局自定义指令// main.js// 注册一个全局自定义指令 `v-focus`Vue.directive('focus', { // 当被绑定的元素插入到 DO原创 2020-07-01 15:15:54 · 300 阅读 · 0 评论 -
vue cli-service-golbal安装后不能使用的问题
一、问题：我们在安装 @vue/cli-service-global组件后，想要执行某个单独的 *.vue文件，执行如下命令：vue serve hello.vue报错：command not found: vue二、解决方式：需要重新安装 vue-cli 命令工具npm install -g @vue/cli 就能成功把单文件跑起来啦：...原创 2020-06-25 16:08:41 · 1462 阅读 · 0 评论 -
Vue 多个平行页面间传值，非组件间传递，简单易懂
一、使用路由传递参数A页面和B页面是两个平行页面，非父子组件关系，先要将A页面的参数传递到B页面中。⚠️注意 ：query 中的参数 params ，需要使用JSON.stringify({}) 方法，把对象转化成JSON字符串A.vue 页面<el-button type="primary" size="medium" icon="el-icon-plus" @click="add">新建订单</el-button>add() { this...原创 2020-06-05 19:00:33 · 5247 阅读 · 0 评论 -
如何提升Vue的开发效率呢？ Vue-devtools帮你实现快速调试！
12原创 2020-03-31 23:27:52 · 394 阅读 · 0 评论 -
使用Vue DevTools 插件报错的问题：Vue.js is detected on this page. Open DevTools and look for the Vue panel.
这个问题，是因为没有在main.js中开启debug modemain.jsimport Vue from 'vue'Vue.config.devtools = true重新启动项目，就可以成功调试啦！原创 2020-03-31 16:12:30 · 7400 阅读 · 6 评论 -
$nextTick —— vue中实现请求数据后渲染dom
我们先看下面代码示例效果1）示例<body> <div id="app" > <div id='div' v-if="showDiv">这是一段文本</div> <button @click="getText">获取div内容</button> </div>...转载 2020-03-31 13:55:15 · 1439 阅读 · 0 评论 -
Vue 优雅的强制重新渲染子组件
原理：我们通过 :key实现，当key 值变更时，会自动的重新渲染，key的作用主要是为了高效的更新虚拟DOM。代码实现：<template> <div> <!-- 父组件 --> <div> <button @click="reLoad">点击重新渲染...原创 2019-12-29 12:16:49 · 3818 阅读 · 6 评论 -
vue-elementUI el-tree组件获取当前选中(check)的所有数据（含所有选中的二级节点和父节点）数组
获取方法如下：this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys())原创 2019-12-24 15:38:43 · 14233 阅读 · 5 评论 -
ElementUI的upload组件手动上传，并携带参数和excel文件流提交给后台
使用场景：选取好excel文件后，再把导入的excel文件和参数同时提交给服务器，需要用到文件的手动上传，但是直接拷贝官网的demo会出现问题，下面会具体说明要注意的问题点。????直接上代码：index.vue<el-form ref="importList" :rules="ImportRules" :model="importList" label-positio...原创 2019-11-01 10:25:49 · 47059 阅读 · 32 评论 -
vue报错 Emitted value instead of an instance of Error el-collapse v-for="val in content.value"
完整报错信息????：问题代码：<el-collapse v-for="(val, index) in item.list" v-model="activeListNames" class="listCollapse"> <el-collapse-item title="-点击展开子列表-" :name="index"></el-collapse...原创 2019-10-25 17:36:52 · 1938 阅读 · 0 评论 -
vue中 关于$emit的用法
1、父组件可以使用 props 把数据传给子组件。2、子组件可以使用 $emit 触发父组件的自定义事件。vm.$emit( event, arg ) //触发当前实例上的事件vm.$on( event, fn );//监听event事件后运行 fn；例如：子组件：<template> <div class="train-city"> ...转载 2019-12-12 10:13:39 · 175 阅读 · 0 评论