vue
文章平均质量分 63
vue
superkcl2022
这个作者很懒,什么都没留下…
展开
-
vue3-vue.config.js-配置别名
//会和项目公共的配置进行合并module.exports = { configureWebpack: { resolve: { extensions: [], alias: { // '@': 'src' 内部已经配置了这个 'assets': '@/assets', 'common': '@/common', 'components': '@/components', 'network'原创 2021-04-27 22:38:14 · 801 阅读 · 0 评论 -
Axios-拦截器interceptors
有4个拦截:请求成功 | 请求失败 | 响应成功 | 响应失败export function request(config) { const instance = axios.create({ baseURL: 'http://123.207.32.32:8000', timeout: 5000 }) //拦截器 instance.interceptors.request.use( //发送成功 config=>{原创 2021-04-26 23:02:56 · 386 阅读 · 0 评论 -
Vue-Axios基本使用-并发请求-全局配置-Axios实例-模块封装
Axios基本使用导入axioscnpm npm install axios --saveimport axios form 'axios'axios({ url: 'http://123.207.32.32:8000/home/multidata' // axios自动调用promise,并进入resolve函数继续调用}).then(res=>{ console.log(res)})原创 2021-04-26 20:09:46 · 418 阅读 · 0 评论 -
Vuex-Actions(替换Mutation的异步操作)-Modules模块-对象解构
actions引子修改info的name<h2>info:{{$store.state.info}}</h2> <button @click="updateInfo">修改info的name</button> updateInfo(){ this.$store.commit('updateInfo') }mutations updateInfo(state){ //请求服务器更改 setTim原创 2021-04-26 12:04:42 · 395 阅读 · 0 评论 -
Vuex-State-Mutations携带参数|响应规则|类型常量-Getters
Vuex简介是一个专为vue.js开发的状态管理模式它采用集中式存储管理应用的所有组件的状态,并以对应的规则保证状态以一种可预测的方式发生变化Vuex也继承到Vue的官方调试工具devtools extension,提供了诸如零配置的time-travel调试,状态快照导入导出等高级调试功能什么是状态管理?你可以简单的将其看成需要多个组件共享的变量全部存储在一个对象里面然后,将这个对象放在顶层的Vue实例中,让其他组件可以使用那么,多个组件是不是就可以共享这个对象中的所有变量属性了呢?原创 2021-04-25 23:16:24 · 436 阅读 · 0 评论 -
Vue-路由-keep-alive
介绍router-view是vue-router的一个组件,如果直接被包在keep-alive里面,所有路径匹配到的视图组件都会被缓存keep-alive是vue内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染activated() 和 deactivated() 这两个函数,只有该组件被保持了状态使用了keep-alive时,才生效keep-alive 两个属性-include-exclude多个组件,用逗号隔开...原创 2021-04-24 18:00:25 · 99 阅读 · 0 评论 -
Vue-路由-传递参数-$route-$router-导航守卫-beforeEach
传递参数两种方式:params和queryparams的类型* 配置路由格式: `/router/:id`* 传递的方式:在path后面加上对应的值* 传递后形成的路径:` /router/123`, `/router/abc`1.首先编写User.vue组件2. App.vue 有一个router-link :to="'/user/'+userId",界面链接显示3. router->index.js 配置/user/:id 路由映射方式,这样就根据userid映射成功了4.原创 2021-04-24 16:41:49 · 595 阅读 · 0 评论 -
Vue-路由-动态路由-懒加载-路由嵌套
动态路由在某些情况下,一个页面的path路径可能是不确定的,比如进入用户界面时,我们希望的路径是/user/aaa/user/bbb除了有前面的/user之外,后面还跟上了用户的ID这种path和Component的匹配关系,我们称之为动态路由http://localhost:8080/user/zhangsanrouter main.js { path: '/user/:userId', component: User }App.vue<原创 2021-04-24 11:38:00 · 204 阅读 · 0 评论 -
Vue-路由-安装和配置方式
安装和使用npm install vue-router --save导入路由对象,并调用Vue.use(VueRouter)创建路由实例,并传入路由映射配置在Vue实例中挂在创建的路由实例新建router文件夹,新建index.js文件//配置路由相关的信息import VueRouter from 'vue-router'//1.通过Vue.use(插件),安装插件import Vue from "vue";Vue.use(VueRouter)//2. 创建VueRouter对原创 2021-04-23 23:00:16 · 416 阅读 · 0 评论 -
Vue-路由-原理简介-前端路由-hash-history
认识路由先创建一个vue-cli2项目,use vue-router略…前端渲染 后端渲染 前端路由 后端路由后端渲染jsp: (java server page) = html+css+java代码(动态从数据库读取数据)服务器端已经渲染好了,网页已经渲染好了,然后发送给前端服务器端直接生产渲染号对象的html页面,返回给客户端进行展示URL会发送给服务器,服务器会通过正则对该url进行匹配,并且最后交给一个controller进行处理controller进行各种处理,最终生成HT原创 2021-04-23 19:54:33 · 1472 阅读 · 8 评论 -
Vue-脚手架-CLI2-CLI3-箭头函数
简介CLI是Command-Line Interface,命令行界面,俗称脚手架vue cli 是一个官方发布的vue.js项目的脚手架使用vue-cli可以快速搭建vue开发环境以及对应的webpack配置使用前提-1.node 2.webpackwebpack依赖于node(npm)vue.js官方脚手架工具使用了webpack模板,他在开发中提供了一套完整的功能,能够使我们开发过程中变得高效vue CLI使用安装脚手架3终端安装!!!sudo cnpm install -g @原创 2021-04-23 17:26:57 · 276 阅读 · 0 评论 -
webpack-3-plugin插件-html打包压缩
Pluginloader和plugin的区别:loader主要用于转换某些类型的模块,他是一个转换器plugin是插件,他是对webpack本身的扩展,是一个扩展器plugin的使用过程:通过npm安装使用plugins,某些webpack已经内置插件在webpack.config.js中的plugins中配置插件版权声明pluginreact MIT 协议...原创 2021-04-23 11:29:55 · 169 阅读 · 0 评论 -
webpack-2-所有配置-template-vue终极使用方案
创建文件夹打包好后,index.html 引入bundle.js文件即可生成package.jsonnpm init在package.json中添加脚本命令"build": "webpack"3.生成package-lock.json文件,不用管npm install创建webpack.config.js文件const path = require('path')module.exports = { entry: './src/main.js', output:..原创 2021-04-21 16:22:42 · 217 阅读 · 0 评论 -
webpack-1-使用config-css-url-babel-loader
math.jsfunction add(a,b) { return a+b;}function sub(a,b) { return a-b;}module.exports = { add, sub}main.js//commonJS语法const{add,sub} = require("./math")var a = 10,b = 5;var t1 = add(a,b);console.log(t1);//ES6语法import {name,age,sex原创 2021-04-21 13:47:51 · 625 阅读 · 2 评论 -
Vue(5)-CommonJS
commonJs导入导出导出:var flag = truefunction sum(a,b){ return a+b;}module.exports = { flag: flag, sum: sum}导入var {flag,sum} = require('./01.js')console.log(sum(1, 2));ES模块化的导入和导出export { flag,sum}import {flag,sum} from './01.js'方式二expor原创 2021-04-22 18:01:53 · 1130 阅读 · 0 评论 -
Vue(4)-插槽slot
为什么使用slot?slot的基本使用nav-bar导航栏组件,分为三部分,左中右,三个slot,预留空间<div id="app"> <cpn><button>按钮</button></cpn> <cpn><span>span</span></cpn> <cpn><h2>h2</h2></cpn></div>原创 2021-04-22 16:25:24 · 135 阅读 · 0 评论 -
Vue(3)-计算属性和侦听器
计算属性计算属性可以看成一种可以缓存的结果的函数(即属性,即对象),只要这个函数里的变量不变,那么这个函数的结果就不变计算属性包含watch的功能,computed的get函数体就有侦听功能!模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如:<div id="example"> {{ message.split('').reverse().join('') }}</div>在这个地方,模板不再是简单的声明原创 2021-04-22 14:24:18 · 102 阅读 · 0 评论 -
Vue(2)-v-on参数问题, v-on修饰符
v-on参数问题如果@click不需要额外的参数,该方法后的()可以不添加如果方法本身中有一个参数,那么会默认将原生事件event参数传递进去如果需要同时传入某个参数,同时需要event时,可以通过$event传入事件<div id="app"> <!--undefine--> <button @click="btn1Click()">btn1</button> <!--默认传入mouseEvent对象-->原创 2021-04-22 10:54:42 · 104 阅读 · 0 评论 -
Vue(1)-Component -父子组件通信
注册组件组件标签名要小写,组件要用div包裹使用组件的div需要用vue绑定,在vue绑定范围之外无法使用<div id="app"> <cpn></cpn> <cpn></cpn></div><script> Vue.component('cpn',{ template: ` <div> <h2>title</h2>原创 2021-04-21 20:25:50 · 396 阅读 · 1 评论 -
Vue-node.js,Webpack-kuang 略
计算属性:重在属性插槽vue-cli安装nodejs, 使用淘宝加速器npm是软件包管理工具npm install cnpm -g原创 2021-04-20 18:09:17 · 423 阅读 · 1 评论 -
vue-v-text,v-html,v-on, v-show,v-if, v-bind,v-for,v-model
1. v-text :参数为data中的变量 <h2>{{message}}部分替换</h2> <h2>{{message+'字符串拼接'}}</h2> <h2 v-text="info">全部替换</h2>2. v-html :设置标签的innerHTML 普通文本和v-text一致,超文本就显示超文本了 <h2 v-html="message"></h2> <...原创 2021-03-23 11:11:23 · 141 阅读 · 0 评论 -
Vue-简单介绍
<div id="app"> <h2>{{message}}</h2> <h1>{{name}}</h1></div><script src="../js/vue.js"></script><script> //声明式编程 // let(变量)/const(常量) const app = new Vue({ el: '#app', //用.原创 2021-03-19 20:38:03 · 184 阅读 · 0 评论