![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
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 · 1751 阅读 · 0 评论 -
vue keep-alive
keep-alivekeep-alive是Vue内置的一个组件,可以使被包含的组件保持状态,避免重新渲染。可以使不活动的组件保存到缓存中,而不销毁它,不会触发beforeDestroy()和destroyed()。能让不活动的组件“活着”。重点1.可以使被包含的组件保持状态,避免重新渲染。2.组件不被销毁,不会触发beforeDestroy()和destroyed()3.使用keep-...原创 2020-04-27 08:05:45 · 340 阅读 · 0 评论 -
this.$set小例子
如下图一,现在需要做一个单选框的功能。思路:for循环,将所有变成false,让当前变成true。在创建arr的过程中,先有name这个属性。然后利用for循环给arr的每一项添加一个状态。点击的时候,让arr中每一项的状态都变成false,让当前的状态变为true Document 姓名 操作 {{item.name}}原创 2018-01-22 20:47:33 · 14502 阅读 · 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 · 1080 阅读 · 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 · 1653 阅读 · 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 · 4455 阅读 · 0 评论 -
终于搞明白了路由元信息是个啥了
为什么会有路由元信息这个东西?我们在做网站登录验证的时候,可以使用到beforeEach 钩子函数进行验证操作,如下面代码 ,如果页面path为’/goodsList’,那么就让它跳转到登录页面,实现了验证登录。router.beforeEach((to, from, next) => { if (to.path === '/goodsList') { next('/log原创 2018-01-27 17:31:54 · 15370 阅读 · 10 评论 -
vue 多次循环
需求:有以下一个数组,想将其对象里的信息展示出来,而且还要把对象下面的数组的具体信息也展示出来。v-for可以实现循环,但是能否再下一级进行渲染呢?答案是可以的。list: [{ "scheme_id": "1", "scheme_sn": "2018031416442200001", ...原创 2018-04-19 13:49:30 · 2975 阅读 · 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 · 17309 阅读 · 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 · 4287 阅读 · 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 · 5537 阅读 · 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 · 1121 阅读 · 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 · 628 阅读 · 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 · 1142 阅读 · 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 · 35026 阅读 · 9 评论 -
vue-router 之命名路由
router里的映射配置,其中有一项是name,就是给这个路由取了一个名字{ path: '/mallmanagement/goods/audit/rejected', name: 'GoodsAuditRejected', components: { //这里是命名视图 menubar: Menubar, sidebar:原创 2017-12-04 10:27:58 · 664 阅读 · 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 · 13144 阅读 · 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 · 15903 阅读 · 0 评论 -
安装vue-devtool工具
最近公司在用vue-cli在做项目。下载了一个vue-devtool的谷歌浏览器工具。目前还在摸索中。安装好了后,必须在vue-cli的项目中打开控制台,才能看到vue的调试工具。在别的普通的网页下,工具的图标是灰色的。点上去的时候,也只是显示Vue.js not detected原创 2017-07-06 18:22:13 · 2083 阅读 · 0 评论 -
Vue 命名视图是个啥?
除了命名路由外,还有一种配置路由的方式,叫命名视图。命名试图是个啥?就是在单个路由可以定义多个命名组件上例子路由这样配置const nav = { template: '<div>我是导航栏</div>' }const sidebar = { template: '<div>我是侧边栏</div>' }const router = new VueRouter({ mode: 'histor原创 2017-07-08 11:28:11 · 3893 阅读 · 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 · 397 阅读 · 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 · 8104 阅读 · 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 · 57014 阅读 · 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 · 635 阅读 · 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 · 57981 阅读 · 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 · 4267 阅读 · 0 评论 -
element-ui input框 动态更改placeholder
项目中遇到的实际情况:两个单选框,后面跟一个input框,选择某一个单选框的时候,后面的input框的placeholder会跟着变化。比如操作单选框买家,input框后面placeholder出现“请输入买家账号”;操作“卖家”单选框按钮的时候,placeholder变成“请输入卖家账号”两种方法:方法一写两个input框 根据radio的值来做显示和隐藏,完成placeholder的变化(原创 2017-11-15 16:09:55 · 39684 阅读 · 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 · 25813 阅读 · 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 · 743 阅读 · 0 评论