![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
文章平均质量分 50
以实战,深入解析Vue2.x,vue3.x,持续为前端创造未来
离开你,我才发现
bug, 不破, 不回头 个人博客jkraise.top
展开
-
webpack配置02
加载picture文件webpack5使用四种新增的资源模块(Asset Modules)替代了这些loader的功能。asset/resource 将资源分割为单独的文件,并导出url。asset/inline 将资源导出为dataURL(url(data:))的形式,asset/source 将资源导出为源码(source code).asset 自动选择导出为单独文件或者 dataURL形式(默认为8KB).module: { rules: [ {原创 2021-12-23 11:11:53 · 427 阅读 · 0 评论 -
webpack配置基础01
webpack主要功能:它提供了友好的前端模块化开发支持,以及代码压缩混淆、处理浏览器端JavaScript的兼容性、性能优化等强大的功能。3.在项目中安装 webpack在终端运行如下的命令,安装webpack相关的两个包:npm install webpack@5.42.1 webpack-cli@4.7.2-save-dev-S 是–save的简写-D 是–save-dev的简写在项目中配置 webpack创建webpack.config.js 文件2. module.expor原创 2021-12-23 11:10:40 · 205 阅读 · 0 评论 -
Vue路由懒加载&&路由守卫
路由懒加载有时候有些路由下的组件需要打包在同个异步块(chunk)中,使用webpackChunkName 语法使用懒加载,const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')const Baz = () => import(/* webpac原创 2021-12-23 11:09:31 · 458 阅读 · 0 评论 -
VueRouter的进阶使用
命名路由const routes = [ { // 路由参数,user_id path: "/user/:user_id", // 给路由起别名 name: "user", component: User, // 使用props 传参 props: true, }]使用路由<div> <router-link to="/">主页</router-link> <!--params 传参数-->原创 2021-12-23 11:08:34 · 478 阅读 · 0 评论 -
vue-cli 项目 使用的vue add router&&配置VueRouter
1.安装路由npm i vue-router注意vue-cli 项目,使用的vue add router添加vue Router,但是它会覆盖你的App.vue,因此提前备份这个文件,在运行此命令2.在src中,创建Routers文件夹下创建index.js3.在src目录下创建 组件/src/views/Home.vue /src/views/About.vue 4.在Routers文件夹下创建index.js中导入 VueRouter、组件, 定义路由import VueRouter原创 2021-12-23 11:07:18 · 980 阅读 · 0 评论 -
Vue异步操作&&promise使用
异步操作异步的执行流程1.先执行同步任务2.再执行异步任务异步任务分为 微任务, 宏任务先执行微任务再执行 宏任务微任务 有 promise MutationObserver宏任务 有 定时器 DOM事件回调微任务,是一个任务队列,先进先出,3.javascript 单线程模型promisepromise是什么?1、主要用于异步计算2、可以将异步操作队列化,按照期望的顺序执行,返回符合预期的结果3、可以在对象之间传递和操作promise,帮助我们处理队列为什么会转载 2021-12-23 11:05:40 · 528 阅读 · 0 评论 -
Vue事件对象&&动效Transtion组件的理解
事件对象 在函数只有一个参数的,可以不写$evnet<button @click="handleClick('阿元', $event)">按钮</button> <script> let app = new Vue({ el: "#app", data: { name: "hello word", msg: "<em>.原创 2021-12-10 15:04:59 · 185 阅读 · 0 评论 -
Vue组件通信-简单使用,
组件通信父给子组件通信子组件通过props属性接收var father = { template: ` <div> <button @click="handleClick"></button> <!-- 静态传值 zhangsan --> <son name="name"></son> <!-- 动态传值 zhangsi --> <son :name="name原创 2021-12-07 20:46:34 · 386 阅读 · 0 评论 -
前端工程化(Vue3.0项目,Vue2.0项目)
前端工程化实际的前端开发:模块化|(js的模块化、Css的模块化、资源的模块化)组件化(复用现有的UI结构、样式、行为)规范化(目录结构的划分、编码规范化、接口规范化、文档规范化、Git分支管理)自动化(自动化构建、自动部署、自动化测试)webpack主要功能:它提供了友好的前端模块化开发支持,以及代码压缩混淆、处理浏览器端JavaScript的兼容性、性能优化等强大的功能。3.在项目中安装 webpack在终端运行如下的命令,安装webpack相关的两个包:npm install原创 2021-09-29 11:43:34 · 436 阅读 · 0 评论 -
Vue 前端框架神器(前端必备)
Vue 前端框架神器前提引入Vue<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>定义div 标签,设置好选择器 可以用类也可以是其它的选择器在js中使用view 提供数据<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>原创 2021-04-02 16:55:02 · 180 阅读 · 0 评论 -
vue列表渲染
vue列表渲染<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <titl转载 2021-04-02 17:08:42 · 50 阅读 · 0 评论