vue
文章平均质量分 54
kangkang_style
活着的感觉挺好,珍惜来之不易的每一天
展开
-
vue 项目中常用的三种数据存储
vue 项目中常用的三种数据存储1. Cookies 存储 介绍: 老技术、指定有效期、不能跨域(浏览器,网站,路径) cookie会跟随http协议发往后台,cookie最好处于服务器环境中使用 只能存文本、大小限制约4K、数量限制约50条 1.1 vue + javascript安装: npm install --save js-cookiemain.js import Cookies from 'js-co...原创 2020-12-23 16:58:33 · 6654 阅读 · 0 评论 -
vue + typescript 引入Vant-UI
安装 vant npm install vant --save1. 全局引入 在 main.ts 中全局引入 import 'vant/lib/vant-css/index.css' Vue.use(Vant)2. 按需引入 两种按需引入方法,都可以实现按照需求引入,推荐第二种 第一种: 步骤一: 在src下定义 plugins 目录,并在其下创建vant.ts文件 在 vant.ts 中按需引入组件 例: import Vue from 'vue'原创 2020-12-11 09:39:17 · 2272 阅读 · 0 评论 -
Vue Typescript @Prop
语法: @Prop(options: (PropOptions | Constructor[] | Constructor) = {}) 参数说明: @Prop装饰器接收一个参数,这个参数可以有三种写法: Constructor 例如String,Number,Boolean等,指定 prop 的类型; Constructor[] 指定 prop 的可选类型; PropOptions 可以使用以下选项:type,default,required,validator。原创 2020-12-04 18:02:05 · 4690 阅读 · 0 评论 -
Vue Typescript @Model
定制prop和event用作双向数据绑定默认情况下, 一个组件上的v-model会: 将 value用作 prop 将 input用作 event 语法: model: {prop?: string, event?: string} <!-- * @Author: your name * @Date: 2020-12-02 17:02:24 * @LastEditTime: 2020-12-04 17:14:08 * @LastEditors: Please set L原创 2020-12-04 17:52:32 · 1657 阅读 · 0 评论 -
Vue Typescript @Watch
语法: @Watch(path: string, options: WatchOptions = {}) 参数说明: path: string类型 被侦听的属性名 options: 类型WatchOptions={},可以包含两个属性 immediate boolean 侦听开始之后是否立即调用该回调函数; deep boolean 被侦听的对象的属性被改变时,是否调用该回调函数;<script lang="ts">import {原创 2020-12-04 17:47:14 · 3641 阅读 · 0 评论 -
Vue Typescript data/method/computed的转变
data 以成员变量的形式存在method 以类的函数形式存在computed 使用 get 标识<!-- * @Author: your name * @Date: 2020-12-02 14:30:50 * @LastEditTime: 2020-12-02 17:00:58 * @LastEditors: Please set LastEditors * @Description: In User Settings Edit * @FilePath: \hello-type.原创 2020-12-04 17:42:52 · 471 阅读 · 0 评论 -
Vue Typescript mixins 混入
首先定义要混淆的类:// @FilePath: \hello-typescript\src\mixins\GreetingWords.jsimport Vue from 'vue'import Component from 'vue-class-component'@Componentexport default class MyMixins extends Vue { // data // 通过混入的方式将属性赋值给其他组件 mixinVal = 'Hello My O原创 2020-12-04 17:31:44 · 775 阅读 · 0 评论 -
Vue Typescript 装饰器@Component
vue-property-decorator 在 vue-class-component 上增强更多的结合 Vue 特性的装饰器, 对 Vue 组件进行了一层封装,让 Vue 组件语法在结合了 TypeScript 语法更加贴近面向对象编程.并提供一个工具函数一个装饰器:语法: @Component(options) 说明: options 中需要配置 decorator 库不支持的属性, 如: components, filters, directives等example:<原创 2020-12-04 17:26:53 · 1540 阅读 · 0 评论 -
vue provide / inject 使用介绍
作用:父子组件跨层级传递数据优势: 解决了组件层级过多时,数据传递麻烦的问题 主要应用场景: 为高阶插件/组件库提供用例,不推荐在应用程序中使用 缺点: 数据追踪困难,不确定数据注入层,以及数据使用层 使用方法: provide: 一个对象,或者是一个返回对象的函数。 对象内包含想要传递的内容,即属性和属性值 注意: 子孙层的provide 会覆盖 父辈 provide中相同key的属性值 inject: 字符串数组,或者一个对象。属性值可以为对象,包原创 2020-12-02 10:56:18 · 304 阅读 · 0 评论 -
vue实现客服会话界面
<!-- * @Author: your name * @Date: 2020-11-19 11:05:47 * @LastEditTime: 2020-11-20 17:51:19 * @LastEditors: Please set LastEditors * @Description: In User Settings Edit * @FilePath: \robotservice\robot-frontEnd-admin\src\views\client.vue-->&l原创 2020-11-20 17:56:55 · 8468 阅读 · 9 评论 -
vue 导入第三方js实例对象
第一步:因为vue是单页面引用,所有要在一开始加载页面的时候将js库给引入进来,无论是本地的文件还是网络文件,都需要引入。vue的单页面入口就在根目录中的index.html中。第二步在配置文件中为引入的第三方js库实例申明代理对象根目录 => build目录 => webpack.base.conf.js中进行声明配置第三步在具体的功能模块中引入并可使用。类似j...原创 2019-12-05 16:24:24 · 1991 阅读 · 0 评论 -
vue 接入web版本百度地图
vue接入web版本百度地图,之前一直有问题存在,无法进行二次搜索,二次路线规划,刚刚看到一位仁兄的博客受到启发,修改完成后功能正常了。以下为自己的源码:<template> <div class="map-container"> <div id="allmap" class="map-container"></div> &...原创 2019-11-14 11:57:39 · 747 阅读 · 2 评论 -
vue 可拖拽table
Element UI下的示例:<template> <div style="width:800px"> <el-table :data="tableData" border row-key="id" align="left"> <el-table-column v-for="(item, in...原创 2019-06-03 14:29:11 · 3691 阅读 · 1 评论 -
vue nextTick
由来: Vue中DOM更新是异步 Vue 实现响应式并不是数据发生变化之后 DOM 立即变化, 而是等同一事件循环中的所有数据变化完成之后,再统一进行视图更新。触发条件: 在同一事件循环中的数据变化后,DOM完成更新,立即执行nextTick(callback)内的回调。注意: 1. 在 created 和 mounted 阶段,如果需要操作渲染后的...原创 2019-04-16 21:42:15 · 338 阅读 · 0 评论 -
vue set的使用
受 ES5 的限制,Vue.js 不能检测到以下响应式界面更新: 1. 数组中某一项的变动 例如: arr: [1,2,3,4] this.arr[0] = 5 2. 数组长度的改变 例如: arr: [1,2,3,4] this...原创 2019-03-26 17:42:15 · 198 阅读 · 0 评论 -
vue项目中app.vue 、main.js和 index.html的关联
1. main.js是入口文件,主要作用是初始化vue实例并使用需要的插件。 2. App.vue是主组件,所有页面都是在App.vue下进行切换的。 3. main.js中的根实例会挂载到index.html中的<div id="app"> 4. index.html文件入口 5. src放置组件和入口文件 6. node_modules为依赖...原创 2019-03-21 14:41:58 · 1762 阅读 · 0 评论 -
vue transition 过渡动画
vue在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。包括: 1. 在 CSS 过渡和动画中自动应用 class 2. 可以配合使用第三方 CSS 动画库,如 Animate.css 3. 在过渡钩子函数中使用 JavaScript 直接操作 DOM 4. 可以配合使用第三方 JavaScript 动画库,如 Velocity.js当以下情形下...原创 2019-03-21 14:40:32 · 6151 阅读 · 0 评论 -
vue moke 数据的使用
开发过程中,一般前台的代码调试是需要后台的接口与数据支持的,在数据流的支持下,才能有效的完成对整个代码的调测。moke数据的产生就是让前端脱离后台,完成代码的调测。在vue项目中,与static目录同级创建moke目录,moke目录中存放moke数据文件,文件已json格式为主,因为多数接口返回的也是json的格式数据。文件名字不重要,可以随意取,例如demo.jsondemo.jso...原创 2018-08-23 13:28:54 · 3860 阅读 · 0 评论 -
vue-cropper 截图插件的使用
安装插件:npm install vue-cropper --save-dev引用:import vueCropper from 'vue-cropper'声明:components: { vueCropper}<vueCropper ref="cropper" :img="option.img" // 裁剪图片的地址 可选值:url 地址 || ba...原创 2018-09-19 18:07:11 · 11882 阅读 · 3 评论 -
vue axios get、post请求
/** * axios的安装 * 本地引入,或者cdn引入 <script src="js/axios.min.js"></script> * 或者npm 安装 npm install axios --save-dev * 引入: import axios from 'axios' * 属性化: Vue.prototyp...原创 2018-11-13 17:24:55 · 387 阅读 · 0 评论 -
vue computed
computed 计算属性1.computed用来监控自己定义的变量, 该变量不在data里面声明,直接在computed里面定义, 然后即可在页面上进行双向数据绑定展示出结果或者用作其他处理。2.computed比较适合对多个变量或者对象进行处理后返回一个结果值, 也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化。 computed的使用场景: 举例...原创 2018-12-20 10:54:43 · 401 阅读 · 0 评论 -
FileReader
FileReader就是html5为我们提供的读取文件的api。它的作用就是把文本流按指定格式读取到缓存,以供js调用。FileReader有五种方法: 1.abort() 该方法可以取消 FileReader 的读取操作,触发之后 readyState 为已完成 2.readAsArrayBuffer() 用于启动读取指定的 Blob 或 F...原创 2018-12-26 17:47:47 · 1220 阅读 · 0 评论 -
vue filters 过滤器
过滤器Vue.js允许自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方: 双花括号插值和v-bind表达式。 过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号指示:格式:<!-- 在双花括号中 -->{{ message | capitalize }}<!-- 在 `v-bind` 中 --><...原创 2018-12-21 20:22:21 · 316 阅读 · 0 评论 -
vue 引入依赖的方法
1.网络引用 1.1 在vue的入口页面index.html中引入网络文件 例如: <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script> 1.2 在根目录下的build/webpack.ba...原创 2018-12-28 14:30:04 · 6313 阅读 · 0 评论 -
vue watch的使用
<template> <div> <input type="text" v-model="text"> </div></template><script>export default { data () { return { text: '', ob原创 2018-12-18 18:01:21 · 1187 阅读 · 0 评论 -
vue 使用 Clipboard 复制文本到剪切板
安装:npm install clipboard --save引用:import Clipboard from 'clipboard' 触发复制事件的dom:<p id="copyObj">复制对象</p>// data-clipboard-text 是放置需要复制的数据// 引用文本 :data-clipboard-text="引用的文本"<b...原创 2018-12-25 17:05:35 · 615 阅读 · 0 评论 -
vue 引入公共样式的三种方法
1、在入口js文件main.js中引入,一些公共的样式文件,可以在这里引入。import Vue from 'vue'import App from './App' // 引入App这个组件import router from './router' /* 引入路由配置 */import axios from 'axios'import '../static/css/global.cs...原创 2019-02-18 17:56:19 · 3848 阅读 · 0 评论 -
vue-router push / replace / go 区别
this.$router.push() 说明: 跳转到不同的url,但这个方法会向history栈添加一个记录,点击后退会返回到上一个页面。 实例: this.$router.push({name: 'routerName'})this.$router.replace 说明: 同样是跳转到指定的url,但是这个方法不会向history里面添加新的记录,点击返回,会跳转...原创 2019-03-20 10:57:40 · 1905 阅读 · 0 评论 -
vue-router params / query
$router: 是路由操作对象,只写对象,用来写入例如params,query的属性$route: 路由信息对象,只读对象,用来读取请求路由跳转时传入的属性参数传参可以使用params和query两种方式: 1. params: 使用params传参只能用name来引入路由,即push里面只能是name:’xxxx’,不能是path:’/xxx’, ...原创 2019-03-20 11:07:33 · 280 阅读 · 0 评论 -
vue 组件属性 name的作用
组件是有name属性的,匹配的就是组件的name。和vue-router中配置的name是不同的含义。1.当项目使用keep-alive时,可搭配组件name进行缓存过滤 配置<keep-alive>标签的exclude或者include属性做组件筛选 实例: <div id="app"> <keep-alive exclude="Detail"...原创 2019-03-20 15:19:32 · 6416 阅读 · 0 评论 -
vue keep-alive
keep-alive本身是vue2.0的功能,可以使被包含的组件保留状态,或避免重新渲染标签<keep-alive>具有属性: 1. include: 内容要求字符串或正则表达,只有匹配的组件会被缓存 2.exclude: 内容要求字符串或正则表达式,任何匹配的组件都不会被缓存 实例: // 组件 component export default { ...原创 2019-03-20 15:29:39 · 263 阅读 · 0 评论 -
关于vue中slot的使用
刚开始看了官方的demo,利用注册component在父页面中的子组件标签中插入内容,达到灵活定制的目的。然而,确实不好理解,所以,就vue常用的组件与页面分开写的方式,我写了一个demo举例说明slot的作用。 本人刚接触vue不就,感觉slot类似与一个内容占位符,在子页面中利用slot进行占位,在父页面调用时,使用不同的内容去填充这个占位符,从而达到一个组件,多个页面复...原创 2018-07-02 22:05:35 · 4797 阅读 · 1 评论