随笔分类 - vue
关于vue的一切
摘要：需求说明：使用v-html展示的效果为有格式的样式，需要做成不换行并超出显示...，结果如下图： html代码： <p v-html="$options.filters.ellipsis(item.title)"></p> js代码： filters: { //当渲染的文字超出9字后显示省略号 el
阅读全文
摘要：加载渲染过程 父beforeCreate > 父created > 父beforeMount > 子beforeCreate > 子created > 子beforeMount > 子mounted > 父mounted 子组件更新过程 父beforeUpdate > 子beforeUpdate >
阅读全文
摘要：此篇笔记记录的是vue-quill-edter的进阶版，如果还没有安装过quill需要查看 https://www.cnblogs.com/meiyanstar/p/12909755.html（vue-quill-editer安装初级版） 实现功能步骤： 设置工具栏展示的工具选项 工具栏功能提示 事
阅读全文
摘要：EventBus的简介 eventBus主要运用于兄弟组件通信 今天主要介绍eventBus实现组件通信，这种方法主要是非父子组件，兄弟之间的组件通信。 EventBus 又称为事件总线。在Vue中可以使用 EventBus 来作为沟通桥梁的概念，就像是所有组件共用相同的事件中心，可以向该中心注册发
阅读全文
摘要：简介： Draggable为基于Sortable.js的vue组件，用以实现拖拽功能。 特性 支持触摸设备 支持拖拽和选择文本 支持智能滚动 支持不同列表之间的拖拽 不以jQuery为基础 和视图模型同步刷新 和vue2的国度动画兼容 支持撤销操作 当需要完全控制时，可以抛出所有变化 可以和现有的U
阅读全文
摘要：解决方法： 使用 directives自定义vue标签v-positive-int来监听输入框的值 <input v-positive-int type="text" /> export default{ name: 'Txt', data(){ return {} }, computed: { }
阅读全文
摘要：1.vue同个css文件 <div :class="isMobile ? 'backgroudImgMobile' : 'backgroudImgPc'"> data() { return { isMobile: false }; }, mounted() { this.getScreen(); }
阅读全文
摘要：此文问了提高代码阅读性、降低代码维护成本 JS部分 和渲染有关的数据 vue中data的数据默认便会进行双向数据绑定，若是将大量的和渲染无关的数据直接放置在data中，将会浪费双向数据绑定时所消耗的性能，将这些和渲染无关的数据进行抽离并配合Object.freeze进行处理。 处理方法：table中
阅读全文
摘要：一、watch监听路由的方法 通过watch监听，当路由发生变化的时候执行。 方法一： watch:{ $router(to,from){ console.log(to.path) } } 方法二： watch: { $route: { handler: function (val, oldVal)
阅读全文
摘要：一、使用 watch: { mydata(val, newval) { console.log(val) console.log(newval) } } 二、属性详解 immediate handler deep （1）immediate和handler watch特点：当值第一次绑定时，不会执行监
阅读全文
摘要：1、watch watch的使用方法 （1）简单监听 （2）深度监听 （3）监听数据变化并执行某个方法 （1）简单监听 watch: { mydata(val, newval) { console.log(val) console.log(newval) } } （2）深度监听 watch: { m
阅读全文
摘要：一、传值 1、父组件 传值给 子组件 父组件中： //在父组件中引入子组件，并传入子组件内需要的值 <template> <div> <div>父组件</div> <!--(3)--> <child :message="parentMsg"></child> </div> </template> <
阅读全文
摘要：结合Vue.js官方文档 Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示： <!-- 在双花括号中 --> {
阅读全文
摘要：请求后端接口 一、点击链接。 不需要token，也不需要传给后台数据时 （1）window.location.href = ‘url’ （2）<a href='url' download=''></a> 二、需要携带请求头token 这种方式就是后台将要导出的文件以文件流的方式返回给前端，前端通过b
阅读全文
摘要：一、命名路由 由于router-link会被渲染会a标签，所以在router-link标签中添加target=‘_blank’即可在新窗口打开页面。 <router-link to='/home' target='_blank'></router-link> 二、编程式导航跳转 使用路由对象的res
阅读全文
摘要：1、安装 npm install axios -S npm install qs -S 2、在main.js中导入 // 引入axios，并加到原型链中 import axios from 'axios'; Vue.prototype.$axios = axios; import QS from '
阅读全文
摘要：一、axiox介绍 1、Axios特性 支持Promise API 拦截请求和响应 转换请求数据和响应数据 取消请求 自动转换JSON数据 客户端支持防御XSRF 2、Axios浏览器支持 二、基础用法（get、post、put等请求方法） axios的请求方法：get、post、put、patch
阅读全文
摘要：1.js事件的三阶段 捕获：事件由页面元素接受，逐级向下，到具体的元素 目标：具体的元素本身 冒泡：跟捕获相反，具体元素本身，逐级向上，到页面元素 IE5.5：div body document IE6.0: div body html document Mozilla:div body html
阅读全文
摘要：VueRouter的整合的步骤是固定的 首先得先安装vue-router 使用npm i vue-router 1. 导入vue-router 2. 使用Vue.use()方法来注册路由 3. 导入单页面组件 4. 写路由规则 5. 实例化路由对象 6. 挂载到顶级Vue的实例上
阅读全文
摘要：效果： 过程： 1.下载identify插件，命令：npm i identify 2.在你的components目录新建一个vue组件，我的命名是：sIdentify.vue 3.在组件内把下面的代码copy过去 <template> <div class="s-canvas"> <canvas i
阅读全文
