IE_Oxygen2.0-CSDN博客

原创 vue的过渡效果踩坑

过度效果为了添加vue的过渡效果<transition >，显示和消失需要使用v-if来控制，而不能使用v-show。因为transition的过度，不支持 display:none;和display:block;等只有一种或两种状态的属性，应该是对dom的改变而生效。转而言之，vue控制过渡的各个状态，是指dom元素插入和离开document过程的状态。参考：Vue.js 过渡 & 动画 | 菜鸟教程 (runoob.com) vue 在vue项目中使用动画 trans

2021-09-14 21:36:45 174

原创路由懒加载和图片懒加载

懒加载在项目中为了优化加载速度和节约资源，会使用懒加载这一概念。下面例子是基于vue框架实现的懒加载。路由懒加载vue项目实现路由按需加载(路由懒加载)的3种方式 - 简书 (jianshu.com)路由懒加载 | Vue Router (vuejs.org)常用方法：es规范的import()注意：webpackChunkName可以把某个路由下的所有组件都打包在同个异步块 (chunk) 中图片懒加载懒加载原理是什么先将 img 标签中的src链接设为同一张图片（空白图片），将其真正

2021-09-14 21:32:25 801

原创在Vue中使用Swiper插件

在Vue中使用Swiper插件Swiper是比较常见的轮播图插件，但版本比较多，原生和Vue的使用方法有差异，使用起来有一点不知所措参考资料官方教程：surmon-china/vue-awesome-swiper: ???? Swiper component for @vuejs (github.com)参考视频：[【Vue - Swiper】最简单明了的Swiper教程重投]_哔哩哔哩_bilibiliAPI使用文档：中文api - Swiper中文网视频踩坑：建议安装Swipeer4，

2021-09-04 11:00:29 302

原创在方法中使用箭头函数this指向问题

首先来一道题目var go =console;var langue ={ name: '', php(){ var t = this; go.info(t.name); }, python: () =>{ let t = this; go.info(t.name); }};langue.php(); //输出空langue.python();//输出空第一个输出其实是langue.name；很好理解这种函数声明，this指向langu

2021-08-31 00:04:12 230

原创 Vue CLI 入门09 Vuex进阶

Vuex核心概念成员列表：state 存放状态getters 加工state成员给外界mutations state成员操作方法actions 异步操作modules 模块化状态管理State 单一状态树Single Source of Truth 单一数据源只创建一个store，永远对应$store来使用Getters相当于计算属性，如果需要对state做一定处理后再交给组件，则使用gettersgetters的计算属性会默认传入两个参数(state, getters).

2021-08-20 20:44:57 170

原创 Vue CLI 入门08 Vuex基础

VuexVuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension (opens new window)，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。Vu

2021-08-20 20:41:04 91

原创 Vue CLI 入门07 vue-router通过query属性传参

通过query实现利用URL往组件传递参数新建组件profile添加到路由映射在App.vue中模板添加<router-link v-bind:to="{path:'/profile', query:{name:'Oxygen', age:21 }}" tag="button">档案</router-link>v-bind绑定to和一个对象，对象中有path路径和query属性，在此处指定query属性可以存放数据（App.vue的data也可以）也可

2021-08-03 23:07:55 130

原创 Vue CLI 入门06 vue-router路由守卫（导航守卫）

