Vue
Vue
日渐肥胖的左
这个作者很懒,什么都没留下…
展开
-
vue项目中axios封装(数据请求封装)
一、定义utils(工具类)目录,并创建两个文件,request.js与http.jsrequest.js用于创建axios,并在请求/响应拦截时对需要传递的数据进行处理。import axios from 'axios' // 使用前要先安装依赖:npm install axios// 创建axios实例const service = axios.create({ // 这里可以放一下公用属性等。 baseUrl: 'https://xxxx', // 用于配置请求接口公用部分,请求时会原创 2021-09-13 09:12:28 · 5040 阅读 · 2 评论 -
vue组件之间传递数据(父传子,子传父,兄弟相传)
父组件给子组件传递数据在这里插入代码片原创 2021-09-11 16:16:15 · 351 阅读 · 0 评论 -
vue应用多模板写法
介绍一个应用往往不止有一个模板布局。比如,登录页是一种模板,登录后是一种模板。如果应用更加复杂,这时候就体现出来了多模板布局的重要性。实现方式在路由设置中将对应组件页面设置成对应模板的子路由就可以达到效果。router.jsnew router({ routes: [ { path: '/', compontent: () => import('@/layout/default/Index.vue'), children: [ { path: '/'原创 2021-09-10 13:31:38 · 767 阅读 · 0 评论 -
vuex基本使用
作用状态管理安装npm install vuex使用src目录中创建store文件夹,以及其下的index.js文件//index.js文件import Vue from 'vue';import Vuex from 'vuex';import home from './modules/home';Vue.use(Vuex);const store = new Vuex.Store({ // 存放状态 state: { count: 0, array: [1,2,3,原创 2021-09-09 18:06:12 · 75 阅读 · 0 评论 -
vue-router基本使用
安装依赖包npm install vue-router使用vue-routerimport Vue from 'vue';import Router from 'vue-router';Vue.use(Router); // 安装路由功能const router = new Router({ // 创建路由实例 routes: [ { path: '/', // 首页 component: () => import('@/view/Home.vue') },原创 2021-09-08 18:09:18 · 133 阅读 · 0 评论 -
v-model双向绑定原理
介绍数据双向绑定也就是说,模型数据变化更新视图,视图变化更新模型数据。v-model 实现的原理是采用 数据劫持 + 发布者-订阅者模式 实现。监听模型数据变化可以使用Object.defineProperty()。监听视图变化(这里使用input举例),可以使用node.addEventListener()添加input事件。效果图HTML部分<div id="app"> <input type="text" v-model="msg" /></di转载 2021-09-07 22:49:30 · 1769 阅读 · 0 评论