vue
zhang070514
不喜欢运动的程序员不是好的工程师!
展开
-
vue H5页面实现搜索历史记录超过两行的Tag的展开与折叠
搜索页面搜索历史记录超过两行要折叠,同时可以展开显示所有的历史记录。原创 2022-09-29 16:14:14 · 1899 阅读 · 3 评论 -
ElementUI el-table实现跨行显示
最近在做项目时遇到了一个table表格需要跨行的需求,因为项目中是用到的element-ui的table表格,所以参考element官网实现了此功能,在这里记录一下。<template> <div> <el-table :data="tableData" :span-method="objectSpanMethod" border > <el-table-column prop="原创 2022-01-06 11:30:20 · 2838 阅读 · 0 评论 -
vue之watch总结
1、immediate属性<div class="main"> fullName: <span>{{fullName}}</span><br> <input type="text" v-model="lastName"></div> data () { return { firstName: 'zhang', lastName: 'hang', fullName: ''原创 2021-01-09 20:27:16 · 297 阅读 · 0 评论 -
JavaScript基础之冒泡/捕获事件
JavaScript的冒泡事件和捕获事件是每一个前端开发者都会经常遇到的问题。最近遇到这个问题时,发现自己对它们还是一知半解,现在是时候该彻底的弄懂它们了。1、定义一个事件发生后,会在子元素和父元素之间传播。这种传播分成三个阶段:第一阶段:从window对象传导到目标节点(外层传到内层),称为“捕获阶段”。第二阶段:在目标节点上触发,称为“目标阶段”。第三阶段:从目标节点传导回window对象(从内层传回外层),称为“冒泡阶段”2、应用本文中我们用addEventListener() 方法原创 2020-09-01 20:37:18 · 190 阅读 · 0 评论 -
vue动态绑定class的三种方式
运用场景在开发项目中很多时候需要根据后端接口返回的不同状态来动态的显示前端页面,此时我们就可以动态操作元素的class来达到我们的目的。方法一:传给 v-bind:class 一个对象<template> <div class="classTest"> <h2 :class="{'mblue':flag1, 'mred': flag2}">我是测试文字</h2> </div></template><sc原创 2020-07-16 11:01:15 · 2155 阅读 · 0 评论 -
vue学习1
因为最近的项目需要用到vue框架,自己原来也学习过,但只是模仿着别人写的敲了一点,感觉收获不大。所以借这次机会,自己一边做项目,一边学习记录。技术只有自己真正掌握了才是自己的。下面就开始吧。 首先在电脑上安装node,这个就不详细说了,下载安装过程自己可以百度一下。在这里说一下npm,npm是随同node一起安装的包管理工具,能解决nodejs代码部署上的很多问题。一般新版的nod原创 2017-10-11 12:03:24 · 275 阅读 · 0 评论 -
webpack+axios配置代理进行跨域访问数据
在学习vue的axios时,访问自己的本地数据出现了跨域问题,如下图 主要代码有var root = 'http://172.16.188.107:8080/im'、、、getData() { this.$api.get('/data1.json', null, r => { console.log(r); }, f => { ...原创 2018-09-04 14:07:37 · 3028 阅读 · 0 评论 -
vue生命周期学习
vue实例从创建到销毁的过程就是生命周期,它总共分为8个阶段,分别是:beforeCreatecreatedbeforeMountmountedbeforeUpdateupdatedbeforeDestorydestoryed下面是vue官网上的一张生命周期图,我们借助它来分析在不同时期都做了什么操作。闲话少说,直接上代码,通过打印的log来分析各个钩子函数&lt;!D...原创 2018-10-12 14:46:51 · 220 阅读 · 0 评论 -
vue父子组件相互传递数据
前言vue父子组件之间相互传递数据应该是我们开发中最常见的场景。今天刚好有时间就写两个简单的小例子记录一下。一、父组件向子组件传递数据父组件向子组件传递数据相对简单,主要是通过props作为中间桥梁,下面是代码: <div id="app"> <input v-model="msg"> <child :message="m...原创 2019-09-16 17:58:09 · 559 阅读 · 0 评论