随笔分类 - vue
摘要：使用 Moment 插件实现时间的转换。 // 定义全局过滤器 开始 // 引入组件 import Moment from 'moment'; // 配置中文转换 Moment.locale('zh-cn'); Vue.filter('convertTime', function(data,form
阅读全文
摘要：1、beforeRouteEnter(to, from, next)：在渲染该组件的对应路由被验证前调用，也就是刚进入路由之前调用。 2、beforeRouteUpdate(to, from, next)：在当前路由改变，但是该组件被复用时调用，也就是当路由参数改变时调用。 3、beforeRout
阅读全文
摘要：created：实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。 使用生命周期的 created() 函数，在组件创建完成后调用该方法。 crea
阅读全文
摘要：需求：通过 vue 中的 $emit 和 $on 方法进行数据的发送和接收（1）、有A，B，C三个组件，同时挂载到入口组件中。（2）、将A组件中的数据传递到C组件，再将B组建中的数据传递到C组件。 1、创建一个 vue 实例，里面包含 vue 的全部方法。 2、创建 A 组件，在 A 组件中通过点击
阅读全文
摘要：1、使用子数组循环输出一堆数据。 2、不依赖子组件状态或临时 DOM 状态（例如：表单输入值）的列表渲染输出。 3、建议 v-for 就加上 key，提升性能，避免 vue 运算， key 就是记录元素与 DOM 间的位置关系。 案例： 1、创建一个 my-com 全局组件，在全局组件中使用 pro
阅读全文
摘要：需求：发送请求前拦截，显示加载页面，响应结束后隐藏加载页面。 一、定义加载页面，在该界面添加一个控制显示与隐藏的命令 v-show。 <div> <div class="spinner" v-show='isShow'> <div class="rect1"></div> <div class="r
阅读全文
摘要：通过请求配置参数里面的 cancelToken 可取消请求，通过CancelToken.source工厂方法创建一个 cancel token。 需求：在文件上传的基础上，加入取消请求和继续上传功能。 一、改造上传功能： 1、在上传功能中的 sendAjax 方法中创建 CancelToken，并调
阅读全文
摘要：一、上传文件。 1、定义一个类型为 file 的 input 标签。 2、在 input 标签中添加名为 changeHandler 的 @change 事件。 3、在 changeHandler 方法内用 this.file 对象接收上传的 File 文件。 changeHandler(e){ /
阅读全文
摘要：异步查询数据，自然是通过 ajax 查询，大家首先想起的肯定是jQuery。但 jQuery 与 MVVM 的思想不吻合，而且 ajax 只是 jQuery 的一小部分。因此不可能为了发起 ajax 请求而去引用这么大的一个库。所以 Vue 官方推荐的 ajax 请求框架叫做：axios。 axio
阅读全文
摘要：meta 是对于路由规则是否需要验证权限的配置。 在 meta 对象中加入一个标识符（auth），例如： 当 meta 对象中的 auth 属性值为true时，表明用户访问该组件时需要登录。 全局守卫：router.beforeEach((to, from, next){ }); 在进入路由之前调用
阅读全文
摘要：一、嵌套路由：可在单页应用框架下开发多页应用。 思想：嵌套路由其实是 router-view 的细化，router-view 第一层中包含一个 router-view，路由children路由。每一个坑挖好都要对应一个单独的组件。 配置路由对象：在嵌套路由中，下级路由的信息配置在上级路由信息对象的
阅读全文
摘要：1、路由信息对象：通过 this.$route 可获取组件的配置路由的对象，只读对象。 2、路由操作对象：通过 this.$router 可获取路由对象，也就是VueRouter，只写对象。 3、路由范式： （1）xxx.html#/user/1。 params 动态路由参数。 匹配规则：需要在路由
阅读全文
摘要：一、基本路由。 1、引入 vue.js。 <script type="text/javascript" src="../vue/vue.js"></script> 2、引入核心的插件 vue-router。 <script type="text/javascript" src="./node_mod
阅读全文
摘要：一、获取 DOM 元素。 1、在 template 中标识元素 ref="xxx"。 2、通过 this.$refs.xxx 获取元素。 3、在组件内通过 this.$el 可以获取整个组件的 DOM。 <div> <button>我是按钮</button> <button>我是另一个按钮</but
阅读全文
摘要：1、window.onhashchange（监听URLhash） ：当一个窗口的 hash（URL中 # 后面的部分） 的改变时就会触发 hashchange 事件。 2、在hashchange 事件中匹配URL，存在则加载对应的 DOM 元素。 代码如下： <a href="#/login">登陆
阅读全文
摘要：在使用vue-router时有时需要使用<keep-alive></keep-alive>来缓存组件状态，这个时候created钩子就不会被重复调用了，如果我们的子组件需要在每次加载的时候进行某些操作，可以使用activated钩子触发。 v-if 指令需要频繁的创建和销毁组件，已达到控制页面中部分
阅读全文
摘要：一、watch：监视单个属性，可做简单监视和深度监视。根据数据的具体结构，决定是否采用深度监视。配置deep:true可以监测对象内部值的改变，做深度监视时使用。 1、简单监视：监视单个属性值的改变。 <div id="app"> <input type="text" name="" v-model
阅读全文
摘要：一、Filter 过滤器，将数据进行添油加醋的操作。 过滤器分为两种： 1、组件内的过滤器（组件内有效） 2、全过滤器（所以组件共享） 使用前首先注册过滤器，然后再使用。 全局过滤器： Vue.filter('过滤器名称', 过滤器 fn(value, arg1)) // 全局过滤器 Vue.fil
阅读全文
摘要：插槽（Slot）是Vue提出来的一个概念，正如名字一样，插槽用于决定将所携带的内容，插入到指定的某个位置，从而使模板分块，具有模块化的特质和更大的重用性。插槽显不显示、怎样显示是由父组件来控制的，而插槽在哪里显示就由子组件来进行控制。 代码如下： <!DOCTYPE html> <html lang
阅读全文
摘要：一、局部组件的使用。 渲染组件-父使用子组件。 1、声子：创建子组件（对象）。 // 局部组件：声子 挂子 用子 var Vheader = { template:` <div class='head'> 我是头部组件 <Vbtn></Vbtn> </div>` }; 2、挂子：在父组件中声明，根属
阅读全文
