Vue
文章平均质量分 53
豆浆油条_煎bingo子
2646507129
展开
-
vue源码-虚拟DOM与diff算法分析-虚拟DOM(二)
什么是虚拟DOM?用javaScript对象描述DOM的层次结构,DOM中的一切属性都在虚拟DOM中有对应的属性。真实DOM:<div class="box"> <h3>我是一个标题</h3> <ul> <li>西瓜</li> <li>葡萄</li> <li>香蕉</li> </原创 2021-09-06 14:30:26 · 450 阅读 · 3 评论 -
vue源码-虚拟DOM与diff算法分析-Snabbdom简介和测试环境搭建(一)
提到虚拟dom的话,就不得不提到snabbdom这个库,它是虚拟dom的鼻祖。Snabbdom 是一个专注于简单性、模块化、强大性和高性能的虚拟 DOM 库。核心特性:核心代码 200 行,并且提供丰富的测试用例; 拥有强大模块系统,并且支持模块拓展和灵活组合; 在每个 VNode 和全局模块上,都有丰富的钩子,可以在 Diff 和 Patch 阶段使用。搭建环境:1.npm i snabbdom2.npm i -D webpack@5 webpack-cli@3 webp.原创 2021-09-04 22:57:15 · 462 阅读 · 2 评论 -
vue响应式原理-转载
这篇文章写得不错!!!响应式原理是什么以及是如何实现的转载 2021-09-02 17:34:43 · 99 阅读 · 0 评论 -
vue源码-mustache模板引擎分析(四)-手写实现mustache库
一.构建环境(1)新建名为TemplateEngine的文件夹,然后 npm initnpm inpm i webpack@4 -Dnpm i webpack-cli@3-Dnpm i webpack-dev-server@3-D使用webpack和webpack-dev-server构建-webpack侧重开发体验,结合webpack-dev-server实时更新-nodeis调试控制台不太好用-rollup更擅长于最终把几个js文件打包...原创 2021-08-24 09:30:14 · 254 阅读 · 2 评论 -
vue源码-mustache模板引擎分析(三)-mustache的底层核心机理
一.mustache库的核心机理mustache库主要做了两件事:(1)将模版字符串编译为tokens形式(2)将tokens结合数据,解析为dom字符串二.什么是tokens?实际上是一个js嵌套的数组,同时它也是“抽象语法数”,“虚拟节点”的起源~-比如是一个简单的模板字符串编译为tokens【二维数组】-比如是一个循环嵌套的模板字符串编译为tokens我们跑去源码看看这部分是怎么实现的(下节):先在parseTemplate()打印tokens看看...原创 2021-08-23 11:24:13 · 115 阅读 · 1 评论 -
vue源码-mustache模板引擎分析(二)-mustache的基本使用
一.什么是mustache?mustache是胡子的意思,因为它嵌入标记{{}}像胡子。mustache是一种没有逻辑的模板语法,因为它没有if语句,else语句和for循环,所以不能再模板中使用if..else做循环判断,也不能在模板中使用表达式。它可以应用于HTML,配置文件,源代码等,通过使用对象提供的值在模板中展开标记显示到页面上。二.mustache库的使用(1)引入mustache.js[4.1.0版本]<script src='../js/mustache.js原创 2021-08-23 11:00:19 · 622 阅读 · 3 评论 -
vue源码-mustache模板引擎分析(一)-什么是模板引擎
一.什么是模板引擎?是将数据变成视图的一种最优雅的方案二.历史中数据变成视图的方案1.纯DOM法<body> <div id="list"></div> <script type="text/javascript"> var List = document.getElementById("list"); var arr = [ { "name": "小一", "ag原创 2021-08-23 09:53:42 · 162 阅读 · 0 评论 -
Uncaught ReferenceError: Mustache is not defined
在使用mustache模板解析时,引入对应的js文件报错 <script src='../js/mustache.js'></script> <script type="text/javascript"> console.log(Mustache) </script>原因:(1)Uncaught SyntaxError: Unexpected token ‘export---浏览器兼容问题(2)Re原创 2021-08-22 08:13:57 · 1143 阅读 · 1 评论 -
对表单数据进行脱敏【详细版】
需求:对表单中的姓名,身份证,手机号进行脱敏,否则导致UI信息泄漏产品经理说要显示*********,我一开始的想法是使用type:password对所有字段进行脱敏,于是就成了这样子:思路:(1)因为涉及到多个字段,于是在data里面创建一个hiddenInfo对象,key为脱敏的字段名,value是一个对象,其中有一个重要的属性:show初始值为false【用于展示是否脱敏】 hiddenInfo: { applyName: { ...原创 2021-08-08 21:54:44 · 2683 阅读 · 1 评论 -
全局事件总线(GlobalEventBus)
是什么?是一种组件间通信的方式,适用于任意组件间通信怎么安装全局总线?一开始在main.js里面,但后来使用beforeCreate(){}钩子,在这个钩子中,是在数据监测,数据代理之前创建,此时无法通过Vue实例访问到data中的数据,methods中的方法,模板还没解析。Vue.prototype.$bus=this,将Vue的原型对象的属性$bus指向当前的Vue实例对象,因为Vue的原型对象的属性的方法都可以被Vue实例对象和VueComponent组件实例对象访...原创 2021-08-05 10:20:59 · 5261 阅读 · 1 评论 -
组件自定义事件
是什么?-是一种组件间通信,适用于子组件===>父组件应用场景?-A是父组件,B是子组件,B想要给A传数据,那么就要在A中给B绑定自定义事件,事件的回调在A中。怎么绑定?-在父组件中有两种方式可以进行绑定:在App.vue中,给<Student/>子组件使用@或v-on <Student @jiang="getStudentName"/>或者 <Student v-on:jiang="getStudentName"/>2..原创 2021-08-05 09:34:54 · 292 阅读 · 1 评论 -
【重要内置关系】VueComponent.prototype.__proto__ === Vue.prototype
VueComponent.prototype.__proto__===Vue.prototype//输出true话不多说!咱先上图!原创 2021-07-27 22:46:21 · 638 阅读 · 0 评论 -
启动一个vue项目
最近马不停蹄地学vue,先跑一下一个新项目:切换到该项目的文件夹下运行以下三个命令1.npminstall-g@vue/cli2.npminstall3.npmrunserve原创 2021-07-27 09:30:03 · 246 阅读 · 0 评论