组件的基本使用 注册组件 1.注册组件就是利用Vue.component()方法2.可以理解为一个vue文件就是一个组件 模板要求 组件的模板中只能有一个根元素 组件中的data必须是函数 {代码...} 组件的属性和事件 例，一个父组件: {代码...} 上面代码 foo是<my-component>组件内部定义的一个prop属性，baz是父组件的一个data属...

从数字渐变组件(countUp.js)谈第三方JS库的使用 1、组件封装基础实例父组件count-to.vue: {代码...} 子组件count-to.vue: {代码...} 2、组件中使用id值从上面代码可以看出每次编译Vue组件的时候都会生成_uid标识符，并且这个_uid在相同组件的不同实例中都不一样 3、组件中获取DOM在组件上添加ref属性,获取DOM的时候用thi...

1.响应模拟(建议开发版完成后删除Mock，笔者实际开发完没有删除Mock好像是引起了一些ajax的异常情况)src/main.js {代码...} src/mock/index.js {代码...} src/mock/response/user.js {代码...} 2.Mock用法精讲Mock手册

Ajax请求 1.解决跨域问题出现跨域的情况（受浏览器同源策略的影响）: 解决跨域的方法: {代码...} 2) 后端增加header 2、封装axiossrc/config/index.js： {代码...} src/lib/axios.js： {代码...} src/api/index.js： {代码...} src/api/user.js： {代码...}

1.插件因为vuex是存在内存中的，所以刷新页面的时候其中的值就会初始化。为了刷新时不让其改变，可以开发一个插件，把state状态都存在本地中。

1. mutationsmutations也是一个对象，这个对象里面可以放改变state的初始值的方法，具体的用法就是给里面的方法传入参数state或额外的参数,然后利用vue的双向数据驱动进行值的改变，同样的定义好之后也把这个mutations扔进Vuex.Store里面，如下：

2.获取state：说了上面的前奏之后，接下来就是纳入正题了，就是开篇说的state的玩法。回到store文件的index.js里面，我们先声明一个state变量，并赋值一个空对象给它，里面随便定义两个初始属性值；然后再在实例化的Vuex.Store里面传入一个空对象，并把刚声明的变量state仍里面：

Bus相当于广播和分发事件的方法。vue如何实现非父子组件间的通信，可以通过实例一个vue实例Bus作为媒介，要相互通信的兄弟组件之中，都引入Bus，然后通过分别调用Bus事件触发和监听来实现通信和参数传递。

1. 路由组件传参页面组件可以通过props接收url参数布尔模式{ {代码...} }对象模式{ {代码...} }函数模式{ {代码...} } 2. HTML5 History模式vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,例: loccalhost:8080/#/,#就是hash模式 如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式...

router-link 和 router-view组件 {代码...} 2.路由配置 {代码...} {代码...} {代码...} {代码...} 3.JS操作路由 {代码...} 4.重定向和别名 {代码...} 完整的导航解析流程 {代码...}

3.0 新加入了 TypeScript 以及 PWA 的支持 部分命令发生了变化： 下载安装 npm install -g @vue/cli 删除了vue list 创建项目 vue create 启动项目 npm run serve 默认项目目录结构也发生了变化： 移除了配置文件目录，config 和 build 文件夹 移除了 static 文件夹，新增 public 文件夹，并且 index.html 移动到 public...

封装文件目录组件 操作目录 多个属性v-model替代方案 增加钩子函数 最终呈现的效果如图: 父组件folder-tree.vue: {代码...} 子组件folder-tree.vue： {代码...} util.js中的expandSpecifiedFolder函数: {代码...}

Tree组件使用 iview树形控件要求的数据格式 {代码...} 扁平数据树树状化 扁平数据树: 通过接口请求到文件夹的数组 folderList 和文件的数组 fileList folderList：[{name: "smifqwe", creat_time: "1973-07-26 06:27:55", folder_id: 0, id: 1},{name: "gkcn", creat_time: "2001-03-27 00:42:02", folder_id: 0, id: 2}...

1、JSX进阶 {代码...} 2、单个单元格编辑表格 table.vue 表格父组件 {代码...} edit-table.vue 子组件 {代码...} 3、多单元格编辑表格 edit-table-mul.vue {代码...}

可收缩多级菜单的实现 1、递归组件实战 通过v-show来切换re-menu和icon组件的显示隐藏,re-menu组件上几个课时有事例 {代码...} 2、v-if和v-show对比 **v-if 是“真正的”条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。 v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——...

vue-cli3.0中使用iview 1.全局引入 在项目入口文件./main.js中需要配置如下： {代码...} 2.按需引入 首先你需要安装一个babel插件: npm install babel-plugin-import --save-dev 在vue-cli3生成的项目中，babel的配置文件是babel.config.js，默认配置是这样的： {代码...} 你需要将刚刚安装的插件添加进去，添加后的内容...

(1)路由守卫判断有没有token,没有的话进入login页(2)如果有的话,重新请求服务器获取token,放入cookies,进入页面(3)login登录成功后,返回token放入cookies(4)每次请求的时候headers里加入token验证

一个子组件就相当于一个父组件的html标签父组件: menu-page.vue子组件: a-menu.vue、a-menu-item.vue、a-submenu.vue还有个暴露子组件的index.js

<slot><slot>默认插槽： 在父组件两个标签中间写的东西都会在子组件中<slot></slot>插槽显示。