![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
√3-√2
这个作者很懒,什么都没留下…
展开
-
记录uni-app开发
uni-app 开发踩坑记录原创 2023-03-14 12:50:48 · 162 阅读 · 2 评论 -
Vue组件源码组件初始化和数据响应式思维导图
https://www.processon.com/view/link/5da6c108e4b002a6448895c3#map原创 2020-09-13 02:01:46 · 100 阅读 · 0 评论 -
0907-实现vue的响应式和事件的处理
function defineReactive(obj,key,val) { // 嵌套对象需要递归遍历 observe(val); const dep = new Dep(); Object.defineProperty(obj,key,{ get(){ console.log(`get ${key}`) Dep.target && dep.addDep(Dep.target)原创 2020-09-07 23:43:59 · 139 阅读 · 0 评论 -
0901-自定义vuex的实现
let Vue;class Store { // 这个地方的参数是在实例化的时候传入的参数 constructor(options) { //保存一下actions和mutations this._actions = options.actions; this._mutations = options.mutations; //利用vue把state做成响应式的 this._vm = new Vue({原创 2020-09-06 22:59:34 · 108 阅读 · 0 评论 -
0901-自定义路由插件
let Vue;class KVueRouter { // 该参数 是new Router({routes})中的对象里面的配置 constructor(options) { // 把参数缓存下来 this.$options = options; //缓存 path与routes的映射关系 this.routeMap = {}; this.$options.routes.forEach((route) =>原创 2020-09-06 22:51:05 · 72 阅读 · 0 评论 -
自定义弹框 挂载到全局
KToast.vue<template> <div class="toasts" v-if="isShow"> {{ msg }} </div></template><script>export default { name: 'KToast', data() { return { msg: '', isShow: false原创 2020-09-01 18:02:00 · 168 阅读 · 0 评论 -
0830-弹框组件源码的实现
弹框组件的实现;实现思路:1.封装一个Notice.vue的组件,主要放置弹框组件的模板样式;2.接受父组件传递的参数:title、message、duration3.data里面定义弹框的状态4.实现两个方法一个是组件的显示一个是组件的隐藏;在组件显示的方法里面实现一个定时关闭的方法;在隐藏的方法里面调用remove() remove()方法是在调用的自己实现的create方法里面5.实现一个create方法;用来把弹框组件在body标签后面追加实现方法1:1.通过实例化组件,使用ren原创 2020-08-31 01:04:42 · 85 阅读 · 0 评论 -
0830-表单组件的实现
– processon.com: 免费在线作图、实时协作– 暗号:杨哥喊你来搬砖使用到的组件–Kinput.vue1.主要放置input数据,自定义模板实现数据的双向绑定 v-model语法糖 @input事件 :value接受父组件传递来的value,type默认值设置[text]2.input 事件用来将value值传递出去 并且触发事件的校验 this.emit(′input′,e.target.value)this.emit('input',e.target.value) this.原创 2020-08-31 01:05:09 · 65 阅读 · 0 评论 -
vue中函数式组件
Vue官方文档的demo总是会省略很多东西,对于我们这样的小萌新十分不友好啊喂。函数式组件这块儿(链接https://cn.vuejs.org/v2/guide/render-function.html#函数式组件)这个demo啊,并没有实现什么实际的东西,还是需要自己去编写。我把它编辑好了,大家可以参考一下。首先,html这块儿: vue实例名为app,组件名为smart-list,这个组件可以根据我绑定的items来更改对应的不同内容,具体的见下面的js部分://当父组件传过来的是空i原创 2020-08-25 22:38:01 · 246 阅读 · 0 评论 -
vue.config配置
项目模板地址 (该项目包含代码校验规则)https://www.npmjs.com/package/jyl-template-vue-demonpm i jyl-template-vue-demo//const StyleLintPlugin = require('stylelint-webpack-plugin');const path = require('path');// 将打包后的 JS/CSS/IMG/FONTS 等资源统一放到 static 目录中const ASSER原创 2020-08-25 22:36:10 · 248 阅读 · 0 评论 -
vue种css module化
在vue中使用css modules替代scroped前面的话 css modules是一种流行的模块化和组合CSS的系统。 vue-loader提供了与css modules的集成,作为scope CSS的替代方案。本文将详细介绍css modules引入 最开始使用Vue的时候,提倡并大量使用的是scoped这种技术复制代码复制代码 这个可选 scoped 属性会自动添加一个唯一的属性 (比如 data-v-21e5b78) 为组件内 CSS 指定作用域,编译的时候 .list-c原创 2020-08-25 22:35:29 · 1617 阅读 · 0 评论 -
关于vue-router当中addRoutes的使用
关于addRoutes使用背景 :权限控制,判断用户是否有该页面的权限,可以使用router.addRoutes([设置路由]);优点:当用户没有权限,在浏览器输入地址不会出现该页面,直接跳转到配置的404页面;/* 默认初始路由 */export default new Router({ routes: [ { path: '/login', component: Login } ]})/* 准原创 2020-08-25 22:34:39 · 4700 阅读 · 0 评论 -
自定义组件使用v-model
v-model只是一个语法糖,等于:value+@input,真正的实现靠的还是: v-bind:绑定响应式数据,触发 input 事件并传递数据 (核心和重点)<input v-model="something">等于<input :value="something" @:input="something = $event.target.value">因此,对于一个带有 v-model 的输入框组件,它应该:接收一个 value prop,触发 input 事件,并传原创 2020-08-24 11:28:37 · 146 阅读 · 0 评论 -
vue遗漏知识点
vue 相关知识点1. $attrs和$listeners 二次封装组件当我们对第三方组件进行二次封装,但是不想重写组件上原有的属性 可以使用 v-bind="$attrs"例如 封装的第三方组件:<template><div><el-button v-bind="$attrs">确定</el-button></div></template> 使用封装的第三方组件: <my-button type="parmery"原创 2020-07-13 23:17:13 · 102 阅读 · 0 评论