Vue
文章平均质量分 90
Bal炎魔
奋斗的码农
展开
-
Vue进阶之 typescript实战项目
Vue进阶之 typescript实战项目1、创建项目,可以直接使用 Vue-cli 创建并选择typescript选项2、开始项目TS中vue组件的定义文档参考 https://cn.vuejs.org/v2/guide/typescript.html1、OptionsAPI定义Vue组件(建议使用此方法)...<script lang="ts">import Vue from 'vue'export default Vue.extend({ data () {原创 2021-03-14 22:45:29 · 470 阅读 · 1 评论 -
Vue进阶之 Vue3.X
Vue进阶之 Vue3.X3.0介绍源码组织方式的变化源码采用 TypeScript 重写,做类型检查;使用 Monorepo 管理项目结构,将每个独立的模块都提起到每个包儿中,在packages;Monorepo 模式,使用同一个项目管理多个的包儿,将不同功能的代码,放入packages中管理,这样可以使得每个功能模块划分明确,依赖也很明确,并且每个功能模块儿都可以单独测试、发布和使用。Composition API (组合式 API)可参考官方文档https://github.com原创 2021-02-28 22:45:24 · 2452 阅读 · 0 评论 -
Vue进阶之 组件库开发
Vue进阶之 组件库开发重新识$attrs / $listeners$attrs把父组件中非 prop 属性绑定到内部组件 利用 v-bind="$attrs"$listeners把父组件中的 DOM 对象的原生事件绑定到内部组件 利用 v-on="$listeners"父组件...<template> <div> <myinput required placeholder="Enter your username" class="t原创 2021-02-25 17:02:49 · 430 阅读 · 0 评论 -
Vue - Gridsome使用
Vue - Gridsome使用是什么一个免费、开源、基于Vue.js技术栈的静态网站生成器GitHub 仓库:https://github.com/gridsome/gridsome官网:https://gridsome.org/什么是静态网站生成器静态网站生成器是使用一系列配置、模板以及数据,生成静态 HTML 文件及相关资源的工具这个功能也叫预渲染生成的网站不需要类似 PHP 这样的服务器只需要放到支持静态资源的 Web Server 或 CDN 上即可运行静态网站的好处原创 2021-02-25 15:24:16 · 800 阅读 · 0 评论 -
Vue进阶之 服务端渲染(ssr)
Vue进阶之 服务端渲染(ssr)Vue.js 服务器端渲染项目构建目录src├── components│ ├── Foo.vue│ ├── Bar.vue│ └── Baz.vue├── App.vue├── app.js # 通用 entry(universal entry)├── entry-client.js # 仅运行于浏览器└── entry-server.js # 仅运行于服务器构建配置需要安装的项目依赖 生产依赖npm i vue vue-ser原创 2021-02-20 15:38:12 · 414 阅读 · 0 评论 -
Vue进阶之源码阅读(二)虚拟DOM与模板编译
Vue进阶之源码阅读(二)虚拟DOM为什么要使用虚拟 DOM使用虚拟 DOM,可以避免用户直接操作 DOM,开发过程关注在业务代码的实现,不需要关注如 何操作 DOM,从而提高开发效率作为一个中间层可以跨平台,除了 Web 平台外,还支持 SSR、Weex。关于性能方面,在首次渲染的时候肯定不如直接操作 DOM,因为要维护一层额外的虚拟 DOM, 如果后续有频繁操作 DOM 的操作,这个时候可能会有性能的提升,虚拟 DOM 在更新真实 DOM 之前会通过 Diff 算法对比新旧两个虚拟 DOM 树原创 2021-01-27 10:40:51 · 394 阅读 · 0 评论 -
Vuex 数据流管理与 Vue.js 服务端渲染
Vuex 数据流管理与 Vue.js 服务端渲染原创 2021-01-26 18:55:34 · 135 阅读 · 0 评论 -
Vue进阶之源码阅读
Vue进阶之源码阅读阅读方式先宏观了解,看大致目录和结构;带着目标看源码,明确核心功能,要意识到我是谁、我在哪儿、我要做什么;看源码的过程要不求甚解,跳过分支功能;调试其运行过程;...原创 2021-01-13 23:41:34 · 186 阅读 · 0 评论 -
Vue进阶之Virtual DOM(虚拟DOM) 实现原理
Vue进阶之Virtual DOM(虚拟DOM) 实现原理Virtual DOM(虚拟 DOM),是由普通的 JS 对象来描述 DOM 对象,因为不是真实的 DOM 对象,所以叫 Virtual DOM。背景手动操作 DOM 比较麻烦,还需要考虑浏览器兼容性问题,虽然有jQuery 等库简化 DOM 操作,但是随着项目的复杂 DOM 操作复杂提升;为了简化 DOM 的复杂操作于是出现了各种 MVVM 框架,MVVM 框架解决了视图和状态的同步问题 ;为了简化视图的操作我们可以使用模板引擎,但是模原创 2020-12-11 18:27:28 · 720 阅读 · 0 评论 -
Vue进阶之响应式原理
Vue进阶之响应式原理数据驱动数据响应式、双向绑定、数据驱动数据响应式数据模型仅仅是普通的 JavaScript 对象,而当我们修改数据时,视图会进行更新,避免了繁琐的 DOM 操作,提高开发效率双向绑定数据改变,视图改变;视图改变,数据也随之改变我们可以使用 v-model 在表单元素上创建双向数据绑定数据驱动是 Vue 最独特的特性之一开发过程中仅需要关注数据本身,不需要关心数据是如何渲染到视图响应式原理的简单演示Vue2.x 利用Object.defineP原创 2020-12-09 18:15:46 · 127 阅读 · 0 评论 -
Vue进阶之Vue-Router
Vue进阶之Vue-RouterVue-Router的使用1、动态路由: { path: '/home/:id', //配置id参数便可实现动态路由 name: 'home', // 开启 props,会把 URL 中的参数传递给组件 // 在组件中通过 props 来接收 URL 参数 props: true, component: () => import('../views/Home.vue') }组件接受id参数<temp原创 2020-12-06 17:24:23 · 489 阅读 · 0 评论