vue
关注
分享
扫一扫
旺柴。
。
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
自定义vue组件 和 自定义vue组件npm包
自定义组件 <div id="components-demo" style="margin-top:10px"> <button-counter></button-counter> </div>import Vue from 'vue';Vue.component('button-counter',{ template: '<button @click="count+=1">点击了{{count}}次</but原创 2022-03-08 16:17:43 · 1186 阅读 · 1 评论 -
Vue.js 容易忽略的 API 详解
nextTicknextTick 是 Vue.js 提供的一个函数，并非浏览器内置。nextTick 函数接收一个回调函数 cb，在下一个 DOM 更新循环之后执行。比如下面的示例：<template> <div> <p v-if="show" ref="node">内容</p> <button @click="handleShow">显示</button> </div></templat转载 2021-09-09 11:41:52 · 182 阅读 · 1 评论 -
vue复习——mixins
Mixins(混入)混入，很久没用了，复习一下，我所理解的混入其实与computed一样，不会改变原先的值，只会做一层过滤。就像computed一样，像filter一样，像vuex中的getter一样。接下来，我用几张图片来展示一下混入的用法，这几张图片分别从，值，方法，生命周期来展示。值混合对象中的参数num组件1中的参数num进行+1的操作组件2中的参数num未进行操作看两组件中分别输出的num值可以看到，确实只是过滤的作用方法混入对象中的方法组件中的方法打印输出原创 2021-09-08 21:37:57 · 120 阅读 · 0 评论 -
vue2中的provide和inject
前言我们云诊室因为是单文件富应用。一个页面无数个无数层组件，用到非常多的props和$emit，今天不小心看到 provide和inject 这两个属性，也可以用来传值，在这里记录一下。首先先来个复习。复习父传子：props子传父：$emit父获取或调用子的数据或方法：this.$ref['child']，this.$children子获取父组件的属性或方法：this.$parents开始provide和inject是 提供与注入的意思，在这里我想到了nest里面service层作为pr原创 2021-09-03 10:31:47 · 7096 阅读 · 0 评论 -
vue数据流动问题
computed某个函数内只要有一个值发生变化，这个函数就会重新执行原创 2021-04-26 14:27:49 · 219 阅读 · 0 评论 -
vue3为什么使用Proxy代替Object.defineProperty
数据劫持Object.defineProperty使用 Object.defineProperty 当 获取 或者 设置 对象的 属性 的时候，触发get、set方法，实现变化的监听const data = { name: "xiaoming", sex: "男", }; // 遍历对象,对其属性值进行劫持 Object.keys(data).forEach((key) => { let val = data[k原创 2021-01-05 10:23:23 · 927 阅读 · 0 评论 -
el-dropdown-item的点击事件
el-dropdown-item的点击事件<el-dropdown> <span class="user"></span> <el-dropdown-menu slot="dropdown"> <el-dropdown-item @click.native="changePassword">修改密码</el-dropdown-item> <el-dropdown-item @cli原创 2020-11-06 20:56:57 · 2106 阅读 · 0 评论 -
elementUI,根据路径左侧侧边栏被选中
elementUI,根据路径 左侧侧边栏被选中，刷新后也不消失。 :default-active="$route.path"原创 2020-11-05 15:33:51 · 586 阅读 · 0 评论 -
项目中引入阿里巴巴矢量库(unicode)
首先选择阿里巴巴矢量库添加到项目，下载到本地。将下列几个文件添加到项目在main.js中引入import '../src/assets/scss/iconfont/iconfont.css';原创 2020-10-30 10:16:00 · 597 阅读 · 0 评论 -
vue源码解析(一)：Object的变化侦测
Data通过Observer转换成了 getter/setter的形式来追踪变化。(vue3之前是基于Object.defineProperty实现，vue3是基于proxy实现)。当外界Watcher读取数据时候，会触发getter将所有相关的Watcher添加到Dep中。当数据发生了变化时，会触发setter，从而向Dep中的依赖(Watcher)发送通知。Watcher接收通知后，会向外界发送通知，变化通知到外界可能会发生视图更新，也有可能触发用户的某个回调函数(computed)。...原创 2020-10-20 16:31:40 · 283 阅读 · 0 评论 -
vue中v-for为什么要增加key?
测试代码<!DOCTYPE html><html><head> <title>03-key的作用及原理?</title></head><body> <div id="demo"> <p v-for="item in items" :key="item">{{item}}</p> </div> <script src原创 2020-10-20 10:29:25 · 791 阅读 · 0 评论 -
vue每个周期主要干什么？
一、初始化阶段new Vue() ————》beforeCreate————》Created初始化这个Vue实例，在这个Vue实例上初始化属性，数据，事件(props、data、methods、computed、watch等)所以，在created周期中，可以获取、操作数据了，也可以在methods中发起xhr后端请求了二、模板编译阶段Created 到 beforeMount 之间是 模板编译阶段这里是vue-loader将 <template>编译为 render函数，如果原创 2020-10-13 23:15:28 · 900 阅读 · 0 评论 -
vue渲染过程
把模板编译为render函数实例进行挂载, 根据根节点render函数的调用，递归的生成虚拟dom对比虚拟dom，渲染到真实dom组件内部data发生变化，组件和子组件引用data作为props重新调用render函数，生成虚拟dom, 返回到步骤3第一步：模板变成render函数App.vue// App.vue <template> <div> hello word </div></template>.原创 2020-09-22 07:26:56 · 356 阅读 · 0 评论 -
node+vue项目开发时用到的一些命令
一. 开发前的准备1. 下载node官网：http://nodejs.cn/download/检测node版本 命令行 ： node-v检测npm 命令行 ：npm -v2.全局安装webpack命令行 ： npm install webpack -g3.全局安装脚手架（vue-cli）命令行 ：npm i...原创 2020-03-30 11:54:13 · 372 阅读 · 0 评论 -
axios拦截器
对拦截器暂时的理解是拦截错误，把所有的错误在http部分拦截下来(422)，不用在每个接口通信（前端）处设置。原创 2020-08-21 22:22:05 · 161 阅读 · 0 评论 -
element-ui date-picker日期格式化
el-date-picke标签内添加一句value-format=”yyyy-MM-dd” 即可<el-date-picker type="date" v-model="createdate" value-format="yyyy-MM-dd" placeholder="选择时间"></el-date-picker>...原创 2020-08-21 22:23:14 · 675 阅读 · 0 评论 -
vue中对局部注册和全局注册的理解
全局注册全局注册在main.js中，全局注册后，在任意xx.vue页面都可以使用。局部注册只能在本页面使用，适合轮播图这样的组件原创 2020-08-21 22:23:30 · 430 阅读 · 0 评论 -
vue超出(规定字数)文本用省略号代替
加个fliters拦截器html代码部分：加 {{item.title| ellipsis}} <div class="main_news_list d-flex flex-column my-3 px-3"> <router-link to="`/news/${item._id}`" tag="div" ...原创 2020-04-10 20:50:17 · 3416 阅读 · 0 评论