Vue
文章平均质量分 92
一颗待收割的小白菜~
又菜又爱学。。。
展开
-
深入理解 Vuex
Vuex 定义在Vue中实现集中式状态(数据)管理的一个Vue 插件,对vue应用中多个组件的共享状态进行集中式的管理(读、写),也是一种组件间通信的方式,且适用于任意组件间通信关键词:集中式:与分布式相对立,就是把数据放在一起管理插件:它是一个插件,需要Vue.use(vuex)共享状态:这里面的数据可以供多个组件使用为什么需要vuex ,全局事件总线不是很好吗?如果组件特别特别多,就会显得逻辑混乱,大量组件之间互相通信,所以vue就将数据单独放在一个容器里,它不属于任何一个组原创 2021-12-01 21:04:43 · 646 阅读 · 0 评论 -
深入理解虚拟DOM 和 Diff 算法
什么是虚拟DOM?简单来说 虚拟DOM 就是一个JS 对象,用对象的形式来描述DOM 结构;具体怎么表示?DOM 结构包含很多的属性,节点的类型包含:文本节点,标签节点和属性节点。 <div> <p style="color:red">Hello</p> <span style="border:1px solid red;color:green">World</span> </div>原创 2021-11-30 15:13:03 · 737 阅读 · 0 评论 -
Vue 响应式原理(双向数据绑定原理)
vue 中的双向数据绑定其实就是在单向数据绑定的基础上,给可输入元素(input textare) 等添加change事件,来动态改变绑定的Model 以及视图。先来一张结构图:首先,这个vue 是通过数据劫持结合发布者-订阅者模式来实现的双向绑定。首先通过Object.defineProperty() 给每个属性绑定getter / setter 。当数据发生变化时,发布消息给订阅者,出发相应的回调函数,完成视图更新。1、数据监听器Observer源码里面是这样的:先是处理对象数.原创 2021-11-30 12:25:27 · 736 阅读 · 0 评论 -
从零开始学 Vue——总结笔记(二)
一、条件渲染条件渲染有两种方式:v-if :v-if = '表达式' 表达式为真才展示特点:不展示的DOM元素直接移除 v-show v-show='表达式' 特点: 不展示的DOM仅仅是样式隐藏二、列表渲染1、v-for指令:用来遍历并展示列表数据:可遍历数组、对象、字符串<body> <div id="root"> <h2>遍历数组</h2> <ul> ...原创 2021-09-01 09:43:24 · 114 阅读 · 0 评论 -
从零开始学 Vue —— 总结笔记(一)
一、初识Vue1、Vue 的特点采用组件化模式开发——提高了代码的复用率、方便维护 声明式编程,无需直接操作DOM——提高开发效率 使用虚拟DOM 和 优秀Diff 算法——尽量复用DOM节点2、Vue 模板语法<body><div id='root'> 名字:{{name}} 住址:{{address}}</div><script>new Vue ({ el:'#root', data:{原创 2021-08-16 20:36:53 · 185 阅读 · 0 评论