随笔分类 -  Vue

Vue3 父组件调用子组件的方法
摘要：Vue3 父组件调用子组件的方法 // 父组件 <template> <div> 父页面 <son-com ref="sonRef"/> <button @click="handleClick">test</button> </div> </template> <script> import { d 阅读全文
posted @ 2020-12-02 21:57 雨中愚 阅读(39568) 评论(7) 推荐(2)
Vue指令及自定义指令的使用
摘要：导航列表： 一、vue指令 二、自定义指令 一、vue指令 回到顶部 1. v-text v-text主要用来更新textContent，可以等同于JS的text属性，不会解析标签，会把标签解析成文本 <span v-text="msg"></span> 这两者等价： <span>{{msg}}</ 阅读全文
posted @ 2020-09-27 17:57 雨中愚 阅读(501) 评论(0) 推荐(0)
vue-cli 运行打开浏览器
摘要：在项目配置好之后，打开package.json文件，找到运行的script，其中“serve”中的配置在后边加上' --open'; "scripts": { "start": "npm run serve", "serve": "vue-cli-service serve --open", }, 阅读全文
posted @ 2019-07-16 20:58 雨中愚 阅读(1270) 评论(0) 推荐(0)
sync 修饰符在Vue中如何使用
摘要：在有些情况下，我们可能需要对一个 prop 进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以修改父组件，且在父组件和子组件都没有明显的改动来源。 这也是Vue官方推荐以 update:myPropName 的模式触发事件取而代之。举个例子，在一个包含 title prop 阅读全文
posted @ 2019-05-14 14:42 雨中愚 阅读(1035) 评论(0) 推荐(0)
自定义组件 v-model 的使用
摘要：一、 $emit('input', params) 二、通过在model属性中自定义事件： 阅读全文
posted @ 2019-05-14 14:39 雨中愚 阅读(4489) 评论(0) 推荐(0)
vue父组件中调用子组件的方法
摘要：Vue项目中如何在父组件中直接调用子组件的方法： 方案一：通过ref直接调用子组件的方法； //父组件中 <template> <div> <Button @click="handleClick">点击调用子组件方法</Button> <Child ref="child"/> </div> </te 阅读全文
posted @ 2019-05-07 15:38 雨中愚 阅读(249152) 评论(10) 推荐(6)
Vue中使用 iview 之-踩坑日记
摘要：导航列表： 一、iview单选框Select验证问题 回到顶部 一、iview单选框Select验证问题 先看下基本案例： 完整案例地址：https://run.iviewui.com/ySGFAEoH 上面的案例不管如何选择，它都会报错，为什么会一直报错呢？代码看起来也没有问题！！！ 在iview 阅读全文
posted @ 2019-03-20 13:36 雨中愚 阅读(16471) 评论(0) 推荐(0)
路由懒加载---Vue Router
摘要：一、什么是懒加载？ 懒加载也就是延迟加载<!--?xml version="1.0" encoding="UTF-8"?-->或者按需加载，即在需要的时候进行加载。 二、为什么在Vue路由中使用懒加载？ 像vue这种单页面应用，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入 阅读全文
posted @ 2019-03-16 17:30 雨中愚 阅读(1420) 评论(0) 推荐(0)
Vue组件传值（三）之 深层嵌套组件传值 - $attrs 和 $listeners
摘要：$attrs 包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组 阅读全文
posted @ 2019-03-07 16:00 雨中愚 阅读(11423) 评论(0) 推荐(1)
Vue组件传值（二）之 非父子组件传值
摘要：Vue中非父子组件之间是如何实现通信的？ 本章主要讲的是非父子组件传值，父子组件传值请看上一篇文章。 1、创建新的Vue实例引入项目中，通过$emit、$on来实现非父子组件传值； 2、是否感觉非父子之间传值很神奇，那么如何自己实现$on、$emit、$off，通过写入下面标红代码即可实现非父子组件 阅读全文
posted @ 2019-03-06 18:18 雨中愚 阅读(562) 评论(0) 推荐(1)
Vue组件传值（一）之 父子之间如何传值
摘要：Vue中组件之间是如何实现通信的？ 1、父传子： 父传子父组件通过属性进行传值，子组件通过 props 进行接受； props 接收值的方式有两中：一种是数组另一种是对象； props 通过对象接收还可以定义其他东西，也可以利用这些来实现封装一些组件方便下次使用直接调用就好，下面来看一下: prop 阅读全文
posted @ 2019-03-05 16:41 雨中愚 阅读(1569) 评论(0) 推荐(0)
vuex前端工程化之动态导入文件--require.context( )
摘要：先看一个项目中store项目结构： 过去都是通过import分别引入文件： 通过上述引入虽然可以达成效果但是如果有很多文件呢？难道也要一个一个引入？那么如何动态加载modules文件下的所有JS文件呢？ 那么这里就会用到webpack文档中的require.context( ) ，来实现前端工程化； 阅读全文
posted @ 2019-02-28 17:45 雨中愚 阅读(7167) 评论(0) 推荐(1)
vue中如何深度监听一个对象？
摘要：大家都知道，Vue项目中对数据的监听，提供了一个很好的钩子watch，watch可以极其方便的监听我们常用数据类型值的变化，但通常当我们想监听一个对象中，某个属性值的变化时，很难达到我们预期的效果。那么如何实现对象属性的深度监听呢？ demo: https://run.iviewui.com/oW2 阅读全文
posted @ 2019-02-27 15:32 雨中愚 阅读(76759) 评论(0) 推荐(4)
v-for列表渲染之数组变动检测
摘要：demo : https://run.iviewui.com/9OwDCfZE 结果发现数组中的值虽然发生了变化，但是watch中并没有监听到数组的变化，并且DOM也没有发生改变； 3.<!--?xml version="1.0" encoding="UTF-8"?--> 如何解决并让DOM更新？ 阅读全文
posted @ 2019-02-27 14:42 雨中愚 阅读(1836) 评论(0) 推荐(0)
Vue项目-初始化之 vue-cli
摘要：1.初始化项目 a.Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供： 通过 @vue/cli 搭建交互式的项目脚手架。 通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。 一个运行时依赖 (@vue/cli-service)， 阅读全文
posted @ 2019-02-26 10:56 雨中愚 阅读(416) 评论(0) 推荐(0)