路由守卫（导航守卫）监听路由的跳转过程举例：全局路由守卫，在路由配置文件中router.beforeEach方法需求：跳转不同组件，title显示不同名称在各个一级组件的route中添加meta属性，放置对应titleconst roomroute = { path: '/room', component: Room, meta:{ title:'房间' }};然后使用全局前置守卫router.beforeEach((to, from, next) =&gt

2021-08-03 23:02:57 193

原创 Vue CLI 入门05 vue-router路由嵌套与keep-alive

路由嵌套即在某个组件内，再通过路由嵌套子组件，类似于tab页；如 /home 路径下有 /home/news 和 /home/message 两个路径，并分别对应不同组件嵌套再home组件中再home页面中，通过访问/home/news 和 /home/message来访问一些内容1、创建对应的子组件，并在路由映射中配置对应的子路由类似Home.vue新建HomeNews.vue和HomeMessage.vue组件在router的index.js中以懒加载的方式引入const Hom

2021-08-03 22:59:28 565

原创 Vue CLI 入门04 vue-router懒加载

懒加载前提npm run build对vue项目打包自动生成dist文件夹，里面有js文件夹；js目录下，app文件为我们自己写的业务文件；chunk-vendor文件为第三方框架/库（如vue、axios、vue-router等）。插入：vue-cli4 打包时的踩坑打包时报错Error: Callback was already called.网上的解决方法是把node_modules删除后，npm install，再打包。实测无效。有效方法是：新建一个和package.jso

2021-08-03 22:51:38 169

原创 vue-cli4 打包报错Callback was already called

vue-cli4 打包时的踩坑npm run build打包时报错Error: Callback was already called.网上的寥寥无几的解决方法是把node_modules删除后，npm install，再打包。实测无效。有效方法是：新建一个和package.json同级的vue.config.js文件往里面添加module.exports = { css: { extract: false }}再次打包，succeed！具体原因希望大佬

2021-07-28 10:45:06 2626 7

原创 Vue CLI 入门03 vue-router 动态路由

Vue-router进阶动态路由我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染，像 /user/foo 和 /user/bar 都将映射到相同的组件。1、添加路由关系在components目录新建User.vue文件，内容形式和之前的home差不多，作为一个组件使用。在router/index.js引入Userimport User from '../components/User.v

2021-07-28 01:15:11 313

原创 Vue CLI 入门02 vue-router基础

Vue-router管理组件和URL之间的映射关系一、搭建基础框架安装npm install vue-router --save手动配置具体文件在src目录下新建router目录，再新建index.js文件存放路由信息目录结构：配置index.js文件//1、配置路由相关信息import VueRouter from 'vue-router'import Vue from 'vue'//2、通过Vue.use(插件)来安装插件Vue.use(VueRouter)

2021-07-26 16:02:14 112

原创 URL的hash和HTML5的history

URL的hash和HTML5的history为了实现SPA，实现改变URL，但不会向服务器请求资源，网页不会刷新。改变URL的hash原URL为http://localhost:8081/location.hash = 'xxx'则URL变为http://localhost:8081/#xxx，且并没有请求新资源。HTML5的history//pushState方法类似于压栈history.pushState({},'','URLA') //http://localhost:8

2021-07-25 22:33:14 45

原创前端渲染和后端渲染

前端渲染和后端渲染后端渲染阶段url对应不不同的页面，在后端通过jsp等技术渲染完成后再发送到前端展示。后端路由：后端处理URL和页面之间的映射关系。前后端分离阶段后端只负责提供数据，不负责任何阶段的内容前端渲染：浏览器根据URL在静态服务器获取网页代码。Html和Css直接渲染出网页，执行JS代码，通过AJAX向API服务器获取数据并进行操作，显示在网页上。后端和前端交互时只需要提供API接口即可。SPA单页面富应用阶段SPA，整个网页只有一个html页面，静态服务器会把一套

2021-07-25 18:12:20 161

原创 ES6箭头函数与this指向

ES6箭头函数与this指向普通函数一般形式function AAA() { console.log('function'); }匿名函数 const BBB = function () { console.log('function'); }面向对象字面量函数const obj = {//普通写法 CCC: function (){ console.log('function'); },//ES6写法 DDD(){

2021-07-25 15:33:36 53

原创 Vue CLI 入门01 新建一个项目

Vue CLICommand-Line Interface，命令行界面Vue CLI是官方发布vue.js项目脚手架使用vue-cli可以快速搭建Vue开发环境以及对应的webpack配置配置前提安装node安装webpack安装Vue脚手架npm install -g @vue/cli 全局安装（vue cli4）vue cli4和3有一定不同，参考博文：vue cli3 和 vue cli4 - 苏小米 - 博客园 (cnblogs.com)创建项目在文件目录下执行

2021-07-24 19:20:14 58

原创初学webpack(4) 配置webpack-dev-server

webpack其他webpack-dev-server可用于搭建本地服务器，基于node.js搭建，内部使用express框架，实现浏览器自动刷新显示修改结果。（类似于vscode的live server）缓存到内存中，发布时在存入硬盘安装该模块npm install webpack-dev-server --save-dev配置webpack.config.js在module.exports中添加 devServer:{ contentBase:'./dist',

2021-07-23 16:20:37 233

原创初学wbepack(3)配置Vue

webpackVue入门配置目录结构沿用了上一节的整个项目1、npm安装vue进入单独的项目，这时vue就相当于一个模块。npm install vue-dev为仅开发时依赖，而vue在项目执行时也需要依赖，所以不使用。v14.16.1的node安装vue时默认为--save，因此也不需要添加。刷新目录，会在node_modules文件夹下生成一个vue文件夹。2、在main.js中引入vue并编写模板在开发时我们遵循只保留index.html一个html文件，所以在index

2021-07-21 20:54:07 102

原创初学wbepack(2) Loader

Loader因为webpack其实只能处理JS文件，但在开发中我们通常还要打包其他的配套文件，如css、less、图片，以及为了兼顾兼容性，需要将es6的语法转化为es5。这时就需要loader来协助转化。处理CSS文件文件结构：1、main.js文件添加css文件的依赖 require('./css/index.css')2、安装css-loader和style-loader npm install --save-dev style-loader npm install --

2021-07-20 13:56:18 52

原创初学webpack(1) 入门配置

webpack入门配置入门webpack是一款模块化打包工具，能将各种模块化文件，及它们之间的依赖，打包成一个JS文件，形成一个统一的接口。在html文件中直接引入这个最终打包文件即可。文件结构math.js导出，main.js引入，形成依赖，最终打包生成bundle.js文件，引入index.html中。版本号不同版本号的命令和操作有差异。安装时不指定版本号即为最新版本。基础命令行将main.js和它的相关依赖math.js，打包成bundle.js，体验初步打包webpack ./

2021-07-19 12:07:41 62

weixin_42713144的博客