vue
子义间
我很懒,什么都不想写
展开
-
实现文本内容是超链接时自动转换为超链接
文本内容出现超链接时,自动让其变成超链接解决办法:使用自定义指令实现数据过滤转化为超链接// 自定义指令 全局指令,引用就自行引用了import Vue form 'vue'Vue.directive('openLink', { bind(el) { // 获取内容 let textR = el.innerText // 判断内容是否为空 if (textR.length) { // 匹配超链接正则 let reg = /(https?|ftp|file)(:\/\/原创 2022-01-12 15:47:21 · 2100 阅读 · 2 评论 -
element表格的表头添加*星号
vue怎么实现element表格里表头信息提示功能?第一、给el-table添加:header-cell-class-name<el-table :header-cell-class-name="func"></el-table>第二、在vue的methods中编写方法// 给头部添加星星func(obj) { let list = ['表头1', '表头2', '表头3','表头4',] if(list.includes(obj.column.label)) {原创 2020-08-27 17:17:00 · 23522 阅读 · 0 评论 -
学会使用$attrs跟$listeners
在父子组件通讯,或者父孙通讯$ attrs与$ listeners的主要应用是实现多层嵌套传递。组件A与组件B通信一般都会使用组件B中转,即A传递给B,B再给C,但是如果A到C组件之间嵌套的组件过多,需要传递的事件和属性较多,会导致代码繁琐,代码维护困难。在vue2.4中,为了解决该需求,引入了attrs和attrs和attrs和listeners,新增了inheritAttrs选项。组件数据通讯利用$attrs官方定义:包含了父作用域中不作为prop 被识别 (且获取) 的特性绑定 (clas转载 2020-06-28 20:21:59 · 9281 阅读 · 0 评论 -
利用Vue.observable创建一个小型状态管理文件
如果小型项目用vuex的话,可能会繁琐冗余,这个时候可以用到vue2.6的新apiVue.observableimport Vue from 'vue'//引入vue// 通过Vue.observable创建一个对象export const store = Vue.observable({ data1: {}, data2: []})// 定义 mutations, 修改属性export const mutations = { setdata1(data1) { sto原创 2020-06-23 21:11:15 · 283 阅读 · 0 评论 -
利用hookEvent监听组件生命周期函数
例如没有hook的时候,需要在生命周期里使用方法,维护代码也需要往后查看,如果两个函数相差几百行代码呢 mounted() { window.addEventListener('resize', this.xxx) }, updated() { // 干了一些事 }, created() { // 干了一些事 }, beforeDestroy() { // 组件销毁时,销毁监听事件 window.removeEventListener('r原创 2020-06-23 20:20:00 · 897 阅读 · 0 评论 -
vue 路由 router的使用
1.安装npm install vue-router2.在一个模块化工程中使用它,必须要用vue.use()进行手动安装import Vue from ‘vue’import VueRouter from ‘vue-router’Vue.use(VueRouter )原创 2020-02-11 21:05:26 · 343 阅读 · 0 评论 -
vue组件切换
奥德赛原创 2019-10-11 14:10:41 · 179 阅读 · 0 评论 -
vue组件实现父组件向子组件传值、子组件用父组件的方法、父组件用到子组件数据及方法
要实现此功能应该要先学会vue组件父组件可以在引用子组件的时候,通过属性绑定(v-bind:)的形式,把需要的传递的值传递给子组件内部,供子组件使用注意:v-bind:绑定名(随便取,但是要跟子组件里的props里的声明保持一致,)props中的数据是只读的不能重新赋值...原创 2019-10-09 17:01:09 · 21379 阅读 · 0 评论 -
vue中的计算属性computed,watch(watch的immediate和handler以及deep)
vue中的计算属性computed实现数据实时更新到页面中去,而不会出现数据改变了但是在页面上还没有显示,computed是一个跟data平级的,他里面的属性不需要在data中定义,而是直接在computed里直接定义,引用跟data里的属性一样引用,computed里的属性本质是一个方法,但是引用他的时候当做一个属性来引用,而不是方法来引用,引用时一定不要加(),计算属性会被缓存起来,方便下次...原创 2019-10-08 17:06:47 · 11400 阅读 · 0 评论 -
vue中实例拿实例外部的数据以及外部拿vue实例中的方法跟数据
vue实例拿实例外部的数据直接可以拿var aaaa='我是外部的数据'var vm = new Vue({ el: '#app', data: { mas:"sdsdsad", aaa: 123456, flag:true, }, methods: { test(){ a...原创 2019-08-28 09:46:18 · 2809 阅读 · 0 评论