随笔分类 - Vue再出发
摘要：1、actions addPersonApi(context){ axios.get('https://random-data-api.com/api/name/random_name').then( response=>{ context.commit('ADD_PERSON', {id:nano
阅读全文
摘要：一、模块化 1、几个组件定义几个对象 文件 src/store/index.js // 与count组件相关的optinos const countOptions = { actions:{}, mutations:{}, state:{}, getters:{} } // 与person组件 相关
阅读全文
摘要：1、安装 npm i nanoid 2、引入 import {nanoid} from 'nanoid' 3、使用 nanoid()
阅读全文
摘要：一、mapMutations 1、作用：帮助我们生成与mutations对话的方法，即包含 $store.commit() 2、步骤 a、引入 import {mapActions, mapMutations} from 'vuex' b、语法 methods:{ // mapMutations生成
阅读全文
摘要：一、作用 生成计算属性，简化模版{{xx}}xx的写法，原因xx在vuex中写法麻烦$store.state.x或$store.getters.x 二、步骤 1、引入 import {mapState, mapGetters} from 'vuex' 2、语法 computed:{ // 借助 ma
阅读全文
摘要：1、当state中的数据需要加工使用时，可以使用getters加工 2、在sindex.js中追加getters配置，注意别忘记创建和暴露 //准备state对象--保存具体数据 const state = { sum:0 } // 对state中的数据进行加工处理 const getters =
阅读全文
摘要：1、index.js import Vue from "vue"; import Vuex from "vuex" // 使用Vuex Vue.use(Vuex) // 准备actions对象--响应组件中的动作 const actions = { addOdd(context, value){ i
阅读全文
摘要：一、下载vuex 注意版本 vue2对应 npm i vuex@3 vue3对应 npm i vuex@4 二、创建文件 src/store/index.html import Vue from "vue"; import Vuex from "vuex" // 使用Vuex Vue.use(Vue
阅读全文
摘要：一、作用 父组件可以向子组件指定位置插入html结构，也是一种通信方式，适用于 父组件=>子组件 二、分类 默认插槽、具名插槽(有具体名字的插槽)、作用域插槽 三、使用方式 1、默认插槽 父组件 <Category title="美食" > <ul> <li v-for="data,index in
阅读全文
摘要：一、配置文件 vue.config.js devServer: { proxy: { '/api': { // 获取数据的接口 target: 'http://127.0.0.1:8000', // 特别重要 pathRewrite:{'^/api':''}, ws: true, changeOri
阅读全文
摘要：一、修改配置文件 通过 vue.config.js 中的 devServer.proxy 配置代理 // 配置代理 proxy 指向后端API服务器 devServer: { proxy: 'http://127.0.0.1:8000' } 二、使用axios 1、下载 npm install ax
阅读全文
摘要：一、作用 在插入、更新或移除DOM元素时 在合适的时候给元素提那家样式类名 二、写法 1、准备好样式 元素进入的样式： a、v-enter:进入起点 b、v-enter-avctive:进入过程中 c、v-enter-to:进入终点 元素远离样式： a、v-leave:离开的起点 b、v-leave
阅读全文
摘要：一、watch 作用：对数据进行监听，数据发生变化时执行 二、nextTick 作用：数据修改后，DOM更新完毕后，执行里面的内容，可以和swiper插件配合使用 三、案例 watch:{ // 1、监听数据发生变化, bannerList存储 图片数据 bannerList:{ handler(n
阅读全文
摘要：一、作用 任意组件间通讯 二、使用 1、安装pubsub npm install pubsub-js 2、引入 import pubsub from 'pubsub-js' 3、接受数据(订阅) a、引入 import pubsub from 'pubsub-js' b、回调方法 methods:
阅读全文
摘要：一、优点 任意组件间通讯 二、安装全局事件总线 mian.js，使用生命周期钩子beforeCreate new Vue({ el:'#app', render: h => h(App), // 生命周期钩子 beforeCreate() { Vue.prototype.$bus = this },
阅读全文
摘要：一、proprs 父组件定义方法->传给子组件(子组件props接收)->子组件通过触发事件给父组件传递的方法赋值->父组件的方法获得值 父组件定义方法 methods: { getSchoodata(value){ this.crossData = value } }, 父组件(定义方法)传递给子
阅读全文
摘要：1、作用：让样式在局部(组件)生效，防止样式冲突 2、使用 在除App组件外的样式中添加scoped <style scoped> </style>
阅读全文
摘要：1、功能 增加Vue 2、创建插件(plugins.js)文件 a,b为其它参数 export default { install(Vue，a, b){ // 全局混入 Vue.mixin({ data() { return { x: 100, y: 99 } }, }) // 全局过滤器 Vue.
阅读全文
摘要：1、功能 可以把多个组件共用的配置提取成一个混入对象 2、使用方式 a、创建混入(mixin.js文件) import { computed } from "vue" export const mixin = { methods: { showName(){ alert(this.name) } }
阅读全文
浙公网安备 33010602011771号