Vue
丫呀nice
这个作者很懒,什么都没留下…
展开
-
后端传数字或字符串,前端显示汉字
后端传数字或字符串,前端显示汉字当表格通过遍历dataList方式写出,没有将每一列通过标签单独列出时,可以采用此方法注:若是每一列通过标签单独列出,可直接通过映射方法解决后端传来数据data{ rows:[ 0:{userid:'01' ,userName:'001'} 1:{userid:'02' ,userName:'002'} 2:{userid:'03' ,userName:'003'} ]}前端需要将userName的001对应成中文//this.dataList原创 2021-12-29 16:58:40 · 2362 阅读 · 0 评论 -
一级路由配置
设置路径 path componentimport路由留坑实现原创 2021-08-11 10:59:16 · 231 阅读 · 0 评论 -
computed、methods和watch的区别
一、computed 和 methodscomputed是计算属性,methods是方法,都可以实现对 data 中的数据加工后再输出。不同的是 computed 计算属性是基于它们的依赖进行缓存的。计算属性 computed 只有在它的相关依赖发生改变时才会重新求值。这就意味着只要data 中的数据 message 还没有发生改变,多次访问 reversedMessage(对message 进行加工的处理函数) 计算属性会立即返回之前的计算结果,而不必再次执行函数。而对于method ,只要发生重新渲转载 2020-10-29 21:28:51 · 2541 阅读 · 0 评论 -
Vue双向绑定
实现mvvm的双向绑定,是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。就必须要实现以下几点:1、实现一个数据监听器Observer,能够对数据对象的所有属性进行监听,如有变动可拿到最新值并通知订阅者2、实现一个指令解析器Compile,对每个元素节点的指令进行扫描和解析,根据指令模板替换数据,以及绑定相应的更新函数3、实现一个Watcher,作为连接Observ转载 2020-08-14 23:50:02 · 196 阅读 · 0 评论 -
vue里data为什么是函数不是对象,写对象有什么影响
当data定义为对象后,这就表示所有的组件实例共用了一份data数据,因此,无论在哪个组件实例中修改了data,都会影响到所有的组件实例。组件中的data写成一个函数,数据以函数返回值形式定义,这样每复用一次组件,就会返回一份新的data,类似于给每个组件实例创建一个私有的数据空间,让各个组件实例维护各自的数据。而单纯的写成对象形式,就使得所有组件实例共用了一份data,就会造成一个变了全都会变的结果。...转载 2020-08-14 22:42:37 · 618 阅读 · 0 评论 -
Promise对象
Promise 是一个对象,从它可以获取异步操作的消息。Promise 提供统一的 API,各种异步操作都可以用同样的方法进行处理。Promise对象有以下两个特点:(1)对象的状态不受外界影响。Promise对象代表一个异步操作,有三种状态:pending(进行中)、fulfilled(已成功)和rejected(已失败)。只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。(2)一旦状态改变,就不会再变,任何时候都可以得到这个结果。Promise 对象的状态改变,只有两种转载 2020-07-02 20:30:58 · 137 阅读 · 0 评论 -
异步模式“编程
参考链接http://www.ruanyifeng.com/blog/2012/12/asynchronous%EF%BC%BFjavascript.html一、回调函数回调函数:函数嵌套,将同步操作变为异步操作。缺点:不利于代码的阅读和维护f1();f2();分开执行时f2需要等待f1,但如果f1很耗时,就可以用回调函数。我们把同步操作变成了异步操作,f1不会堵塞程序运行,相当于先执行程序的主要逻辑,将耗时的操作推迟执行。函数嵌套:f1(f2)二、事件监听采用事件驱动模式。绑定事件,触转载 2020-06-30 20:54:58 · 129 阅读 · 0 评论 -
tab页切换 只渲染一页的数据
现象:每页数据都能拿到,只渲染一页,并且另一页的表格height:0;max-height:0; 修改这两个参数之后表格显示。原因:切换之后数据没有渲染因为tab切换是通过display:none的形式,其他页的表格可能就因为这个原因没有高度了解决办法:1.首先需要设置切换之后渲染,对tab的点击切换事件加入渲染handleClick(tab, event) { this.$refs["table"+ tab.name].getShowData(); }2.这时表格原创 2020-06-19 10:34:06 · 903 阅读 · 0 评论 -
Duplicate keys detected: typerow4.
可能是渲染表格时key值重复例如: { key: "aaa", title: "张三", align: "center", minWidth: 80 }, { key: "aaa", title: "李四", align: "center", minWidth: 80 },原创 2020-06-18 15:43:12 · 231 阅读 · 0 评论 -
vue 监听键盘回车事件 @keyup.enter || @keyup.enter.native
vue运行为v-on在监听键盘事件时,添加了特殊的键盘修饰符:<input v-on:keyup.13="submit">vue还非常贴心地给出了常用按键的别名,这样就不必去记keyCode上面代码,还可以在这样写:<input v-on:keyup.enter="submit"><input @keyup.enter="submit">注意:如果用了封装组件的话,比如element,这个时候使用按键修饰符需要加上.native比如:<el转载 2020-06-17 13:56:44 · 774 阅读 · 0 评论 -
vue中v-on和v-bind的区别
v-bind指令用于设置HTML属性:v-bind:href 缩写为 :href<!-- 完整语法 --><a v-bind:href="url">123</a><!-- 缩写 --><a :href="url">123</a>v-on 指令用于绑定HTML事件 :v-on:click 缩写为 @click<!-- 完整语法 --><a v-on:click="doSomething">123&转载 2020-06-17 13:51:10 · 1621 阅读 · 0 评论 -
Vue.js中 watch 的高级用法
参考链接:https://blog.csdn.net/wandoumm/article/details/80259908假设有如下代码:<div> <p>FullName: {{fullName}}</p> <p>FirstName: <input type="text" v-model="firstName"></p></div> new Vue({ el: '#root', da转载 2020-06-10 15:03:01 · 185 阅读 · 1 评论 -
vue中$refs的用法及作用详解
一般来讲,获取DOM元素,需**document.querySelector(".input1")**获取这个dom节点,然后在获取input1的值。但是用ref绑定之后,我们就不需要在获取dom节点了,直接在上面的input上绑定input1,然后$refs里面调用就行。然后在javascript里面这样调用:this.$refs.input1 这样就可以减少获取dom节点的消耗了<div id="app"> <input type="text" ref="input.转载 2020-06-10 09:45:59 · 186 阅读 · 0 评论 -
看不懂参数,代码里面没有
moment(param.row.createTime).format("YYYY-MM-DD") === "Invalid date" ? "-" : moment(param.row.createTime).format("YYYY-MM-DD")Invalid date是哪里来的解决办法:先在代码里面搜索 没有的话利用console.log打印moment(param.row原创 2020-06-09 18:41:17 · 127 阅读 · 0 评论 -
关于表格:在同一页面下的切换页面(不用跳转路由)
问题:在同一页面下的切换页面(不用跳转路由)解决办法:通过v-if和v-else showDetail的布尔值来解决 ,默认布尔值为true,展现表格,如果点击到英文表明,布尔值为false,切换回细节展现<div class="base-table-content" v-if="showDetail=='true'"> 表内的内容 </div> <div v-else style="height: 100%;"> <grid-原创 2020-06-09 18:38:17 · 302 阅读 · 0 评论 -
关于表格:接口返回的表格数据加上黄色圆点渲染到页面,并且根据不同的数据渲染不同的颜色
问题二:接口返回的表格数据加上黄色圆点渲染到页面,并且根据不同的数据渲染不同的颜色解决办法:render: (h, param) => { return h("span", [ h( "span", { class: `release ${param.row.tableStatus + "-color"}`原创 2020-06-09 18:36:04 · 301 阅读 · 0 评论 -
关于表格---问题一---接口返回的数据与要展现的数据不一致
问题一:接口返回的数据与要展现的数据不一致解决办法:使用filter通过映射的办法 解决问题filter: { name: "table", useKey: { value: "value", label: "label" }, options: [ { value: "RELEASE",原创 2020-06-09 18:34:33 · 763 阅读 · 0 评论 -
float布局-三个float:right-如何布局
三个框都是float布局 没有按顺序渲染例如:<input id="1" style="float:right;width:250px;"><input id="2" style="float:right;width:250px;"><input id="3" style="float:right;width:250px;">排列方式:都靠右排一行 顺序3 2 1原因:1 2 3都脱离文档流 并且属于同一层级,渲染时从第一个开始,会放到最右边,然后渲染第二原创 2020-06-09 18:31:12 · 4967 阅读 · 0 评论 -
父子组件传值,子组件复用
busiFormManageView.vue //数据表单标准查看父子组件:1.父组件在里 加入:showEdit="showEdit"子组件通过props来引用:直接在export default 里写入 不在生命周期里props:{ showEdit:{ type:Boolean, default:true } },2.父组件里面自己去掉设置图标直接去掉就可以了<iconv-hasPermission="‘41’"class=“s原创 2020-06-09 18:22:57 · 529 阅读 · 0 评论 -
配路由
0.busiFormManageView -业务表单标准查看 发给后端1.const busiFormManageView = resolve => require(["@/pages/index/views/dataMap/busiFormManageView.vue"],resolve);//业务表单管理 修改两处2.在src/pages/index/router文件夹下的dataMap.js文件下操作 { // 业务表单标准C查看 pat.原创 2020-06-09 18:17:03 · 111 阅读 · 0 评论 -
bug:tab页的 表清册 里的表可以显示,但是 列表清册 里的表不显示
bug:tab页的 表清册 里的表可以显示,但是 列表清册 里的表不显示原因:里的:columns="columns"我写的是:listColumns=“listColumns”要写成:columns=“listColumns” 前面的columns是不能改变的 这个会对应basetable里的参数 不能 改变...原创 2020-06-09 18:11:34 · 78 阅读 · 0 评论 -
vue中的插槽————slot
转载链接:https://www.cnblogs.com/loveyt/p/9946450.html什么是插槽?**插槽(Slot)**是Vue提出来的一个概念,正如名字一样,插槽用于决定将所携带的内容,插入到指定的某个位置,从而使模板分块,具有模块化的特质和更大的重用性。插槽显不显示、怎样显示是由父组件来控制的,而插槽在哪里显示就由子组件来进行控制默认插槽父组件在父组件引用的子组件中写入想要显示的内容(可以使用标签,也可以不用)<template> <div>转载 2020-06-06 10:04:09 · 101 阅读 · 0 评论 -
vu的图片渲染问题
左边的服务类型:使用v-for渲染页面布局:左中右的 父级flex布局 并且设置justify-content: space-between;中间文字长短不一,不会出现三个都是左对齐需要给左边的img和中间的文字一起加一个div 让他flex布局右边的应用统计:没有使用v-for 直接拿数据右边的服务监控:flex布局 一个title+4个盒子 给title的width:100% 独占一行 就可以让四个盒子flex布局图片渲染如果是下面的代码是不管是网址路径还是本地原创 2020-06-03 14:02:55 · 218 阅读 · 0 评论 -
两种路由的实现hash和history
hash 和 history是主流的两种前端路由实现方式主要说一下新增的两个API history.pushState() 和 history.replaceState()historypushState() 和 history.replaceState()一样采用三个参数:状态对象,标题(当前被忽略)和(可选)URL。让我们更详细地研究这三个参数中的每一个状态对象(state obj...转载 2020-04-20 23:16:36 · 501 阅读 · 0 评论 -
v-if与v-show的区别
1.共同点都是动态显示DOM元素。2.区别(1)手段:v-if是动态的向DOM树内添加或者删除DOM元素;v-show是通过设置DOM元素的display样式属性控制显隐;block为显示,none为隐藏;(2)编译过程:v-if切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件;v-show只是简单的基于css切换;(3)编译条件:v-if是惰性的,如果初...转载 2020-04-16 15:02:16 · 135 阅读 · 0 评论 -
Vue中的v-for循环key属性注意事项小结
当Vue用 v-for 正在更新已渲染过的元素列表是,它默认用“就地复用”策略。如果数据项的顺序被改变,Vue将不是移动DOM元素来匹配数据项的改变,而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素。为了给Vue一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性。key属性的类型只能为 string或者number类型...转载 2020-04-15 23:43:32 · 599 阅读 · 0 评论 -
vue发送请求是应该在mounted还是在created生命周期
一个经常会被问到的问题:为什么不在 created 里去发ajax?created 可是比 mounted 更早调用啊,更早调用意味着更早返回结果,那样性能不是更高?首先,一个组件的 created 比 mounted 也早调用不了几微秒,性能没啥提高; 而且,等到异步渲染开启的时候,created 就可能被中途打断,中断之后渲染又要重做一遍,想一想,在 created 中做ajax调用,代码...转载 2020-04-15 23:14:04 · 4685 阅读 · 2 评论 -
Vue
一、对于MVVM的理解?MVVM 是 Model-View-ViewModel 的缩写。Model代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑。View 代表UI 组件,它负责将数据模型转化成UI 展现出来。ViewModel 监听模型数据的改变和控制视图行为、处理用户交互,简单理解就是一个同步View 和 Model的对象,连接Model和View。在MVVM架构下,...转载 2020-04-01 00:13:27 · 118 阅读 · 0 评论 -
-moz、-ms、-webkit, -o各什么意思
-moz代表firefox浏览器私有属性-ms代表ie浏览器私有属性-webkit代表safari(苹果用的)、chrome私有属性-o 指 Opera原创 2020-03-28 21:42:01 · 912 阅读 · 0 评论 -
transition
transition中的四个属性transition-property: 规定设置过渡效果的 CSS 属性的名称。transition-duration: 规定完成过渡效果需要多少秒或毫秒。transition-timing-function: 规定过渡效果的速度曲线transition-delay: 定义过渡效果何时开始默认值all 0 ease 0JavaScrip...原创 2020-03-28 21:33:47 · 136 阅读 · 0 评论 -
function()中的e和v
ee 代表鼠标事件( 鼠标点击,鼠标经过,鼠标按下等 )参数,这个参数是个对象,不同的鼠标事件,里面有好多属性和方法。例如: e.clientX (鼠标经过页面,可见区域的横坐标的值)e.clientYe.keyCode(点击键盘某个键的值)e.type(鼠标事件类型,click,mousover)vV就是遍历this后的每一项...原创 2020-03-28 20:19:01 · 793 阅读 · 0 评论 -
Storage.setItem()
storage.setItem(keyName, keyValue);keyName一个 DOMString,要创建或更新的键名。keyValue一个 DOMString,要创建或更新的键名对应的值。返回值undefinedsetItem() 作为 Storage 接口的方法,接受一个键名和值作为参数,将会把键名添加到存储中,如果键名已存在,则更新其对应的值。...转载 2020-03-28 12:58:36 · 847 阅读 · 0 评论 -
关于this.$router.push、replace、go的用法和区别
this.$router.push跳转到指定url路径,并想history栈中添加一个记录,点击后退会返回到上一个页面// 字符串this.$router.push('index') // 对象this.$router.push({path: 'login-pw'})// 带参数this.$router.push({path: 'login-pw', query: {'acc...转载 2020-03-28 12:51:45 · 386 阅读 · 0 评论 -
vuex state及mapState的基础用法详解
store.js文件,这里的store就是我们的前端数据仓库,用vuex 进行状态管理,store 是vuex的核心。可以看到使用vuex 之前,要告诉 vue 使用它,Vue.use(Vuex);/*store.js*/let store= new Vuex.Store({ state: { token:'', //取出cartarry中的数据,或者为空 c...转载 2020-03-26 22:27:58 · 1201 阅读 · 0 评论 -
网页地址
cube-uiVue.js api原创 2020-03-13 18:12:02 · 145 阅读 · 0 评论 -
谈谈你对MVVM开发模式的理解
MVVM分为Model、View、ViewModel三者Model:代表数据模型,数据和业务逻辑都是在Model层中定义View:代表UI视图,负责对数据的展示ViewModel:负责监听Model中数据的改变并控制视图的更新,处理用户交互操作Model和View并无直接关联,而是通过ViewModel来进行联系的,Model和ViewModel之间有着双向数据绑定的联系。因此当...原创 2020-03-13 18:05:48 · 464 阅读 · 0 评论 -
对于组件通信你了解多少,请描述一下你是怎么完成组件的通信的
父传子用 props传递子传父用$emit传递非父子之间的传值 建立一个空实例进行传值,中央事件总线机制祖孙之间的传值可以利用provide inject模式VUEX可以处理上述的每一个情况关于项目 vuex有哪些属性:state 数据仓库mutationgetters...原创 2020-03-13 18:07:40 · 172 阅读 · 0 评论 -
单页应用首屏加载速度慢,出现白屏时间过长
将公用的JS库通过script标签在index.html进行外部引入,减少我们打包出来的js文件的大小,让浏览器并行下载资源文件,提高下载速度在配置路由的时候进行路由的懒加载,在调用到改路由时再加载次路由相对应的js文件加一个首屏loading图或骨架屏,提高用户的体验尽可能使用CSS Sprites和字体图标库图片的懒加载等...原创 2020-03-13 18:02:07 · 858 阅读 · 0 评论 -
在vue里面你如何做数据的监听
回答要点:watch,设置deep为true对数据进行深层遍历监听watch里面监听第一种写法 watch:{ obj(newval,oldval){ console.log(newval,oldval) }, }监听复杂的数据类型监听不到怎么办,第二层数据改变的时候没有触发,watch该怎么做? -第二种写法可设置deep为tru...原创 2020-03-13 16:48:26 · 862 阅读 · 0 评论 -
Vue中,修改了数据,视图不更新的理解和处理方式
问题:Vue中给data中的对象属性添加一个新的属性时,经过打印发现数据是已经改变了,但视图不更新原因: 但是由于在Vue实例创建时,新添加的属性并未声明,因此就没有被Vue转换为响应式的属性,自然就不会触发视图的更新解决方法:这时就需要使用Vue的全局api——> $set()$set()使用方法:$set(需要修改的对象,“对象的属性”,值)<body...原创 2020-03-13 16:34:58 · 609 阅读 · 0 评论