vue的简单笔记
关注
分享
扫一扫
2333
五月dē雪
这个作者很懒，什么都没留下…
展开
-
Vue 中 $listeners 的使用方法
$listeners 的官方介绍：包含了父作用域中的 (不含.native修饰器的)v-on事件监听器。它可以通过v-on="$listeners"传入内部组件——在创建更高层次的组件时非常有用。下面代码中包含一个子组件和一个父组件，子组件需要调用父组件中的方法，可以通过$listeners.方法名形式调用。方法名必须在父组件中被定义，因为子组件是在父组件的模块中来使用的，通过$listeners 可以很好的用在多次传递方法<div id="app"> ...转载 2022-01-24 15:17:32 · 813 阅读 · 0 评论 -
Vue中的$attrs和inheritAttrs
官网的文档简短而又不清晰，实在是看不懂，只好自己找代码验证来看看是什么意思：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>转载 2022-01-24 14:49:02 · 433 阅读 · 0 评论 -
Vue在IE下打开空白的解决方案
不需要装babel-polyfill！首先说前置条件：使用的Vue Cli 4.x 创建的项目 package.json里面的devDependencies节点中的@vue/cli-plugin-babel版本是4.x 装了babel-polyfill请卸载掉npm uninstall babel-polyfill，因为@vue/cli-plugin-babel里面已经包含了这个玩意 vuejs的版本是2.x然后可以看官方文档了：浏览器兼容性 | Vue CLI解决方案：1.pa转载 2022-01-21 14:32:30 · 446 阅读 · 0 评论 -
修改vant design 的样式
一、全局修改1.新建一个css文件2.在main.js中引入这个css文件即可二、局部改变1.如果只想改变一个组件中的个别样式，则需要使用深度选择器::v-deep原创 2021-12-20 09:44:24 · 491 阅读 · 0 评论 -
Vue中通过$event获取元素
<button @click = “clickfun($event)”>点击</button>methods: {clickfun(e) {// e.target 是你当前点击的元素// e.currentTarget 是你绑定事件的元素 #获得点击元素的前一个元素 e.currentTarget.previousElementSibling.innerHTML #获得点击元素中的class属性 e.currentTarget.clas..原创 2021-12-17 11:17:32 · 1531 阅读 · 0 评论 -
Vue中props属性
props功能：让组件接受外部传过来的数据（1）：传递数据：<Demo name="xxx"/>（2）：接受数据： 第一种：（只接收）：props: ['name'] 第二种：（限制类型）：props:{ name:Number } 第三种：（限制类型，限制必要性，指定默认值）： props: { name: { type: String, requir...原创 2021-11-30 14:30:58 · 20522 阅读 · 1 评论 -
Vue自定义指令
一、定义语法： 1.局部指令：new Vue({ directives:{ 指令名：配置对象 }})或new Vue({ directives:{ 指令名：回调函数 }}) 2.全局指令：Vue.directive(指令名，配置对象) 或 Vue.directive(指令名，回调函数)二、配置对象中常用的3个回调： 1、.bind: 指令...原创 2021-11-26 16:12:42 · 603 阅读 · 0 评论 -
Vue监视数据
1.vue会监视data中所有层次的数据。2.如何检测对象中的数据？ -通过setter实现监视，且要在new Vue时就传入要监测的数据 -（1）对象中后追加的属性，Vue默认不做响应式处理 -（2）如需给后添加的属性做响应式，应使用如下API： Vue.set(target, propertyName/index, value) 或 this.$set(target, proper...原创 2021-11-25 20:06:50 · 95 阅读 · 0 评论 -
NProgress 使用
1.安装NProgress包 npm install --save nprogerss2.导入 NProgress 包对应的JS和CSSimport NProgress from 'nprogress'import 'nprogress/nprogress.css'3.在 request 拦截器中，展示进度条 NProgress.start()axios.interceptors.request.use(config => { NProgress.start(..原创 2021-09-23 19:24:07 · 170 阅读 · 0 评论 -
element-UI中级联选择器cascader的问题及解决
-使用新版的cascader，通过官网的代码进行修改<el-cascader :options="parentCateList" :props="{ expandTrigger: 'hover', value: 'cat_id', label: 'cat_name', children: 'children', checkStrictly: true }" v-model="selectedKeys" @change="parentCa转载 2021-09-22 11:55:28 · 1870 阅读 · 0 评论 -
vue cli2/3的项目创建
-Vue CLI2初始化项目 -vue init webpack 项目名称-Vue CLI3初始化项目 -vue create 项目名称原创 2021-07-28 11:10:29 · 91 阅读 · 0 评论 -
vscode中使用webpack
1.点击VSCode图标，选择以管理员身份运行；2.在终端中执行get-ExecutionPolicy，显示Restricted，表示状态是禁止的；3.这时执行set-ExecutionPolicy RemoteSigned；4.此时再执行get-ExecutionPolicy，显示RemoteSigned，则表示状态解禁，可以运行5.此时在vscode终端就可以使用cnpm淘宝镜像了...原创 2021-07-22 11:33:06 · 516 阅读 · 0 评论