Vue
Vue 相关学习
A_bad_horse
不积跬步,无以至千里!
展开
-
VUE 错误 [vuex] unknown action type: user/userLogin
[vuex] unknown action type: user/userLogin原创 2022-08-12 17:24:19 · 1573 阅读 · 0 评论 -
VUE 使用 mock
vue使用mock原创 2022-08-12 16:22:01 · 1371 阅读 · 0 评论 -
Vue - 详解.env文件
.env文件配置Vue项目中,.env文件是运行项目时的环境配置文件。但是在实际开发过程中,有本地开发环境、测试环境、生产环境等,不同环境对应的配置会不一样。因此,需要通过不同的.env文件实现差异化配置。...原创 2022-04-13 14:13:14 · 11815 阅读 · 0 评论 -
Vue - axios
axios是基于promise对ajax的一种封装。默认使用get请求方式axios({ url: 'http://localhost:6068/api/v1/version',}).then(res => { console.log('res..', res);}).catch(err => { console.log('err');})等同于axios({ url: 'http://localhost:6068/api/v1/version',原创 2022-03-05 21:40:49 · 267 阅读 · 0 评论 -
Vue - 解构对象
const obj = { // 对象的解构 name: 't1', age: 18, sex: 'male'}const { name, age, sex } = obj;const { name, sex, age } = obj; // 与顺序无关,只和名字相关console.log(name);console.log(age);console.log(sex);原创 2022-03-05 21:36:10 · 1220 阅读 · 0 评论 -
Vue - vuex
Vuex 提出了单一状态树Single Source of Truth,亦可译为单一数据源。 Vuex 使用单一状态树来管理应用层级的全部状态mutation# Payload: 传递参数Vuex 要求mutation中方法必须是同步的devtools 可捕获mutation快照 异步操作时,devtools无法实时跟踪mutationAction 作用于异步操作通过dispatch调用函数...原创 2022-03-05 21:38:12 · 321 阅读 · 0 评论 -
Vue - ERESOLVE unable to resolve dependency tree
ERESOLVE unable to resolve dependency tree这样的关键字,这是npm版本的依赖冲突的提示使然,那么npm:何时使用--force和--legacy-peer-deps?--force 会无视冲突,并强制获取远端npm库资源,即使本地有资源也会覆盖掉--legacy-peer-deps:安装时忽略所有peerDependencies,忽视依赖冲突,采用npm版本4到版本6的样式去安装依赖,已有的依赖不会覆盖,。建议用--legacy-peer-deps 比原创 2022-03-05 14:41:44 · 1572 阅读 · 0 评论 -
Vue - chrome安装vue插件
chrom安装vue插件原创 2022-03-05 14:39:13 · 453 阅读 · 0 评论 -
Vue - Promise concept
What is Promise?1. In ES6, Promise is a constructor and Promise is used generate Promise instance.2. Promise is a solution in asynchronous programming.How to create a Promise instance?writing style 1var promise = new Promise(function(resolve, rej原创 2022-03-04 21:45:49 · 189 阅读 · 0 评论 -
Vue - keep-alive
keep-alive 说明keep-alive 实际应用<v-main> <v-container fluid> <nuxt keep-alive :keep-alive-props="{ include: ['pages/requests/index.vue'] }" /> </v-container></v-main>动态绑定属性keep-alive 可缓存router页面中的数据,通过created()函数可原创 2022-03-03 17:02:45 · 95 阅读 · 0 评论 -
Vue - router 导航守卫
实际开发中导航守卫的写法不常用,但是该思想是常用的。import Vue from 'vue'import Router from 'vue-router'import Home from '@/components/Home'const HomeMessage = () => import('@/components/HomeMessage')const HomeNews = () => import('@/components/HomeNews')const HelloW原创 2022-03-03 16:33:46 · 89 阅读 · 0 评论 -
Vue - router vs route
router vs route两者有本质的区别: methods: { btnClick() { console.log("User.vue...router...", this.$router); // from User.vue console.log("User.vue... route...", this.$route); // index.js中的路由 } }原创 2022-03-03 15:56:32 · 157 阅读 · 0 评论 -
Vue - router 传参
router 传参的参数类型URL scheme 定义router - query<router-link :to="{path:'/profile', query: {name: 't1', age: 18}}">档案</router-link><template> <div> <h2>This is Profile</h2> <h3>{{$route.query}}&..原创 2022-03-03 15:15:06 · 105 阅读 · 0 评论 -
Vue - router 嵌套路由
嵌套路由的概念嵌套路由的实现嵌套路由实现的代码片段index.jsimport Home from '@/components/Home'const HomeMessage = () => import('@/components/HomeMessage')const HomeNews = () => import('@/components/HomeNews')const HelloWorld = () => import('@/components/.原创 2022-03-03 14:43:33 · 292 阅读 · 0 评论 -
Vue - vscode设置vue默认模板
文件 - 首选项 - 用户片段 - vue.json修改vue.json{ "Print to console": { "prefix": "vue", "body": [ "<template>", " <div></div>", "</template>", "", "<s原创 2022-03-03 14:07:21 · 562 阅读 · 0 评论 -
Vue - router 懒加载
路由的懒加载打包构建应用时,Javascript 包会变得很大,影响页面加载 将不同路由对应的组件分割为不同的代码块,当路由被访问时才加载对应的组件,提高了效率问题描述1. 路由最后被打包放在js文件中2. 多个页面放在一个js文件中,导致此页面非常大3. 一次性从服务器请求此页面,需花费一定时间,用户电脑甚至会出现短暂空白4. 为避免以上情况,可使用路由懒加载懒加载3种方式懒加载代码片段import Vue from 'vue'import Router from '原创 2022-03-03 11:32:32 · 171 阅读 · 0 评论 -
vue - router-link
router-link原创 2022-03-02 18:46:50 · 102 阅读 · 0 评论 -
npm - npm run
npm run devnpm run build原创 2022-03-02 18:36:21 · 131 阅读 · 0 评论 -
Vue - router
what is router后端路由前后端路由安装路由router-view / router-link原创 2022-03-02 18:34:35 · 99 阅读 · 0 评论 -
Vue - Runtime Complier vs Runtime-only
Runtime-compilertemplate -> ast(抽象语法树) -> render -> vDOM -> UIRuntime-only (性能更高,代码量更少)render ->vDOM -> UIRuntime-only 模式的代码提交小6KB的原因就在此。原创 2022-03-02 13:14:07 · 100 阅读 · 0 评论 -
Vue - 安装vue@cli
何为cliCLI Command-Line Interface,命令行界面,俗称脚手架 Vue CLI是一个官方发布的vue.js项目脚手架 使用vue-cli可以快速搭建Vue开发环境以及对应的webpack配置npm 安装@vue/clinpm install -g @vue/cli安装成功后:默认安装成功的是vue最新版本,如果需要使用vue2x版本,需要拉取2.x模板。npm install -g @vue/cli-init# `vue init` 的运行效果原创 2022-03-02 10:43:09 · 188 阅读 · 0 评论 -
Vue - required is not defined - webpack
代码如下:index.html main.js mathUtil.js<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initia..原创 2022-02-27 18:01:44 · 7147 阅读 · 0 评论 -
Vue - required is not defined - browserify
代码如下:index.html main.js mathUtil.js<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initia..原创 2022-02-27 17:38:06 · 1268 阅读 · 0 评论 -
Vue - 具名插槽
<body><div id="app"> <cpn1>test1</cpn1> <cpn1><span slot="left">new left</span></cpn1></div><template id="cpn1"> <div> <slot name="left">left</slot> <slot n.原创 2022-02-27 09:04:05 · 104 阅读 · 0 评论 -
Vue - slot 插槽
slot作用1. 使封装的组件更具拓展性2. 让用户可以选择展示组件内部的内容slot基本使用1. 基本使用:<slot></slot>2. 默认值: <slot><button></button></slot>3. 如果有多个值,同时放入插槽进行替换时,一起作为替换元素<body><div id="app"> <cpn1><button>button1<原创 2022-02-27 08:56:35 · 98 阅读 · 0 评论 -
Vue - 组件通信 - 父访问子
this.$children这种访问方式在实际开发中不常使用。<body><div id="app"> <cpn></cpn> <button @click="btnClick">click</button></div><template id = 'cpn'> <div>我是子组件</div></template><script sr原创 2022-02-27 08:34:26 · 170 阅读 · 0 评论 -
Vue - 父子组件通信 - 双向绑定
<div id="app"> <cpn :cnumber1="num1" :cnumber2="num2" @b1-listener="b1click" @b2-listener="b2click"></cpn></div><template id = 'cpn'> <div> <h2>props: {{cnumber1}}</h2> <h2>data: {{dnum..原创 2022-02-26 21:51:23 · 141 阅读 · 0 评论 -
Vue - 组件通信 (子传父)
子组件通过$emit()触发事件 父组件通过v-on监听子组件事件<body><div id="app"> <cpn @itemclick="cpnClick"></cpn></div><template id="cpn"> <div> <button v-for="item in categories" @click="btnClick(item)"> {{item.n原创 2022-02-26 20:33:29 · 138 阅读 · 0 评论 -
Vue - 组件通信
1. 组件对象属性可包含:data, methods, etc2. data属性必须是函数,且该函数返回一个对象,对象内部保存数据。data 必须定义为函数,格式为:data() { return {}}原因:每个组件实例都会重新call函数,避免使用对象会重复调用。(对象地址会重复)父组件 → 子组件: 使用props子组件 → 父组件: 使用事件...原创 2022-02-26 17:55:02 · 173 阅读 · 0 评论 -
Vue - 组件data
1. 组件对象属性可包含:data, methods, etc2. data属性必须是函数,且该函数返回一个对象,对象内部保存数据。<body><div id="app"> <my-cpn></my-cpn></div><template id="cpn"> <div> <h2>test</h2> <h2>{{title}}</h2>原创 2022-02-26 11:56:53 · 301 阅读 · 0 评论 -
Vue - 组件无法访问实例数据
<body><div id="app"> <my-cpn></my-cpn></div><template id="cpn"> <div> <h2>test</h2> <h2>{{message}}</h2> </div></template><script src="../vue.js"><.原创 2022-02-26 11:48:30 · 229 阅读 · 0 评论 -
Vue - 父子组件
<body><div id="app"> <comp2></comp2></div><script src="../vue.js"></script><script> // 创建第一个组件 const component1 = Vue.extend({ template: ` <div> <h2>标题1.原创 2022-02-26 11:27:21 · 105 阅读 · 0 评论 -
Vue - 全局组件、局部组件
<body> <div id="app"> <component1></component1> <component1></component1> <component2></component2> </div><script src="../vue.js"></script><script>.原创 2022-02-26 10:52:57 · 117 阅读 · 0 评论 -
Vue - 组件的基本使用
<body><div id="app"> <!-- step3. 使用组件 --> <component1/></div><script src="../vue.js"></script><script> // step1. 创建组件构造器对象 const component1 = Vue.extend({ template: ` .原创 2022-02-26 10:32:42 · 91 阅读 · 0 评论 -
Vue - v-model
表单绑定 v-modelVue使用v-model实现表单元素和数据的双向绑定。v-model 本质是个语法糖,实质包含2个操作1. v-bind:绑定value属性值 2. v-on 给当前元素绑定input事件<input type="text" v-model = "message">=><input type="text" v-bind:value="message" v-on:input="message = $event.target.value"&g原创 2022-02-26 09:07:51 · 214 阅读 · 0 评论 -
Vue - v-for
<div id="app"> <ul> <li v-for="(value, key, index) in info"> {{value}} - {{key}} - {{index}}</li> </ul> <ul> <li v-for="item in info"> {{item}}</li> </ul></div>.原创 2022-02-23 22:24:41 · 156 阅读 · 0 评论 -
Vue - v-show
v-show: 条件为false时,相当于添加行内样式 display:none。查看网页源码时可以看到元素。v-if:条件为flase时,查看网页源码时看不到元素。原创 2022-02-23 22:09:08 · 175 阅读 · 0 评论 -
Vue - @click
# 调用事件时没有参数,括号可有可无,此时默认将浏览器产生的event事件对象作为参数传入到方法中<button @click='test()'> btn </button><button @click='test'> btn </button># 方法中没有引号的字符默认为变量,e为变量<button @click='test(e)'> btn </button># Vue 将浏览器生产的event事件作为参数传递到方.原创 2022-02-23 22:06:29 · 846 阅读 · 0 评论 -
Vue - ES5 & ES6
函数增强写法# ES5const obj = { run: function() { }, eat: function() { }}# ES6const obj = { run() { }, eat() { }}属性增强法const name = 'Bill';const age = 18;# ES5const obj = { name: name, age: age}# ES6const obj = { name, a原创 2022-02-23 22:05:12 · 442 阅读 · 0 评论 -
Vue - computed
computed: { fullName: { return this.firstName + ' ' + this.lastName; } || fullName: { get: function() { return this.firstName + ' ' + this.lastName; } }}computed 相关解释可参见官网,这里主要说的是get方法是默认方法。...原创 2022-02-23 22:02:16 · 163 阅读 · 0 评论