Vue.js
关注
分享
扫一扫
cofecode
这个作者很懒，什么都没留下…
展开
-
前端导出word实现方法
前端导出word方法npm i docxtemplater jszip-utils file-saver jszip@2.6.1import Docxtemplater from 'docxtemplater'import JSZipUtils from 'jszip-utils'import { saveAs } from 'file-saver'import JSZip from 'jszip'wordData: any = { data: [ {原创 2021-05-20 15:06:17 · 1808 阅读 · 0 评论 -
vue keep-alive
keep-alivekeep-alive是Vue内置的一个组件，可以使被包含的组件保持状态，避免重新渲染。可以使不活动的组件保存到缓存中，而不销毁它，不会触发beforeDestroy()和destroyed()。能让不活动的组件“活着”。重点1.可以使被包含的组件保持状态，避免重新渲染。2.组件不被销毁，不会触发beforeDestroy()和destroyed()3.使用keep-...原创 2020-04-27 08:05:45 · 380 阅读 · 0 评论 -
this.$set小例子
如下图一，现在需要做一个单选框的功能。思路：for循环，将所有变成false，让当前变成true。在创建arr的过程中，先有name这个属性。然后利用for循环给arr的每一项添加一个状态。点击的时候，让arr中每一项的状态都变成false,让当前的状态变为true Document 姓名 操作 {{item.name}}原创 2018-01-22 20:47:33 · 14558 阅读 · 0 评论 -
vue 实现选中和全选 小功能
Document table, td, th{ border:1px solid #ebebeb; border-collapse:collapse; text-align: center; } table { width:500px; } 全选 na原创 2018-01-25 11:35:22 · 1109 阅读 · 0 评论 -
vue 选中和全选 两个计算属性实现
还是选中和全选功能，用两个计算属性来实现，别人的代码，思维确实不一样。学习了 Document table, td, th{ border:1px solid #ebebeb; border-collapse:collapse; text-align: center; } table { width:500px; }原创 2018-01-25 18:07:07 · 1685 阅读 · 0 评论 -
vue 计算属性 get 和set
计算属性是什么：vue文档里是这么说的，模板中绑定太多的逻辑会让模板过重且难以维护。换句话说，就是可以自己设置值（b值），这个值和data下定义的值（a值）存在某些关系，b的值是基于a的值，通过某些逻辑产生出来的值，b值可以直接拿到template里去用。当a的值发生变化的时候，b的值会跟着变化。就是计算属性中的默认值get。那set又是什么鬼？b的值是基于a的变化而变化的，那么直接修改b原创 2018-01-25 19:07:04 · 4511 阅读 · 0 评论 -
终于搞明白了路由元信息是个啥了
为什么会有路由元信息这个东西？我们在做网站登录验证的时候，可以使用到beforeEach 钩子函数进行验证操作，如下面代码 ，如果页面path为’/goodsList’，那么就让它跳转到登录页面，实现了验证登录。router.beforeEach((to, from, next) => { if (to.path === '/goodsList') { next('/log原创 2018-01-27 17:31:54 · 15539 阅读 · 10 评论 -
vue 多次循环
需求：有以下一个数组，想将其对象里的信息展示出来，而且还要把对象下面的数组的具体信息也展示出来。v-for可以实现循环，但是能否再下一级进行渲染呢？答案是可以的。list: [{ "scheme_id": "1", "scheme_sn": "2018031416442200001", ...原创 2018-04-19 13:49:30 · 3022 阅读 · 1 评论 -
从 router-link linkActiveClass 到自己动态配置active class
每次路由切换成功进入激活状态在点击导航栏的时候，让被点击的那一个有背景色，其他的没有背景色？如何做？在路由里面设置const router = new VueRouter({ routes, linkActiveClass: 'is-active'});linkActiveClass: 'is-active',然后在css里面设置.is-a...原创 2018-06-12 11:39:51 · 17411 阅读 · 1 评论 -
vue 国际化 vue-i18n 双语言 语言包
1.安装vue-i18n2.在main.js里面引用import VueI18n from 'vue-i18n'Vue.use(VueI18n)3.实例化i18n，并配置默认的语言模式，以及对应的文件（也是在main.js里使用）如下。cn 中文包对应的是cn.jsen 对应的是英文 en.js 包const i18n = new VueI18n({ //定义...原创 2018-06-06 10:30:34 · 4367 阅读 · 8 评论 -
vue路由跳转 定时器 没有清掉 ？
项目中碰到的问题。组件A 页面一加载，执行一个定时器，往控制台打印1created:function() { this.t = window.setInterval(this.cons,1000)},methods:{ cons () { console.log(1) }}组件A能跳转到组件B，使用router-link 完成跳转。此时在B组件页面...原创 2018-06-14 19:01:41 · 5613 阅读 · 1 评论 -
接口获取到的数据也需是多语言
多语言需求，调用接口获取到的数据也需是多语言。比如最开始“所在地”这个字段city，为了做多语言，得添加一个字段city_en数据库中，有city 深圳 city_en shenzhen前端在axios全局设置里面，加header头。key为lang，value值是cn/en，这个取自sessionStorageaxios.defaults.headers.commo...原创 2018-09-13 15:24:39 · 1172 阅读 · 0 评论 -
Vue React 各种大乱炖 对比
/VueReact单文件直接引入vue.jsreact.js + react-dom.js + babel.js虚拟DOM√√虚拟DOM区域（挂载区域）el 参数值ReactDOM.render() 第二个参数值数据驱动√√Model数据源初始化，定义在data:{} 或 data () { return {} }里在state里 ...原创 2019-08-13 21:26:01 · 689 阅读 · 0 评论 -
vue自定义指令
vue中的指令就是v-on v-bind v-show等等，那么自定义指令是什么呢？ 自己定义的指令就是自定义指令。语法：Vue.directive(id, definition)这里可以参考vue中的指令 <h1 v-if="yes">Yes</h1> 其中，if就是指令ID，yes是expressionVue.directive()传入接受两个参数，id是指指令ID，definition原创 2018-01-02 17:05:27 · 1168 阅读 · 0 评论 -
vue 事件中的 .native
.native是什么？.native - 监听组件根元素的原生事件。 主要是给自定义的组件添加原生事件。例子 给普通的标签加事件，然后加native是无效的<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div原创 2017-12-25 10:35:32 · 35107 阅读 · 9 评论 -
vue-router 之命名路由
router里的映射配置，其中有一项是name，就是给这个路由取了一个名字{ path: '/mallmanagement/goods/audit/rejected', name: 'GoodsAuditRejected', components: { //这里是命名视图 menubar: Menubar, sidebar:原创 2017-12-04 10:27:58 · 694 阅读 · 0 评论 -
Vue中$parent 和$children的使用
$parent 该组件实例的父级组件实例$children 该组件实例的子组件实例上代码html部分<div id='box'> <parent ref='pa'></parent></div> script部分Vue.component('parent',{ template:`<div><h1>父组件</h1><child></child></div>`,原创 2017-07-07 11:18:31 · 13192 阅读 · 0 评论 -
Vue 创建组件的两种方法
创建组件方法var child=Vue.extend({})var parent=Vue.extend({})Vue.extend() 全局方法 生成构造器，创建子类使用基础 Vue 构造器，创建一个“子类”。这样写非常繁琐。于是vue进行了简化使用Vue.component()直接创建和注册组件：Vue.component(id,options) 全局方法 用来注册全局组件id 是strin原创 2017-07-07 10:30:47 · 15981 阅读 · 0 评论 -
安装vue-devtool工具
最近公司在用vue-cli在做项目。下载了一个vue-devtool的谷歌浏览器工具。目前还在摸索中。安装好了后，必须在vue-cli的项目中打开控制台，才能看到vue的调试工具。在别的普通的网页下，工具的图标是灰色的。点上去的时候，也只是显示Vue.js not detected原创 2017-07-06 18:22:13 · 2107 阅读 · 0 评论 -
Vue 命名视图是个啥？
除了命名路由外，还有一种配置路由的方式，叫命名视图。命名试图是个啥？就是在单个路由可以定义多个命名组件上例子路由这样配置const nav = { template: '<div>我是导航栏</div>' }const sidebar = { template: '<div>我是侧边栏</div>' }const router = new VueRouter({ mode: 'histor原创 2017-07-08 11:28:11 · 3956 阅读 · 0 评论 -
vue-resource 踩坑记
在项目工作中，用vue-resource去请求后端数据。请求方法为POST请求。用this.$http.post去请求，请示我跨域了，然后我用vue-resource的this.$http.jsonp去请求。但是vue-resource的jsonp方法只能是GET 的方式去请求。如何做到跨域的POST请求？试过一些方法，未果，记录一下。原创 2017-07-30 16:38:05 · 412 阅读 · 0 评论 -
vue项目中this指向
实际项目过程中。在data里面定义好了 phone的值。在发送ajax请求后,this.phone的值便拿不到了。这里我axios去请求。then的回调是用es5的写法写的。发送请求前，this.phone还有值，发送请求后this.phone的值就有问题了。纠其原因是es5 的写法，this的值发生了变化。指向undefined。而这里我们的this 需要指向vue实例这里需要再继续补充箭头函数原创 2017-08-02 08:19:27 · 8135 阅读 · 0 评论 -
element-ui中的select下拉列表 设置默认值
element-ui中的select下拉列表如何设置默认值？在element-ui的运用中，涉及到了select下拉列表。项目中需要将select的默认值给展示出来那如何修改呢？上element-ui中的代码片段<template> <el-select v-model="value" placeholder="请选择"> <el-option v-for="item in原创 2017-09-14 14:11:43 · 57187 阅读 · 6 评论 -
前端 下载导出功能
前端做下载导出功能也就是发送一个接口。去请求后端返回来的文件地址。 this.$axios.post(SITEURL.DOWNLOAD__FILE).then(response => { if (response.data.success) { window.location.href = response.data.data //请求成功后，打开这个地址原创 2017-10-30 10:14:12 · 655 阅读 · 0 评论 -
vue v-for 循环对象
vue也是可以循环对象的。例子如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="app"> <p v-for="(val, key, index) in list">{{key}}--{原创 2017-11-09 19:16:52 · 59952 阅读 · 0 评论 -
axios 请求并发
fn1(){ return axios.get('/fn1') }fn2() { return axios.get('/fn2')}axios.all([ fn1(); fn2();]).then(axios.spread((res1, res2) => { console.log(res1); console.log(res2);}))原创 2017-11-01 11:53:31 · 4310 阅读 · 0 评论 -
element-ui input框 动态更改placeholder
项目中遇到的实际情况：两个单选框，后面跟一个input框，选择某一个单选框的时候，后面的input框的placeholder会跟着变化。比如操作单选框买家，input框后面placeholder出现“请输入买家账号”；操作“卖家”单选框按钮的时候，placeholder变成“请输入卖家账号”两种方法：方法一写两个input框 根据radio的值来做显示和隐藏，完成placeholder的变化（原创 2017-11-15 16:09:55 · 40198 阅读 · 3 评论 -
vue {{}} 大胡子表达式里面可以写些什么
vue {{}}里面写js表达式可以写些什么？主要有1.{{num + 1}} 一元运算府data:{ num:5}2.{{status ? ‘succeed’ : ‘failed’}} 三元表达式data:{ status: true}3.{{changeTime()}} 运行函数changeTime(){ return this.value.replace(/\d/g原创 2017-11-29 15:49:01 · 25944 阅读 · 4 评论 -
Vue中父组件向子组件通信
props组件实例的作用域是孤立的。子组件的模板中是无法直接调用父组件的数据。可以使用props将父组件的数据传给子组件。子组件在接受数据时要显示声明props看下面的例子<div id="app"> <panda here='China'></panda></div><script src="https://unpkg.com/vue/dist/vue.js"></script><sc原创 2017-07-10 18:54:32 · 766 阅读 · 0 评论