高级web
文章平均质量分 62
weixin_42580704
这个作者很懒,什么都没留下…
展开
-
【 web高级 02webpack 】webpack04
webpack性能优化优化开发体验优化输出质量量优化开发体验提升效率优化构建速度优化使⽤体验优化输出质量优化要发布到线上的代码,减少⽤户能感知到的加载时间提升代码性能,性能好,执⾏就快一、缩小文件查找范围webpack 在启动后会从配置的 Entry 出发,解析出文件中的导入语句,再递归解析,在遇到导入语句时,webpack 会做一下操作寻找对应的导入文件使用配置中的 Loader 去处理文件,例如解析 js 文件用的 babel-loader1.1原创 2021-04-12 10:04:46 · 172 阅读 · 0 评论 -
【 web高级 02webpack 】webpack03
webpack第3节 实战本地开发服务proxymockserverES6+处理babel插件转换插件 preset-envpollfillruntime按需加载React开发多页面处理最佳方案一、本地开发服务1.1 proxy 代理http://localhost:9092/api/info...原创 2021-04-06 15:33:39 · 91 阅读 · 0 评论 -
【 web高级 02webpack 】webpack02
一、loader1.1-Less样式处理less-loader 把less语法转换成cssnpm install less less-loader --save-dev完整代码src/css/index.lesshtml{ body{ background: blue; .ele{ background-color: #fff; } } }src/index.jsimport css fr原创 2021-03-17 12:50:24 · 115 阅读 · 0 评论 -
【 web高级 02webpack 】webpack01
本地安装npm init -y-y 的含义:yes的意思,在init的时候省去了敲回车的步骤,生成的默认的package.jsonnpm install webpack webpack-cli -Dnpm install -S -D -g 有什么区别npm install module_name -S 即 npm install module_name --save写入dependenciesnpm install module_name -D 即 n原创 2021-03-15 15:07:52 · 134 阅读 · 0 评论 -
【 web高级 01vue 】 vue直播课10 vue3初探+响应式原理剖析
111原创 2021-03-02 14:33:36 · 76 阅读 · 0 评论 -
【 web高级 01vue 】 vue直播课09 Vue项目最佳实践
222原创 2021-03-02 14:32:57 · 78 阅读 · 0 评论 -
【 web高级 01vue 】 vue直播课08 TypeScript实战
111原创 2021-03-02 14:32:15 · 77 阅读 · 0 评论 -
【 web高级 01vue 】 vue直播课07 服务端渲染SSR
111原创 2021-03-02 14:31:33 · 59 阅读 · 0 评论 -
【 web高级 01vue 】 vue直播课06 Vue源码剖析03
222原创 2021-03-02 14:30:09 · 66 阅读 · 0 评论 -
【 web高级 01vue 】 vue直播课05 Vue源码剖析02
1111原创 2021-03-02 14:17:35 · 93 阅读 · 0 评论 -
【 web高级 01vue 】 vue直播课04 Vue源码剖析01
知识点目标环境搭建理顺学习流程vue初始化过程深入数据响应式获取vue项目地址:https://github.com/vuejs/vue版本号:2.6.0原创 2021-03-02 14:16:53 · 128 阅读 · 0 评论 -
【 web高级 01vue 】 vue直播课03 手撸Vue
MVVM模式ViewModel是Vue.js的核心,它是一个Vue实例。Vue实例是作用于某一个HTML元素上的,这个元素可以是HTML的body元素,也可以是指定了id的某个元素。当创建了ViewModel后,双向绑定是如何达成的呢?首先,我们将上图中的DOM Listeners和Data Bindings看作两个工具,它们是实现双向绑定的关键。从View侧看,ViewModel中的DOM Listeners工具会帮我们监测页面上DOM元素的变化,如果有变化,则更改Model中的数据;从M原创 2021-02-26 17:30:17 · 110 阅读 · 0 评论 -
【 web高级 01vue 】 vue直播课02 vue全家桶原理剖析
知识点一.vue-routerVue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。安装:vue add router核心步骤:步骤一:使用vue-router插件,router.jsimport Router from 'vue-router' Vue.use(Router)步骤二:创建Router实例,router.jsexport default new Router({...})步骤三:在根组件上添加.原创 2021-02-23 19:23:56 · 138 阅读 · 0 评论 -
【 web高级 01vue 】 vue直播课01 vue组件化实践
课堂目标深入理解Vue的组件化机制掌握Vue组件化常用技术能够设计并实现多种类型的组件加深对一些Vue原理的理解学会看开源组件库源码知识要点组件通信方式盘点组件复合递归组件组件构造函数和实例渲染函数组件挂载…运行环境node 12.xvue.js 2.6.xvue-cli 4.x知识点组件化vue组件系统提供了一种抽象,让我们可以使用独立可复用的组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树。组件化能提高开发效率,方法重复使用,简化原创 2021-02-08 18:45:11 · 209 阅读 · 0 评论 -
【 web高级 01vue 】 vue预习课12 状态管理
vuexVuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。一、安装vue add vuex二、起始2.1 State将应用全局状态定义在state中vuex中state: { isLogin: false }2.2 Mutation修改state只能通过mutationvuex中mutations: { login(state) { state.isLo原创 2020-12-13 16:26:26 · 104 阅读 · 0 评论 -
【 web高级 01vue 】 vue预习课11 路由
Vue RouterVue Router是 Vue.js 官方的路由管理器。一、安装vue add router二、基础2.1 起步路由规划、配置,router/index.js商品列表(home) - 商品管理(about)路由出口、导航,App.vue<nav> <router-link to="/">首页</router-link> <router-link to="/about">管理</router-link&g原创 2020-12-13 16:26:11 · 129 阅读 · 0 评论 -
【 web高级 01vue 】 vue预习课10 工程化
Vue Cli一、 快速原型开发你可以使用 vue serve 和 vue build 命令对单个 *.vue 文件进行快速原型开发1.1 安装 @vue/cli-service-global 扩展npm install -g @vue/cli-service-global1.2 准备一个内容原型Hello.vue<template> <div> <div v-for="item in items" :key="item.id"&原创 2020-12-13 16:25:56 · 122 阅读 · 0 评论 -
【 web高级 01vue 】 vue预习课09 可复用性
一、过滤器Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号指示:{{ 变量 | 格式化函数 }} 管道符号 <!-- 在双花括号中 -->{{ message | capitalize }}<!-- 在 `v-bind` 中 -原创 2020-12-13 16:25:25 · 112 阅读 · 0 评论 -
【 web高级 01vue 】 vue预习课08 动画
过度 & 动画Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。包括以下工具:在 CSS 过渡和动画中自动应用 class可以配合使用第三方 CSS 动画库,如 Animate.css在过渡钩子函数中使用 JavaScript 直接操作 DOM可以配合使用第三方 JavaScript 动画库,如 Velocity.js过度 & 动画一、单元素/组件的过渡Vue 提供了 transition 的封装组件,在下列情形中,可以给任何元素和组件添加进入/离原创 2020-12-02 14:45:03 · 151 阅读 · 0 评论 -
【web高级 01vue 】 vue预习课07 vue必会API
vue必会API盘点一、数据相关API1.1 Vue.set向响应式对象中添加一个属性,并确保这个新属性同样是响应式,且触发视图更新使用方法:Vue.set( target, propertyName/index, value )范例:批量设置商品价格 <!-- 批量更新价格 --><p> <input type="text" v-model.number="price"> <button @click="batchUpdate">原创 2020-12-01 17:36:20 · 96 阅读 · 0 评论 -
【web高级 01vue 】 vue预习课06 组件化
一、组件基础组件是可服用的Vue实例,带有一个名字,我们可以在一个通过 new Vue 创建的 Vue 根实例中,把这个组件作为自定义元素来使用。1.1组件注册、使用及其数据传递Vue.component(name,optiosn)可用于注册组件范例:提取food新增和食物列表组件 <!-- 列表组件 --><food-list :foods="foodList"></food-list><script> //食物列表组件 Vue.co原创 2020-12-01 09:37:56 · 74 阅读 · 0 评论 -
【web高级 01vue 】 vue预习课05 生命周期
生命周期每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等,称为Vue实例的生命周期。一、 使用生命周期钩子在vue实例的生命周期过程中会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。范例:异步获取列表数据//模拟异步数据调用接口function getData() { return new Promise((resolve) => { setTimeout原创 2020-11-29 17:19:43 · 137 阅读 · 1 评论 -
【web高级 01vue 】 vue预习课04 计算属性和监听器
计算属性 和 监听器模板内的表达式非常便利,但是设计他们的初衷是用于简单运算。在模板中放入太多的逻辑会让模板过重且难以维护,此时就可以考虑计算属性和监听器。范例:数量统计<!-- 商品总数 --> <p> <!-- 表达式 --> <!-- 食物总数:{{foodList.length + '种'}} --> <!-- 计算属性 --> <!-- 食物总数:{原创 2020-11-29 16:13:03 · 157 阅读 · 0 评论 -
【web高级 01vue 】 vue预习课03 模板语法
模板语法03–模板语法vue模板语法vue.js使用了基于HTML的模板语法,允许开发者声明式地将DOM绑定至底层Vue实例的数据。所以Vue.js的模板都是合法的HTML,所以能被遵循规范的浏览器和HTML解析器解析。插值文本数据绑定最常见的形式就是使用"Mustache"语法(双大括号)的文本插值范例:设置标题在这里插入代码片插值文本特性Mustache 语法不能作用在 HTML attribute 上,遇到这种情况应该使用 v-bind 指令:范例:设置标题原创 2020-11-29 15:37:28 · 101 阅读 · 1 评论 -
【web高级 01vue 】 vue预习课02 hello vue更多
核心知识01–Hello World引入vuevue的安装Hello World创建我们第一个vue程序 <!-- 宿主文件 --><div id="app"> {{title}}</div><script src="vue.js"></script><script> //1.创建vue实例 const app = new Vue({ el:"#app", da原创 2020-11-26 14:29:04 · 70 阅读 · 0 评论 -
【web高级 01vue 】 vue预习课01 开发环境准备
一、vscode的安装及使用1.下载地址https://code.visualstudio.com/2.使用指南2.1代码提示创建hello.js,体验vscode代码提示功能。const hello = 'helo';console.log(hello);2.2调试2.2.1调试hello.js ----- 默认支持node调试,F5启动调试步骤1:打断点步骤2:按F5,选择node.js环境断点被成功截取2.2.2网页调试步骤1:需安装Debugger原创 2020-11-26 14:28:44 · 112 阅读 · 0 评论