![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
Jay_帅小伙
这个作者很懒,什么都没留下…
展开
-
vue组件化常用技术__组件通信
父组件---->子组件props传值 // parent <HelloWorld msg="Welcome to Your Vue.js App"/>// child props: { msg: String }ref传值//parentthis.$refs.hw.foo = "bar";//或者this.$children[0].foo = "dong";//child//存在this中--------------------------------/原创 2020-06-01 17:09:02 · 213 阅读 · 0 评论 -
vue原理学习1
kvue.js// 定义KVue构造函数class KVue { constructor(options) { // 保存选项 this.$options = options; // 传入data this.$data = options.data; // 响应化处理 this.observe(this.$data); // new Watcher(this, "foo"); // this.foo; //读一次,触发依赖收集原创 2020-06-07 16:37:56 · 180 阅读 · 0 评论 -
low版vuex
kvuex.js// 1.维护状态state// 2.修改状态commit// 3.业务逻辑控制dispatch// 4.状态派发getter// 5.实现state响应式// 6.插件// 7.混入let Vue;function install(_Vue) { Vue = _Vue; // 混入:把store选项指定到Vue原型上 Vue.mixin({ beforeCreate() { if (this.$options.store) {原创 2020-06-03 23:03:55 · 96 阅读 · 0 评论 -
实现一个vue插件Bus
plugins/bus.jsclass Bus { constructor(){} emit(){} on(){}}Bus.install = function (Vue) { Vue.prototype.$bus = new Bus();}export default Bus在main.js里面Vue.use(Bus)混入一下,复用方法export default { methods: { dispatch(eventName, dat原创 2020-06-02 22:54:34 · 169 阅读 · 0 评论 -
自己实现低配版vue-router
vue-routerlet Vue;class VueRouter { constructor(options) { this.$options = options; // 创建一个路由path和route映射 this.routeMap = {}; // 将来当前路径current需要响应式 // 利用Vue响应式原理可以做到这一点 this.app = new Vue({原创 2020-06-02 22:06:37 · 120 阅读 · 0 评论 -
vue-router动态添加路由,利⽤$router.addRoutes()常⽤于⽤户权限控制
// 映射关系const compMap = { 'Home': () => import("./view/Home.vue")}// 异步获取路由api.getRoutes().then(routes => { const routeConfig = routes.map(route => mapComponent(route)); router.addRoutes(routeConfig);})// 递归替换function mapComponent(route原创 2020-06-02 16:52:47 · 107 阅读 · 0 评论 -
vue_tree组件
item<template> <li> <div @click="toggle"> <!-- 标题 --> {{model.title}} <!-- 有子元素就显示 --> <span v-if="isFolder">[{{open ? '-' : '+'}}]</span> </div> <!-- 子树 -->原创 2020-06-01 22:53:39 · 286 阅读 · 0 评论 -
封装vue的弹窗组件
先写一个工具函数,创建组件实例// 创建指定组件实例并挂载于body上import Vue from 'vue';export default function create(Component, props) { // 0. 先创建vue实例 const vm = new Vue({ render(h) { // render方法提供给我们一个h函数,它可以渲染VNode return h(Component, {pr原创 2020-06-01 22:49:04 · 582 阅读 · 0 评论 -
vue的.sync和v-model的区别
//v-model和.sync<!--v-model是语法糖--><Input v-model="username"><!--默认等效于下⾯这⾏--><Input :value="username" @input="username=$event">// 但是你也可以通过设置model选项修改默认⾏为,Checkbox.vue{ model: { prop: 'checked', event: 'change' }}// 上⾯这样设置会原创 2020-06-01 22:21:26 · 516 阅读 · 0 评论 -
low版vue_Form组件
input双向绑定 @input :vlaue派发校验事件<template> <div> <!-- 自定义组件要实现v-model必须实现:value, @input --> <!-- $attrs存储的是props之外的部分 --> <!-- {type:'password'} --> <input :value="value" @input="onInput"原创 2020-06-01 21:30:09 · 104 阅读 · 0 评论