Model球

Vue RouterVue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：嵌套的路由/视图表模块化的、基于组件的路由配置路由参数、查询、通配符基于 Vue.js 过渡系统的视图过渡效果细粒度的导航控制带有自动激活的 CSS class 的链接HTML5 历史模式或 hash 模式，在 IE9 中自动...

actionaction起到通过派发指令给mutation修改state的数据状态的作用。来看例子：import { mapState,mapGetters,mapMutations,mapActions} from 'vuex'export default { computed:{ ...mapState([ 'lesson','room']), }, methods:{...

mutation更改 Vuex 的 store 中的状态的唯一方法是提交 mutation,所以mutation就是用来修改store状态集中state的数据的，我们需要一个小示例，来看他是如何实现。首先先定义mutations.js //放的commit提交的mutation change_erom(state,payload){//1.数据，2.传过来的数据 state.room ...

gettergetter也是vuex 的一个属性，它类似于vue中的计算属性（computed）,它的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。下面通过例子来看一下：先定义下公共的getters.js再定义分组件状态集的js，我这里命名为user.jsgetter属性是可以直接接收state状态集中的所有属性的，所以可以自行进行参数的获取//应...

vuex及多组件状态集参数请求vuex是vue的状态管理模式，用来管理大型项目中的状态，一些小型项目是不建议使用的，比如一个项目就登陆信息，十个页面建议还是不要使用vuex 的。话不多说，下面来看下vuex：一般状态集安装成功后，会自动生成store目录，以及下面的index.js这里面的index.js一般用来放我们仓库中所需要的一些数据：这里，我将每个状态，都新建了一个文件，重新生成...

Vue的生命周期本篇文章，主要记录vue的每个生命周期一般用来做什么。beforeCreate 实例初始化后 进行数据观及事件的配置created 实例已经创建完成 响应式属性和方法已经配置完成（会在这个阶段进行数据资源的请求）beforeMount 挂载前 确定是否设置el选项（vm.$mount）,是否有template若有则渲染template 若有则渲...

Axios拦截器讨论Axios拦截器之前，插入一个比较方便的功能介绍，如下：//这是指定接口访问的前缀路径Axios.defaults.baseURL = 'https://www.xxx.com/train-oa/';//下面为转化方法格式的，正常的请求，都是要加header的。 Axios.defaults.headers.post['Content-Type'] = 'appli...

Axios的post请求本篇讲解一下axios的post请求，安装的话，可查看上篇文章。下面看下基本写法：this.$axios.post(url,{user:"mrwang",id:"1"}).then(res =>{console.log(res)}).catch(error =>{console.log(error)})当你如上写法以后，你会发现，接口请求失...

Axios的“get”请求axios在vue开发中，是一个很常用的点，本篇文章记录一下，axios的使用，与一些新手使用可能出现的问题。首先我们需要通过命令行来安装，通过命令行输入如下命令：npm install axios --save安装好以后，需要先获取axios对象，在main.js直接引入//引入import Axios from 'axios'//获取对象//这里注意...

对象语法class与style的绑定主要用到 v-bind 指令，也可简写成“：”。vue的class和style绑定的方法很多，可以通过单个变量，对象，数组，计算属性，三木运算来绑定class和style。介绍几种常用方法.他的绑定是非常灵活的，只要，想的通基本都可以实现。详细了解可以，去官网进行学习查看。<!--HTML部分--><!--第一种办法-->&...

计算属性computed:和methods是同级关系，是个对象，可以放好多方法。<li v-for="n in evenNumbers">{{ n }}</li>data: { numbers: [ 1, 2, 3, 4, 5 ]},computed: { evenNumbers: function () { return this.numbers...

数组更新检测注意：data中的数据改变，会引起视图的改变变异方法：引起视图更新替换数组：不会引起视图更新（取决于哪些方法更改原数组，哪些不更改原数组）Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新。这些方法如下：push()pop()shift()unshift()splice()sort()reverse()concat： 方法就不会引起视图更新显示...

Vue事件监听一、事件监听指令注意事项：1、v-on: 可简写成@2、this：指向当前组件，包含当前data定义的东西。3、事件也可以传递参数可用data接收。4、如果有参数可通过$event传递event对象示例：通过事件绑定，动态展示标签的显示和隐藏 <button v-on:click="handlerClick">按钮</button> &lt...

Vue列表渲染v-for :必须是一组数组。v-for="(item,index) in user"第一个值代表当前值：随便命名第一个值代表下标志：index：key: 用于快速构建虚拟DOM,不写会警告报错具体实现可参照一下代码：<template> <div class="hello"> <ul> &...

Vue条件渲染template：承载标签不渲染组件。v-if: 根据条件进行渲染，如下方代码，只有show这个数据为ture的时候当前标签才会展示v-else:必须同一个条件下，v-if 展示的时候，v-else的标签就隐藏，反之亦然。v-show:如果绑定值为true显示，为false则不显示v-if与v-show的区别：v-if：是条件渲染。每次都重新渲染。v-show:操控c...

创建Vue实例打开Src目录 ----main.js入口文件import Vue from ‘vue’import App from ‘./App’一个组件的引入分为三个部分：1.引入 2.加载视图 3.创建组件名字new Vue({el: ‘#app’, //绑定根视图（index.html）template: ‘’ //components: { App },...

Vue项目目录结构index.html (项目根视图)package.json （配置文件）.postcssrc.js （postcss配置文件）.gitignore （git上传的时候忽略上传文件设置列表）.editorconfig （编码配置文件）static（静态文件目录）服务器启动后，可以直接访问static下的文件。src（源码文件目录）m...

Vue环境搭建npm 进行环境搭建（npm请自行安装）vue环境是基于webpack打开命令行工具运行一下命令：1.全局安装 vue-clinpm install -g vue-cli (回车)2.初始化一个项目文件vue init webpack my-project (回车)这是项目名称（尽量不要写中文或者大写过长都不行）project description ...

Vue页面主要布局组件Vue中所有的配置文件修改以后，全部需要重启#项目初始化vue init webpack name()1.安装vue-cilnpm install -a vue cli2.初始化项目vue init webpack my-project3.进入项目cd my-project4.安装依赖npm install5.启动项目npm run dev#项...