随笔分类 - vue知识点
摘要：axios的封装 【官网】 下载 #不仅开发需要，线上程序也需要 npm install axios 一、基本使用 axios(config) axios({ url:'http://123.207.32.32:8000/home/data', method:'get', //专门针对get的参数拼
阅读全文
摘要：Watcher分类 computed-watcher 数据变 →使用数据的计算属性变 → 使用计算属性的视图变 每个computed属性都创建一个watcher（正是computed-watcher），并添加到相关data属性值的订阅者队列(deep)。 watcher的回调函数正是computed
阅读全文
摘要：nextTick的原理 一、异步说明 Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。 Vue 是异步执行 DOM 更新的。。 **异步执行运行机制： （1） 所有同步任务都在主线程上执行，形成一个执行栈。 （2）主线程之外，还存在一个"任务队列"。
阅读全文
摘要：vue双向绑定原理 原理主要通过数据劫持和发布订阅模式实现的 通过Object.defineProperty()来劫持各个属性的setter，getter，监听数据的变化 在数据变动时发布消息给订阅者(watcher)，订阅者触发响应的回调(update)更新视图。 一、什么是数据劫持 访问或者修改
阅读全文
摘要：Runtime-compiler和Runtime-only的区别 一、runtime-compiler 代码中，可以有template，因为complier可以用于编译template template->解析成ast(抽象语法树)->编译成render->vdom->ui import Vue f
阅读全文
摘要：一、delete和Vue.delete删除数组 delete 只是被删除的元素变成了 empty/undefined 其他的元素的键值还是不变。 界面不会改变 this.a=[1,2,3,4] delete this.a[1] console.log(this.a) //输出：(4) [1, emp
阅读全文
摘要：vue.config.js配置 // vue.config.js const path = require('path'); const CompressionWebpackPlugin = require("compression-webpack-plugin"); // 开启gzip压缩， 按需
阅读全文
摘要：Vue无状态组件 一、什么是状态和实例？ Vue 状态：是确定组件行为的对象。 Vue 状态决定了组件的渲染方式或动态方式。 Vue 实例：是一个 ViewModel，它包含的选项包括表示元素的模板、要安装的元素、方法和初始化时的生命周期钩子。 二、无状态组件 函数式组件、功能组件。 理解函数式编程
阅读全文
摘要：vue中获取dom元素 document.querySelector('.wrapper')这种方式不好。很多的地方可能都叫wrapper,不准确 vue中准确的拿到那个元素用ref,ref是绑定给子组件 普通元素也可以绑定ref ref如果是绑定在组件中的，那么通过**this.$refs.ref
阅读全文
摘要：Vuex 一、Vuex概念 存在的问题： 一个状态，很多个组件都想用 多个组件共享一个状态，这个变量放哪个组件中都不合适 是什么 是状态管理模式。 简单说，需要多个组件共享的变量全部存放在一个对象中 然后这个对象放在顶层的Vue实例中，其他组件可以使用 如，用户的一些信息（登录状态、名称头像、位置）
阅读全文
摘要：Vue Router 一、什么是前端路由 1.1.后端路由阶段 后端渲染：以前没有JavaScript，网页没有ajax请求，在服务器就长那个样子，在服务器就渲染好，就是最终网页，后端渲染完然后直接给前端的 后端路由：后端处理URL和页面之间的映射关系 1.2.前后端分离阶段 前后端分离：后端只负责
阅读全文
摘要：slot插槽的使用 适用场景：可以实现父子组件通信（通信的结构） 父组件可通过slot插槽，向子组件内部指定位置传递内容。 基本使用 <! 子组件ChildA > <div> <slot>默认内容</slot> </div> <! 父组件 > <div> <childA> 我是默认插槽，可以传递内容
阅读全文
摘要：vue组件通信 一、props 适用场景：父子组件通讯 1、父组件，给子组件【ChildA】传递数据 <child-a :msg="msg"></child-a> 2、子组件，props接收数据 //props有两种写法 //1、数组形式 props:['msg'] //2、对象形式 props:{
阅读全文
摘要：vue组件 一、基本使用 <div id="app"> <!--3、使用组件--> <my-cpn></my-cpn> </div> <script> //1.创建组件构造器 const cpnC= Vue.extend({ template:` <div> <h2>我是cpnC的标题</h2> <
阅读全文
摘要：vue 生命周期 Vue 实例在被创建时，经过一系列初始化的过程。 设置数据监听、编译模板、将实例挂载到 DOM 、并在数据变化时更新 DOM 等。 这个过程中也会运行一些叫做 生命周期钩子 的函数，这给了用户在不同阶段添加自己的代码的机会。 <div id="app">{{message}}</d
阅读全文
摘要：vue计算属性和侦听器 一、computed 在一个计算属性里可以完成各种复杂的逻辑，包括运算、函数调用等，只要最终返回一个结果就可以。 1.1.和methods对比 <div id="app"> <!--1.插值法：直接拼接：语法过于繁琐--> <h2>{{firstName+' '+lastNa
阅读全文
摘要：一、真实DOM和其解析流程？ 浏览器渲染引擎工作流程，大致分为5步： 创建DOM树——创建StyleRules——创建Render树——布局Layout——绘制Painting 第一步，用HTML分析器，分析HTML元素，构建一颗DOM树(标记化和树构建)。 第二步，用CSS分析器，分析CSS文件和
阅读全文
摘要：v-if和v-for的问题 v-if和v-for优先级哪个高？ v-for优先级高于v-if 同时出现时，每次渲染都会先执行循环，在再循环中执行判断，造成性能浪费。 因此不要把 v-if 和 v-for 同时用在同一个元素上。 同时出现如何优化才能得到更好的性能？ 在外层或嵌套<block>，先进行
阅读全文
摘要：vue 指令 v-bind 绑定属性 语法糖 ： 绑定基本属性 <a :href="aHref">百度一下</a> 动态绑定class 对象语法：v-bind: class="{类名:boolean}" <h2 :class="{'active':isActive}">哈哈哈</h2> <!--过于
阅读全文
