vue2
她说她说
来自别人的帮助都是恩赐!
展开
-
前端vue经典面试题78道(重点详细简洁)
2分钟,200-300个字,主旨自己基本情况,工作经历,优点,兴趣爱好,职业规划,邀约为什么要封装组件?主要就是为了解耦,提高代码复用率。什么是组件?页面上可以复用的都称之为组件 它是 HTML、CSS、JS 的聚合体。组件就相当于库,把一些能在项目里或者不同项目里可以复用的代码进行需求性的封装。组件中的 data 为什么是一个函数?让每个返回的实例都可以维护一份被返回对象的独立的拷贝。在solt组件中有自己的data,把它传给使用的地方。原创 2022-08-22 14:43:46 · 5996 阅读 · 3 评论 -
vue 导入模板示例
template<el-upload ref="upload" action="" :http-request="(params)=>UploadFile(params)" accept=".xls, .xlsx" :show-file-list = "false" :auto-upload="true"> <el-button size="mini" class="btn">导入模板</el-button></el-upload>原创 2021-06-02 14:24:35 · 638 阅读 · 0 评论 -
vue的组件里的定时器要怎么销毁
const timer = setInterval(() =>{// 某些定时器操作}, 500);// 通过$once来监听定时器,在beforeDestroy钩子可以被清除。this.$once('hook:beforeDestroy', () => { clearInterval(timer);})原创 2021-06-16 14:43:35 · 304 阅读 · 0 评论 -
实现文字溢出显示…鼠标移入浮层展示全部
实现逻辑:将文字放到一个容器中,将容器的样式(主要是有关字体的样式)都设置为当前元素的样式,然后获取容器的宽,也就是文字的宽。如果文字的宽度超过了当前元素的宽度,则给溢出隐藏的css样式 overflow :hidden;text-overflow: ellipsis;white-space: normal定义鼠标移入展示浮层,浮层中显示全部内容,鼠标移出销毁浮层。通过自定义指令实现如上思路:Vue.directive('showTips', { // el {element} 当前元素 c原创 2021-06-15 16:13:58 · 1905 阅读 · 1 评论 -
vue组件中this和$el指向
this指向组件的实例,$el用于获取Vue实例挂载的DOM元素,在mounted生命周期中才有效,之前的钩子函数内无效。如下代码所示,Vue脚手架中,$el指向当前组件template模板中的根标签。<template> <div id="root"> <h1 @click="fn()"> Lorem, ipsum </h1> </div></template><script>e原创 2021-06-15 15:32:20 · 10901 阅读 · 2 评论 -
什么是Vuex? 为什么要使用Vuex ?vuex使用示例 (***数据持久化***)
在 Vue 项目中,如果项目结构简单,父子组件之间的数据传递可以使用 props 或者 $emit 等方式 (详参大神博文《Vue进阶(六):组件之间的数据传递》)。如果是大型项目,很多时候都需要在子组件之间传递数据,使用之前的方式就不太方便。Vue 的状态管理工具 Vuex 完美的解决了这个问题。首先,我们需要知道 vue 是以单向数据流的方式驱动的。多个视图依赖于同一状态。来自不同视图的行为需要变更同一状态。vuex 类似Redux的状态管理器, 用来管理Vue的所有组件状态,采用集中式存储管原创 2021-06-11 13:57:02 · 148 阅读 · 1 评论 -
vue路由传参的几种基本方式
1、动态路由(页面刷新数据不丢失)路由配置 (示例){ path: '/particulars/:id', name: 'particulars', component: particulars }methods:{ insurance(id) { //直接调用$router.push 实现携带参数的跳转 this.$router.push({ path: `/particulars/${id}`, }) }}原创 2021-06-11 10:21:38 · 127 阅读 · 3 评论 -
vue 插槽的使用
插槽使用 - 具名插槽描述:具名插槽其实就是给插槽取个名字。一个子组件可以放多个插槽,而且可以放在不同的地方,而父组件填充内容时,可以根据这个名字把内容填充到对应插槽中。代码如下:1、子组件的代码,设置了两个插槽(header和footer):<template> <div> <div class="header"> <h1>我是页头标题</h1> <div>原创 2021-06-09 14:24:11 · 130 阅读 · 1 评论 -
ES字符串操作:遍历、比较、截取、补全...
1.确定一个字符串是否包含在另一个字符串中let s = 'Hello world!'; s.startsWith('Hello') // trues.endsWith('!') // trues.includes('o') // true这三个方法都支持第二个参数,表示开始搜索的位置。 let s = 'Hello world!'; s.startsWith('world', 6) // true s.endsWith('Hello', 5) // true原创 2021-06-08 14:32:52 · 2606 阅读 · 0 评论 -
addEventListener() 事件监听
语法element.addEventListener(event, function, useCapture);第一个参数是事件的类型 (如 “click” 或 “mousedown”),详参【事件类型】第二个参数是事件触发后调用的函数。第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。你可以使用函数名,来引用外部函数:element.addEventListener("click", function(){ alert("Hello World!"); });element原创 2021-06-08 09:56:30 · 236 阅读 · 0 评论 -
show-overflow-tooltip实现表格列内容过长显示提示
在Vue项目中,使用ElementUI显示表格数据时,如果某一个列数值长度超过列宽,会默认换行,造成显示不友好。翻阅Element-UI文档,可发现show-overflow-tooltip列属性可实现列内容过长被隐藏时显示tooltip的功能。注:show-overflow-tooltip属性需要谨慎使用,如果一个页面多列使用,会影响页面加载速度。因为show-overflow-tooltip 属性虽然可以解决文本超长时的问题,但当前是在所有的单元格中插入 tooltip 组件包装来简单实现的。to原创 2021-06-08 09:35:44 · 1639 阅读 · 0 评论 -
Vue中watch用法
第一种方式<input type="text" v-model="userName"/> //监听当userName值发生变化时触发watch: { userName (newName, oldName) { console.log(newName) }}第一种方式有一个缺点: 就是当值第一次绑定的时候 不会执行监听函数,只有当值改变的时候才会执行。如果我们想在第一次绑定的时候执行此监听函数,则需要设置immediate为true。比如当父组件向子组件动态传值时,子组件转载 2021-06-07 17:08:13 · 175 阅读 · 0 评论 -
上传图片组件示例
话不多说,直接上代码组件uploadImg.vue放在components下,代码如下<template> <div v-loading="uploadingImgLoading" class="pic_container"> <input ref="nativeInput" type="file" style="display: none" accept="image.png,image.gif" @原创 2021-06-02 14:36:39 · 139 阅读 · 0 评论 -
面试必备:2021 Vue经典面试题总结
一、什么是MVVM?MVVM是Model-View-ViewModel的缩写。MVVM是一种设计思想。Model 层代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑;View 代表UI 组件,它负责将数据模型转化成UI 展现出来,ViewModel 是一个同步View 和 Model的对象。在MVVM架构下,View 和 Model 之间并没有直接的联系,而是通过ViewModel进行交互,Model 和 ViewModel 之间的交互是双向的, 因此View 数据的变化会同步到Model原创 2021-06-02 16:11:09 · 618 阅读 · 0 评论 -
vue中created()与activated()的理解
created():在创建vue对象时,当html渲染之前就触发;但是注意,全局vue.js不强制刷新或者重启时只创建一次,也就是说,created()只会触发一次;activated():在vue对象存活的情况下,进入当前存在activated()函数的页面时,一进入页面就触发;可用于初始化页面数据等...原创 2021-06-02 17:51:43 · 777 阅读 · 0 评论