vue 系列 - 随笔分类(第2页) - pleaseAnswer

⑥ composition API

摘要：Composition API 1 Setup 函数的使用 Composition api 代码编写要建立在 setup 函数上执行时间：created 实例被完全初始化之前 setup 函数内部获取不到 this 1.1 return 的内容可以在 template 中直接使用 const a 阅读全文

posted @ 2022-03-16 11:42 pleaseAnswer 阅读(42) 评论(0) 推荐(0)

⑤ vue 中的高级用法

摘要：vue 中的高级用法 1 Mixin 混入的基础语法 1.1 组件 data methods 优先级高于 mixin data 优先级 1.2 生命周期函数先执行 mixin 的再执行组件的 const myMixin = { data() { return { number: 2, count: 阅读全文

posted @ 2022-03-16 11:38 pleaseAnswer 阅读(499) 评论(0) 推荐(0)

④ vue 中的动画

摘要：vue 动画 1 使用 Vue 实现基础的 CSS 过渡与动画效果 1.1 过渡 <style> .transition { transition: 3s background-color ease; } .blue { background: blue; } .green { background 阅读全文

posted @ 2022-03-16 11:35 pleaseAnswer 阅读(84) 评论(0) 推荐(0)

③ vue 组件

摘要：vue组件 1 组件的定义及复用性局部组件和全局组件 // 局部组件的定义：要注册之后才能使用，建议大写字母单词，驼峰命名 const Counter2 = { data() { return { count: 1 } }, template: `<div @click="count+=2">{{ 阅读全文

posted @ 2022-03-16 11:31 pleaseAnswer 阅读(39) 评论(0) 推荐(0)

② vue 基础语法

摘要：vue基础语法 1 应用和组件的基础概念 // createApp 创建一个 vue 应用 // 参数：这个应用最外层的组件应该如何展示 // mvvm 设计模式 viewmodel 视图数据连接层 const app = Vue.createApp({ data() { return { mess 阅读全文

posted @ 2022-03-16 11:23 pleaseAnswer 阅读(40) 评论(0) 推荐(0)

③ 封装下载流

摘要：/* * src > utils > download.js * 封装的下载流的方法 * 参数 data 后台返回的数据流 * 参数 filename 下载的文件名 * 参数 mime 类型转化的类型详细可百度 * */ export function downloadStream(data, 阅读全文

posted @ 2021-10-22 09:53 pleaseAnswer 阅读(23) 评论(0) 推荐(0)

⑥ 使用vue-seamless-scroll实现无缝滚动

摘要：1. 安装 cnpm install vue-seamless-scroll -s 2. 在main.js中引入 // 无缝滚动插件 import scroll from 'vue-seamless-scroll' Vue.use(scroll) 3. 在vue的组件使用 <div v-if="po 阅读全文

posted @ 2021-09-16 12:09 pleaseAnswer 阅读(515) 评论(0) 推荐(0)

② elementui table+分页组件封装

摘要：1 table组件 1.1 模板 <template> <div class="table-wrap"> <el-table :data="tableList" highlight-current-row size="small" height="450px" border style="width 阅读全文

posted @ 2021-09-13 15:15 pleaseAnswer 阅读(360) 评论(0) 推荐(0)

① ts基础

摘要：前言 npm i -g typescript $tsc -v tsc test.ts // 编译 node test.js // 执行 const hello: string = 'Hello World!' console.log(hello) 1 对象+基本类型 1.1 ts是一种面向对象的编程阅读全文

posted @ 2021-07-07 00:07 pleaseAnswer 阅读(437) 评论(0) 推荐(0)

⑧ 总结

摘要：Vue 的工作原理：Vue 在实例化时，会遍历 data 下的属性，通过 Object.defineProperty 将它们转为 setter|getter，在内部通过追踪依赖，在属性被修改和访问时通知变化。阅读全文

posted @ 2021-01-26 16:59 pleaseAnswer 阅读(56) 评论(0) 推荐(0)

⑦ Vuex源码解析

摘要：1 安装 1.1 Vuex 的安装 Vue.use(Vuex); new Vue({ el: '#app', store }); 1.2 Vuex 是怎样把 store 注入到 Vue 实例中的呢？ Vue 提供了 Vue.use 方法用来给 Vue.js 安装插件，内部通过调用插件的 instal 阅读全文

posted @ 2021-01-26 16:58 pleaseAnswer 阅读(94) 评论(0) 推荐(0)

⑥ Vuex状态管理的工作原理

摘要：1 为什么要使用 Vuex 解决多组件通讯问题 Vuex 是一个专门为 Vue.js 框架设计的状态管理工具 Vuex 借鉴了 flux、redux 的基本思想，将状态抽离到全局，形成一个 Store Vuex 内部采用了 new Vue 来将 Store 内的数据进行响应式化 2 安装 2.1 阅读全文

posted @ 2021-01-26 16:56 pleaseAnswer 阅读(202) 评论(0) 推荐(0)

⑤ 批量异步更新策略及 nextTick 原理

摘要：1 为什么要异步更新？ Vue 是如何在修改 data 中的数据后修改视图的：setter -> Dep -> Watcher -> patch -> 视图 1.1 栗子 <template> <div> <div>{{number}}</div> <div @click="handleClick" 阅读全文

posted @ 2021-01-26 16:55 pleaseAnswer 阅读(140) 评论(0) 推荐(0)

④ 数据状态更新时的差异diff及patch机制

摘要：1 数据更新视图 2 跨平台因为使用了 Virtual DOM，Vue.js 具有了跨平台能力 Virtual DOM 只是 js 对象，是如何调用不同平台的 api 的？依赖于适配层：将不同平台的 api 封装在内，以同样的接口对外暴露 2.1 举个栗子提供 nodeOps 对象做适配，根据阅读全文

posted @ 2021-01-26 16:53 pleaseAnswer 阅读(138) 评论(0) 推荐(0)

③ 实现Virtual DOM的下一个VNode节点

摘要：1 什么是VNode？ render function 会被转化成 VNode 节点 1.1 Virtual DOM 一个结构类似于真实 DOM 的 js 对象 1.2 实现一个简单的 VNode 类，加入一些基本属性 class VNode { constructor (tag, data, ch 阅读全文

posted @ 2021-01-26 16:43 pleaseAnswer 阅读(79) 评论(0) 推荐(0)

② 响应式系统的依赖收集追踪原理

摘要：1 为什么要依赖收集 1.1 栗子1 1. new 一个 Vue 实例 new Vue({ template: ` <div> <span>{{ text1 }}</span> <span>{{ text2 }}</span> </div> `, data: { text1: 'text1', te 阅读全文

posted @ 2021-01-26 16:42 pleaseAnswer 阅读(87) 评论(0) 推荐(0)

① 响应式系统的基本原理

摘要：1 Object.defineProperty Vue.js基于 Object.defineProperty 实现响应式系统使用方法： /* * obj: 目标对象 * prop: 需要操作的目标对象的属性名 * descriptor: 描述符 * return value 传入对象 */ Obj 阅读全文

posted @ 2021-01-26 16:33 pleaseAnswer 阅读(220) 评论(0) 推荐(0)

⑦ vue项目结构study

摘要：1 src目录结构 2 main.js -- 引入全局样式文件+全局路由钩子配置文件 3 utils配置文件 -- request.js 封装 axios 请求函数 3.1 使用 interceptors 配置请求拦截器 // request拦截器 service.interceptors.requ 阅读全文

posted @ 2020-12-08 17:05 pleaseAnswer 阅读(134) 评论(0) 推荐(0)

⑤ elementui 使用字符填充table空白表格项

摘要：<el-table-column v-for="col in tableColumns.filter(coloum => checkList.indexOf(coloum.label) !== -1)" :key="col.label+col.prop" :prop="col.prop" :labe 阅读全文

posted @ 2020-12-08 16:52 pleaseAnswer 阅读(669) 评论(0) 推荐(0)

④ keep-alive缓存组件，操作之后需要重新获取数据--activated

摘要：应用场景： 1 从列表页 -> 详情页 -> 列表页时，要保持列表页在原来的页面 <keep-alive> <router-view v-if="$route.meta.keepAlive"/> </keep-alive> <router-view v-if="!$route.meta.keepAl 阅读全文

posted @ 2020-12-02 20:53 pleaseAnswer 阅读(570) 评论(0) 推荐(0)

随笔分类 - vue 系列