![](https://img-blog.csdnimg.cn/20191212102253114.jpeg?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue 深入浅出
文章平均质量分 65
提莫拌一团蘑菇
这个作者很懒,什么都没留下…
展开
-
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 · 1451 阅读 · 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 · 446 阅读 · 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 · 231 阅读 · 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 · 1342 阅读 · 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 · 4179 阅读 · 0 评论 -
如何提升Vue的开发效率呢? Vue-devtools帮你实现快速调试!
12原创 2020-03-31 23:27:52 · 310 阅读 · 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 · 6957 阅读 · 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 · 1304 阅读 · 0 评论 -
Vue 优雅的强制重新渲染子组件
原理:我们通过 :key实现,当key 值变更时,会自动的重新渲染,key的作用主要是为了高效的更新虚拟DOM。代码实现:<template> <div> <!-- 父组件 --> <div> <button @click="reLoad">点击重新渲染...原创 2019-12-29 12:16:49 · 3737 阅读 · 6 评论 -
vue-elementUI el-tree组件获取当前选中(check)的所有数据(含所有选中的二级节点和父节点)数组
获取方法如下:this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys())原创 2019-12-24 15:38:43 · 12989 阅读 · 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 · 45622 阅读 · 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 · 1865 阅读 · 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 · 120 阅读 · 0 评论