vue
关注
分享
扫一扫
欧气的猫七姑娘
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
Vue2.0与vue3.0响应式对比
Vue2.0 响应式原理 主要api------Object.defineProperty (需要对数组相关方法进行重写;数组改变length无效；对象不存在的属性不能被拦截 ) 主要时对对象的属性做一些限制，是否可以被访问，被修改，被枚举等等； 访问这个属性，会触发get方法 修改这个属性，会触发set方法 定义了get 方法，若没有return值出去，则访问该属性时，得到的会是undefined 需要借助一个中间变量去存贮_value; 不优雅的地方； var ob={ a:1, b:2原创 2021-03-16 17:07:32 · 311 阅读 · 0 评论 -
vue3.0初探
1.关于v-model 默认情况下，组件上的 v-model 使用 modelValue 作为 prop 和 update:modelValue 作为事件。 多个v-model，新增了多个v-model的使用场景 <user-name v-model:first-name="firstName" v-model:last-name="lastName" ></user-name> app.component('user-name', { props: { f原创 2020-12-01 16:08:51 · 803 阅读 · 2 评论 -
vue源码调试之数据render过程
这一篇主要是介绍data里面的数据是如何变成了浏览器里面的dom元素？ 依旧是从vue的构造函数入手到init方法里。 只留下了本篇文章介绍的render这条线的代码，别的都舍弃了！ 渲染这条线，需要从vm.$mount()入手！ function initMixin (Vue) { Vue.prototype._init = function (options) { var vm = this; if (vm.$options.el) { vm.$mou原创 2020-07-06 11:01:11 · 466 阅读 · 0 评论 -
vue2.0源码调试过程记录---主要initState包括data响应式属性等过程
记录一下vue源码调试的过程！只为学习！ function Vue (options) { if (!(this instanceof Vue) ) { warn('Vue is a constructor and should be called with the `new` keyword'); } // 从这里的init开始调试！！！！ this._init(options); } 只截取了部分源码，把我没有看到的部分暂时先舍去了。上面的i原创 2020-07-06 10:23:45 · 287 阅读 · 0 评论 -
parse后续篇----ast数据结构的生成
废话不多说，直接上重点！ parseHtml中解析template模板字符串，匹配到startTag后，就执行parseStartTag方法，在parseStartTag执行完后，有一个handleStartTag方法，在里面执行了options.start方法，这个里面关于生成ast的逻辑，处理v-for，v-if的逻辑(processFor 等等)，都在这个方法里可以找到。 var element = createASTElement(tag, attrs, currentParent); 按照之前的原创 2020-06-30 11:06:27 · 376 阅读 · 0 评论 -
搞懂vue源码-parse
上一篇讲解了parse过程中的parseStartTag过程，这篇主要讲解parseText过程！话不多说，直接上代码！ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document<原创 2020-06-30 10:34:57 · 484 阅读 · 0 评论 -
都2020了，你还不懂vue中的complie---parse篇
vue中template模板是如何变成我们认识的dom结构呢？是一个complie过程！ complie过程，其实就是拿着template和options生成一个render方法的过程。 compile过程的三个核心，parse，optimize，generate，今天主要说一下parse这个过程！ parse这个过程是生成ast语法树的过程。 具体分析一下！ 这个过程其实就是用各种正则进行字符串匹配的过程，所以先罗列一下源码中使用到的正则表达式！ var dynamicArgAttribute = /^\原创 2020-06-29 14:47:04 · 598 阅读 · 0 评论 -
vue生命周期
生命周期钩子函数 beforeCreate(){ // 第一个周期函数，此时，这个对象身上，只有一些生命周期函数和默认的事件，其他的都未创建,data和methods都都还没有初始化 } created(){ // data和methods都已经初始化好了，如果要调用methods中的方法，或者操作data中的数据，最早在这里可以 } beforeMount(){ // 模板已经编译...原创 2019-12-03 20:51:19 · 102 阅读 · 0 评论 -
vue-面试题
文中的链接，均为转载和参考，主要是自己看着方便，侵权删。 vue面试题，可以参考https://mp.weixin.qq.com/s/9xBlHltYImi_0liSZKQSNw 1.指令： v-text v-html 两者皆会将变量所对应的内容直接替换到标签的innerHtml处 v-model 数据的双向绑定，主要是表单元素 v-for 列表渲染 v-on绑定事件 v-bind v-if 则...原创 2019-12-03 20:47:21 · 100 阅读 · 0 评论 -
vue生命周期
生命周期钩子函数 beforeCreate(){ // 第一个周期函数，此时，这个对象身上，只有一些生命周期函数和默认的事件，其他的都未创建,data和methods都都还没有初始化 } created(){ // data和methods都已经初始化好了，如果要调用methods中的方法，或者操作data中的数据，最早在这里可以 } beforeMount(){ // 模板已经编译...原创 2019-12-03 14:09:40 · 92 阅读 · 0 评论 -
iframe
iframe加载pdf文件 <iframe class="iframe-style" :src="pdfurls" v-if="type === 'pdf' && openPdf === 'true' "></iframe> 直接将pdf的线上链接给到变量pdfurls 坑一 iframe加载文件，每次打开，每次会向history历史记录栈中插入一...原创 2019-08-29 16:10:30 · 284 阅读 · 0 评论 -
vue中watch对象内部属性失效解决
Vue开发中遇到的坑 今天开发vue的时候，遇到了坑，现总结如下： 我在data里初始化了一个对象，然后，想要watch到对象的内部属性？ data:function(){ return { form:{ name:'' } } }, <input type="text...原创 2019-06-16 09:46:56 · 3078 阅读 · 0 评论 -
Vue-router
Vue-router 后端路由： 前端路由：借助hash来完成前端路由。http请求中不包括hash值。完成单页面应用 安装vue-router包 可以使用script标签加载vue-router.js <script src="/path/to/vue.js"></script> <script src="/path/to/vue-router.js"&...原创 2019-06-02 17:33:19 · 143 阅读 · 0 评论