随笔分类 -  前端

摘要:通过mutations修改state状态 mutations中的方法必须是同步方法 this.$store.commit('mutations中的方法') const store = new Vuex.Store({ state: { counter: 100 }, mutations: { //方 阅读全文
posted @ 2022-11-25 17:42 iTao0128 阅读(28) 评论(0) 推荐(0)
摘要:安装 npm install vuex --save 创建store文件夹及index.js文件 import Vue from 'vue' import Vuex from 'vuex' //1.安装插件 Vue.use(Vuex) //2.创建对象 const store = new Vuex. 阅读全文
posted @ 2022-11-25 15:52 iTao0128 阅读(23) 评论(0) 推荐(0)
摘要:使用方式 路径前面加上~ import方式导入不需要加~ 阅读全文
posted @ 2022-11-24 20:11 iTao0128 阅读(34) 评论(0) 推荐(0)
摘要:<template> <div class="tab-bar-item" @click="itemClick"> <div v-if="!isActive"><slot name="item-icon"></slot></div> <div v-else><slot name="item-icon- 阅读全文
posted @ 2022-11-23 22:40 iTao0128 阅读(52) 评论(0) 推荐(0)
摘要:keep-alive是vue内置组件,可以使被包含的组件保留状态,避免重新渲染 router-view也是一个组件,如果之间被包在keep-alive里面,所有路径被匹配到的视图组件都会被缓存 切换home组件时的created只会被执行一次,destroyed不会被执行,即始终保持组件活跃状态 k 阅读全文
posted @ 2022-11-21 22:30 iTao0128 阅读(160) 评论(0) 推荐(0)
摘要:参考文档: https://router.vuejs.org/zh/guide/advanced/navigation-guards.html 路由独享的守卫 进入路由之前回调 组件内的守卫 阅读全文
posted @ 2022-11-21 22:10 iTao0128 阅读(31) 评论(0) 推荐(0)
摘要:实现组件跳转时,浏览器标题更新 ①router的index.js文件中 routes配置添加meta属性 ②router.beforeEach方法 import Vue from 'vue' import VueRouter from 'vue-router' const Home = () => 阅读全文
posted @ 2022-11-20 22:08 iTao0128 阅读(107) 评论(0) 推荐(0)
摘要:通过query传递 使用$route获取query对象 通过代码跳转路由的方式传递参数 <template> <div id="app"> <router-link to="/home" tag="button" >首页</router-link> <router-link to="/about" 阅读全文
posted @ 2022-11-19 17:15 iTao0128 阅读(33) 评论(0) 推荐(0)
摘要:home路径下配置一个news和message子路径 import Vue from 'vue' import VueRouter from 'vue-router' const Home = () => import('../components/Home') const HomeNews = ( 阅读全文
posted @ 2022-11-19 16:05 iTao0128 阅读(59) 评论(0) 推荐(0)
摘要:推荐使用下面的方法 import Vue from 'vue' import VueRouter from 'vue-router' const Home = () => import('../components/Home') const About = () => import('../comp 阅读全文
posted @ 2022-11-19 12:36 iTao0128 阅读(23) 评论(0) 推荐(0)
摘要::to绑定参数 /:参数名,进行拼接参数 $route.params.参数名,取参数值 阅读全文
posted @ 2022-11-19 12:16 iTao0128 阅读(27) 评论(0) 推荐(0)
摘要:<template> <div id="app"> <button @click="toHome">首页</button> <button @click="toAbout">关于</button> <!-- 相当于占位符 --> <router-view></router-view> </div> 阅读全文
posted @ 2022-11-18 22:38 iTao0128 阅读(27) 评论(0) 推荐(0)
摘要: 阅读全文
posted @ 2022-11-18 21:39 iTao0128 阅读(20) 评论(0) 推荐(0)
摘要:安装 npm install vue-router --save 路由映射配置 创建router文件夹 新建index.js vue实例中挂载router 使用路由 <router-link></router-link> <router-view></router-view> 默认首页(重定向) r 阅读全文
posted @ 2022-11-16 22:40 iTao0128 阅读(29) 评论(0) 推荐(0)
摘要:通过以下可以改变浏览器中的url 跳转到home路径下: location.hash='home' 跳转到about路径下: history.pushState({},'','about') 向上回退: history.back() 向前进: history.forward() 使用test路径替换 阅读全文
posted @ 2022-11-16 20:57 iTao0128 阅读(24) 评论(0) 推荐(0)
摘要:1. 安装element-ui npm i element-ui -S 2. main.js中配置 //1.导入组件库 import ElementUI from 'element-ui' //2.导入组件样式相关 import 'element-ui/lib/theme-chalk/index.c 阅读全文
posted @ 2022-11-03 21:44 iTao0128 阅读(674) 评论(0) 推荐(0)
摘要:一、配置环境1.安装VS Code官网下载 https://code.visualstudio.com/ 下载VS Code,按照步骤安装。 2.安装node.js(1)官网 https://nodejs.org/en/ 下载node.js,按照步骤安装即可,node.js安装完成之后会同步安装np 阅读全文
posted @ 2022-10-23 21:23 iTao0128 阅读(1307) 评论(0) 推荐(0)
摘要:webpack介绍:前端模块化打包工具 先安装node.js 安装webpack npm install webpack -gnpm install webpack-cli -g测试安装成功:webpack -vwebpack-cli -v 脚手架的安装 阅读全文
posted @ 2022-03-03 22:08 iTao0128 阅读(37) 评论(0) 推荐(0)
摘要:CommonJS a.js let name = "小明"; let age = 20; let flag = true; function sum(num1, num2) { return num1+num2; } module.exports = {name,age,flag,sum} b.js 阅读全文
posted @ 2022-03-03 22:04 iTao0128 阅读(40) 评论(0) 推荐(0)
摘要:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi 阅读全文
posted @ 2022-02-27 22:21 iTao0128 阅读(54) 评论(0) 推荐(0)