vue学习笔记
文章平均质量分 86
流转往复
一个普普通通的码农
展开
-
通过源码解析,理解vue2中data数据变更和nextTick到底发生了什么
这里写自定义目录标题时间循环机制vue2中data数据变更是怎么触发dom修改的新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表FLowchart流程图导出与导入导出导入时间循环机制宏任务平常正常执行的js代码setTimeoutsetImmediat原创 2021-08-05 11:57:53 · 484 阅读 · 0 评论 -
vue3数据响应式与依赖收集
vue3 数据响应式整体思路使用new Proxy对响应式数据进行代理get函数触发trace添加依赖如果get的数据是对象,执行递归new Proxy代理(此处是懒调用,只有对象被使用才会执行new Proxy代理)set函数触发trigger执行get函数收集的相关依赖vue3响应式和vue2的变化从Object.definePrototype =》 new Proxy优点对整个对象使用Proxy代理,并且对象是懒调用(未被使用的对象,不会添加代理),免去整原创 2021-07-20 16:42:42 · 591 阅读 · 0 评论 -
vue响应式原理简单代码实现(学习笔记)
响应式原理简单代码实现最基础的数据拦截function defineReactive(obj, key, val) { // 如果val本身还是对象,则需要递归处理 observe(val) Object.defineProperty(obj, key, { get() { console.log("get", key); return val; }, set(v) { if (v !== val) { //原创 2021-07-02 16:45:54 · 423 阅读 · 1 评论 -
前端框架选型搭建-vue-vuex-route-elementui+axios
简介开发工具VSCode, WebStorm 。。。可以使用自己喜欢的任意开发工具或者文本编辑器开发环境Node.js, Npm, Cnpm, Webpack, ES6框架Vue.js, Element UI基础概念Node.js Node.js是一个Javascript运行环境(runtime)。实际上它是对Google V8引擎进...原创 2018-08-28 19:25:55 · 1944 阅读 · 0 评论 -
vue基础语法
条件与循环v-if&v-forv-if:<div id="app3"> <a v-if="seen">3、看得到我吗</a></div>var app3 = new Vue({ el: "#app3", data: { seen: true }})setTimeout('app3.seen="false"', 3000);v-if属性绑定Vue实原创 2017-07-07 18:05:24 · 390 阅读 · 0 评论 -
Vue 响应式原理
将data与dom绑定的原理 首先引用官网的一张图要将data与dom绑定,首先要满足一下几点 1、Vue实例内预先定义了data 2、使用Vue.set(object, key, value)或者vm.$set(object, key, value)方法设置了data因为Vue实例创建的时候,Vue将遍历data内的所有属性并使用 Object.defineProperty 把这些属性全原创 2017-07-20 15:23:24 · 1186 阅读 · 0 评论 -
Vue computed计算属性的妙用
computedcomputed:相当于method,返回function内return的值赋值在html的DOM上。但是多个{{}}使用了computed,computed内的function也只执行一次。仅当function内涉及到Vue实例绑定的data的值的改变,function才会从新执行,并修改DOM上的内容。computed和method的对比<div id="example">原创 2017-07-14 00:06:00 · 32434 阅读 · 1 评论 -
Vue filters过滤器
简介 先来看看一段代码理解下 html<div id="app"> {{message | filters2| filters3(true,priceCount)}}</div>jsvar app = new Vue({ el: "#app", data: { message: 199, priceCount:.8 },原创 2017-07-13 15:43:45 · 545 阅读 · 1 评论 -
Vue实例
构造器html<div id="app8"> {{message}}</div>js//创建一个可复用的组件构建器var MyComponent = Vue.extend({ data:function () { return { message:"ddddddd" } }})//实例化var myCompon原创 2017-07-12 15:58:58 · 452 阅读 · 4 评论 -
vue component组件
vue组件原创 2017-07-07 17:49:23 · 536 阅读 · 0 评论