Vue
可乐雪碧薄荷糖
这个作者很懒,什么都没留下…
展开
-
【Vue温故】粗略实现VUE源码Computed
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.原创 2022-01-24 18:10:02 · 314 阅读 · 0 评论 -
【Vue温故】粗略实现VUE源码data与method
一.Method遗漏概念1.Vue创建实例时,会自动为methods绑定当前实例this,保证在事件监听时,回调始终指向当前组件实例2.方法要避免使用箭头函数,箭头函数会阻止Vue正确绑定组件实例this二.粗略实现代理与Method对象let Vue = (function(){ function Vue(options){ this.$data = options.data(); this._methods = options.methods;原创 2022-01-24 18:08:25 · 514 阅读 · 0 评论 -
【Vue温故】 Vue编译-内置指令
一.Vue编译vue的模板都是基于HTML,是一套模板编译系统开发者写的template->分析HTML字符串->AST树->表达式/自定义属性/指令 ->虚拟dom树->解析真实DOM->render其中通过_c_v_s三个函数构建虚拟dom树二.指令v-once会影响到子级元素中的数据绑定,若要解决,可以通过es6的${}来解决v-html 插值不会解析HTML,因为插值是JS表达式,没有对DOM的操作 rawHTML三.属性a原创 2022-01-24 18:06:04 · 1114 阅读 · 0 评论 -
Vue嵌套路由中的嵌套命名视图个人感悟
官网解释感觉没有那么通俗易懂,百度到的基本都是赋值黏贴和没有试验总结的。官网例子有墙看不到,所以可以看看我的总结。1.官网解释我们也有可能使用命名视图创建嵌套视图的复杂布局。这时你也需要命名用到的嵌套router-view组件。我们以一个设置面板为例:这个图很形象/settings/emails /settings/profile+-----------------------------------+ ..原创 2021-03-17 23:35:08 · 805 阅读 · 0 评论 -
Vue深入-28【数组劫持】
observer/array.jsimport { observe } from './index'let oldArrayProtoMethods = Array.prototype;export let newArrayProtoMethods = Object.create(oldArrayProtoMethods);let methods = ['push','shift','unshift','pop','splice','sort','reverse'];export func原创 2021-03-06 15:13:57 · 225 阅读 · 0 评论 -
Vue深入-27【对象劫持、访问属性代理】
一.对象劫持observe/index.jsimport Observer from './observer'export function initState(vm){ let options = vm.$options; if(options.data){ initData(vm); } if(options.computed){ initComputed(vm); } if(options.watch){原创 2021-03-06 15:12:07 · 232 阅读 · 0 评论 -
Vue深入-26【环境配置、基础代码编写】
一.环境配置npm init -ynpm install webpack webpack-cli webpack-dev-servernpm install html-webpack-plugin(1).webpack.config.jslet path = require('path');let HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = { entry:'./src/ind原创 2021-03-06 15:08:52 · 167 阅读 · 0 评论 -
Vue深入-25【Vue路由的使用】
一.基本使用<router-link to="/">Home</router-link><router-link to="/about">About</router-link>二.命名路由<router-link :to="{name:'home'}">Home</router-link><router-link :to="{name:'about'}">About</ro.原创 2021-03-06 15:06:01 · 167 阅读 · 0 评论 -
Vue深入-24【Vue脚手架工具剖析】
一.安装及使用(1).安装npm install -g @vue/cli(2).使用vue create xx 创建项目(3)mode分为两种hash mode localhost:8080/#/history mode localhost:8080IE10才支持 history选择yes可以开启history(4).cli plugins@vue/cli-plugin-开头的是官方插件vue-cli-plugin或其他形式则为第三方插件(...原创 2021-03-06 15:00:46 · 172 阅读 · 0 评论 -
Vue深入-23【Vue3.0源码重写『数据劫持』】
(1).了解VUE3源码管理方式、独立使用reactivity、搭建项目1.了解VUE3源码管理方式、独立使用reactivitynpm init -ynpm i @vue/reactivity -Dsrcindex.js这样就变成了响应式data 是基于proxy做的代理import {reactive} from '@vue/reactivity';const state = reactive({ name:'zza', info:{原创 2021-02-27 22:21:05 · 411 阅读 · 2 评论 -
Vue深入-22【Vue2.0『数据传递』】
(1).事件传递与值传递1.emit发送事件传递数据Mother.vue<template> <div> <h1>家庭资产{{fatherM}}</h1> <Father :fatherM = "fatherM" @earnMoney = "earnMoney" /> </div></template原创 2021-02-27 22:13:25 · 173 阅读 · 0 评论 -
Vue深入-21【虚拟节点与DOM Diff算法源码实现】
(1).了解diff算法特征、虚拟节点、创建项目1.算法特征只会平级对比不会跨级对比直接替换,不会再去操作Li标签深度优先,不是广度优先2.虚拟节点构成虚拟节点的对象落实在控制台3.建立vdom文件建立文件,执行命令npm init -y npm i [email protected] [email protected] [email protected] add html-webpack-pl原创 2021-02-27 22:02:31 · 231 阅读 · 0 评论 -
Vue深入-20【Vue2.0源码重写『数据劫持』】
(1).环境配置搭建1.建立文件,执行命令npm init -y npm i [email protected] [email protected] [email protected] yarn add [email protected].具体文件配置根目录新建文件webpack.config.jsconstpath=require('path'), HtmlWebpackPlugin=require('html-webpack-...原创 2021-02-26 20:54:25 · 161 阅读 · 0 评论 -
Vue深入-19【Vuex【state, mutations, actions, modules, getters】全解析】
(1).state/mutations/actions/getters各种写法解析vue中<template> <div> <div>{{index1}}</div> <div>{{this.$store.state.index}}</div> <div>{{showIndex}}</div> <div>{{this.$store.getters.sh原创 2021-02-25 20:55:47 · 142 阅读 · 0 评论 -
Vue深入-18【Vue2与Vue3核心之『响应式原理』】
(1).definepropertiesclass Compute{ plus(a,b){ return a+b; } minus(a,b){ return a-b; } mul(a,b){ return a*b; } div(a,b){ return a/b; }}class Calculator extends Compute{ constructor(d原创 2021-02-25 20:53:52 · 307 阅读 · 0 评论 -
Vue深入-17【vue2和vue3的区别】
(1).vue3安装安装vue1.执行命令(这个vue-next是自己命名的)vue create vue-next2.进入vue-next执行下列命令(是固定的)vue add vue-next3.启动npm run serve2.vue3写法特性基于函数<template> <div id="app"> <span>{{count}}</span> <p>原创 2021-02-25 20:50:18 · 151 阅读 · 0 评论 -
Vue深入-16【Vue核心功能讲解与应用场景分析】
(1).vuex导航栏切换index.vue<template> <div> <tab-list :tabInfo="tabInfo" /> <tab-item :itemInfo="itemInfo" /> </div></template><script>import TabItem from './tabitem'import TabList from './ta原创 2021-02-24 21:46:09 · 146 阅读 · 0 评论 -
Vue深入-15【Vue组件化设计与派发器思想】
(1).派发器初始,Vue中抽离派发器方法type => 事件 => 逻辑 => type => 派发器 => 数据的更改actionsconst PLUS = 'PLUS', MINUS = 'MINUS';export{ PLUS,MINUS} reducersfunction counterReducer(data){ function plus(){ return data.resul.原创 2021-02-24 21:39:57 · 415 阅读 · 0 评论 -
Vue深入-14【VueJS矫正组件化开发方式】
(1).工程化项目通过下面得命令进行初始化(2).开发步骤1.获取数据获取数据得三种方式: axios fetch jquery ajax2.ajax封装二次封装ajax,且做成数据请求层3.Vue组件原创 2021-02-24 21:34:14 · 109 阅读 · 0 评论 -
Vue深入-13【手写lazyload-2与函数调用组件】
(1).lazyloadexport default (Vue) =>{ class ReactiveListener{ constructor({el,src,elRenderer,options}){ this.el = el, this.src = src, this.elRenderer = elRenderer, this.options = options;原创 2020-12-11 09:44:04 · 150 阅读 · 0 评论 -
Vue深入-12【手写lazyload-1】
(1).VueLazyLoad的基本使用npm i vue-lazyload -Smain.js中引入import VueLazyload from 'vue-lazyload';Vue.use(VueLazyload,{ preLoad:1.3,//滑动到1.3倍高度加载图片 loading:'loading.gif'})使用<img v-lazy="xx"/>(2).自己实现编写指令Vue.user会先执行Install方法main.j.原创 2020-12-11 09:41:43 · 155 阅读 · 1 评论 -
Vue深入-11【无限多级菜单】
待更新原创 2020-12-11 09:37:36 · 131 阅读 · 0 评论 -
Vue深入-10【表单组件、插槽】
(1).插槽1.匿名插槽引入时用双标签 就会把插槽值赋值进去<template> <div> <h1>父亲</h1> <slot></slot> </div></template><template> <div> <h1>儿子</h1> <parent原创 2020-12-11 09:36:39 · 842 阅读 · 0 评论 -
Vue深入-9【兄弟组件间通信】
(1).组件间通信1.通过$emit传递事件通信改变父亲的data值从而改变另一个兄弟组件的值<template> <div> <h1>父亲</h1> <p>name:{{name}}</p> <hr/> <Child1 :name="name" @childOneClick="name=$event"/>原创 2020-12-10 10:14:08 · 237 阅读 · 0 评论 -
Vue深入-8【组件注册、父子组件通信】
(1).注册组件的两种方式1.全局注册组件<script> Vue.component('my-cmp',{ template:'<div>我的全局注册组件</div>' })</script>2.局部注册组件let myLocalCmp={ template:'<div>我的局部注册组件</div>'}new Vue({ el:'#app', c原创 2020-12-10 10:12:23 · 196 阅读 · 0 评论 -
Vue深入-7【Vue中生命周期、组件】
(1).生命周期1.beforeCreate/created执行步骤: beforeCreate-created用途: beforeCreatevux/vuerouter中混入一些全局属性,也可以写数据请求作用:创建实例区别:created会比beforeCreate的this多一个_data 访问的时候会做代理直接访问data,也就是说可以访问到我们定义的message信息了后续步骤:先判断有没有el 如果传入el了 看传没传templeate 有则生成render函数,如果没原创 2020-12-10 10:07:09 · 222 阅读 · 0 评论 -
Vue深入-6【Vue中计算属性、过滤器、自定义属性】
(1).计算属性1.通过双向绑定与计算属性实现复选框自动选择双向绑定计算属性,从而实现点击三个checkbox最后一个被选中<div id="app"> <input type="checkbox" v-for="item in items" :key="item.id" v-model="item.completed" /> <input type="checkbox原创 2020-12-10 09:52:21 · 287 阅读 · 0 评论 -
Vue深入-5【Vue中自定定义一个表单控件、watch】
(1).v-model在表单控件中1.input控件<input type="text" v-model="message"/>2.select控件<select v-model="result"> <option value="" disabled>请选择</option>//这样即可设置默认为请选择但是无法再次选择 <option v-for="subject in subjects"原创 2020-12-10 09:47:16 · 248 阅读 · 0 评论 -
Vue深入-4【Vue中事件处理函数绑定、v-model】
四.Vue中事件处理函数绑定、v-model(1).事件处理函数绑定1.data中得事件事件可以写在data中,但是里面的this是指向window的<body> <div id="app"> <div @click="onClick">xx</div> </div> <script src="vue2引入"></script> <script>原创 2020-12-10 09:43:31 · 2989 阅读 · 0 评论 -
Vue深入-3【Vue中实例方法、指令】
(1).vue3的挂载1.createApp创建vue3的挂载方法不是通过new Vue挂载的,而是通过createApp创建和mount 挂载的createSSRapp可以创建服务端<body> <div id="app"></div> <script src="vue3引入"></script> <script> const Counter = {原创 2020-12-09 09:24:34 · 1396 阅读 · 0 评论 -
Vue深入-2【VUE3使用proxy】
(1).Proxy1.与defineProperty区别与defineProperty的区别是缺少了key这个参数,也就是说它是对与某一个key的proxy得兼容性比较差defineProperty只要遇到对象就会劫持,proxy则是只会代理第一层2.proxy得基础使用new Proxy(obj,{ get(){}, set(){}})person.name ="xx" 这样并不会响应get setlet proxyPerson = new Proxy(o原创 2020-12-09 09:21:05 · 1754 阅读 · 0 评论 -
Vue深入-1 【vue基础深入介绍/响应式】
(1).vue基础介绍1.vue是一个渐进式框架响应式(vue核心)+vue组件化+vue Router + Vuex + vue CLI2.vue的不同构建版本runtime+compiler = fullruntime = runtime-only而compiler就是将template 转换为render的new Vue({ template:'<div></div>'})经过compilernew Vue({ ren原创 2020-12-09 09:17:54 · 196 阅读 · 0 评论 -
Vue-9【JS钩子、多元素组件、列表过渡、动画封装】
一.js钩子(1).基础js钩子可以用js来实现动画过渡在transition上加入@before-enter/@enter/@after-enter =“xx”即可实现Js钩子<div id="root"> <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">原创 2020-12-07 09:11:29 · 99 阅读 · 0 评论 -
Vue-8【CSS过渡、动画、自定义过渡、使用过渡和动画】
一.CSS过渡/动画(1).执行步骤元素插入前 v-enter(进场动画开始)-v-enter-active(进场动画生效了) 元素被插入后的下一帧 v-enter销毁-v-enter-to(进场动画结束) 过渡动画结束时刻 v-enter-active与v-enter-to销毁出场enter变为leave即可(2).样式说明v-enter:进场动画的开始v-enter-active:进场动画生效v-enter-to:进场动画结束(3).transition标签...原创 2020-12-07 09:11:16 · 184 阅读 · 0 评论 -
Vue-7【单个插槽、具名插槽、作用域插槽、动态组件】
一.插槽<slot></slot> 内容分发的出口如果直接静态传递,用胡子来表示会输出成字符串所以用v-html来解决,但是会被包裹,template又不兼容v-html<div id="root"> <child content="<p>书籍b</p>"></child> </div> <script> Vue.component原创 2020-12-07 09:11:05 · 275 阅读 · 0 评论 -
Vue-6【prop与非prop、.native、非父子组件传值】
一.prop与非prop(1).静态传值,动态传值静态传值“”中为字符串,动态传值:count=""中为js表达式静态传值是没有引用的,就只是子组件自己给自己传值动态传值则是指向根目录的,应用于父组件给子组件传值<div id="root"> <btn :count="num"></btn> <btn count="5"></btn> </div> <sc.原创 2020-12-06 13:45:47 · 230 阅读 · 0 评论 -
Vue-5【列表渲染、DOM模板、子组件data、ref属性】
一.列表渲染(1).input临时数据保留vue只会处理上面的列表,但是下面的input临时的输入则不跟随上方的列表改变而改变,留在原地了为了解决这个问题用key(2).数组数据保留:key="item.xx"<div id="root"> <div v-for="(item,index) of list" :key = "item.id"> {{item}}-{{index}} </di原创 2020-12-06 13:36:25 · 337 阅读 · 0 评论 -
Vue-4【class绑定、style绑定、条件渲染】
一.class绑定v-bind:class动态绑定属性普通的类和绑定的类是可以共存的(1).字符串绑定要在样式名称上加''因为要解析成字符串 <style> .active{ color: #f40 } </style></head><body> <div id="root"> <span :class="'active'..原创 2020-12-06 13:19:52 · 214 阅读 · 0 评论 -
Vue-3【生命周期、模板、计算属性、方法、侦听器】
一.生命周期(1).生命周期图实例销毁后双向绑定无法生效 调用destoryed二.模板语法(1).v-once会造成插值的数据只会渲染一次,之后不会自动渲染<div id="root"> <span v-once>{{content}}</span></div><body> <script> let vm = new Vue({..原创 2020-12-06 13:14:51 · 211 阅读 · 0 评论 -
Vue-2【组件介绍、组件的注册、命名、组件间传值】
一.组件介绍(1).使用组件原因 提高开发效率 方便重复使用 简化测试步骤 提升项目维护性 便于协同开发二.组件(1).全局注册Vue.component('TodoItem',{ template:'<li>今天你吃饭了吗</li>'})(2).组件命名两种命名方式:驼峰-短横线(kebab-case)驼峰命名时调用的时候必需用短横线调用方式如果用短横线命名,则可以直接使用标签<div id="r..原创 2020-12-06 13:10:28 · 186 阅读 · 0 评论