vue的全局指令
Vue 指令 全局
2023-09-14 09:00:17 时间
vue有四个全局指令:directive、extent、set、component
directive:自定义指令
//写一个改变颜色的指令 Vue.directive('amie',function(el,binding,vnode){ el.style='color:'+binding.value; }); //HTML <div v-amie="'red'"></div>
可以看出其实指令的实际是操作dom元素,第一个参数就是element,第二个是参数是传给指令的值,第三个。。。。
extent:作用和组件差不多,但是每次挂载都要new一次在$mount挂载(可以挂载到实例范围以外的地方),不像组件那样可以多次复用不需要new
var authorExtend = Vue.extend({ template:"<p><a :href='authorUrl'>{{authorName}}</a></p>", data(){ return{ authorName:'amie', authorUrl:'http://www.qq.com' } } }); //挂载 new authorExtend().$mount('.author'); //HTML <div class="author"></div>
set:改变Vue实例data的值
Vue.set(dataObj,'count',4);
一般我们会用 vm.data1 = 123 这样来修改,这样没问题
但是修改的数据是Object类型的属性值,Vue是检测不了变化的(这是受限于js的内部机制)
例如:vm.dataObj.count = 4来改变值,Vue检测不了dataObj.count的变化从而没办法在dom更新
这个时候用set就可以告诉Vue改变了data中dataObj的count属性
component:定义全局组件,在任意Vue实例内都可以使用
Vue.component('zhangamie',{ template: `<div> {{ name }} </div>`, data() { return { name: '小咩咩' } } })
mixin:全局混入选项(混入的选项和原来的并存)
Vue.mixin({ data() { return { newData: 999 } } })
以后所有新建的Vue实例都会在它们的data里面混进这个newData,但是如果这个newData在实例中再次被定义,会被实例中的data覆盖
先后顺序是:全局的mixin-->局部-->原生的mixin,顺序后的会覆盖顺序前的(覆盖只会覆盖选项内部的值,不会覆盖整个选项)
相关文章
- Vue笔记:vue项目引入bootstrap、elementUI、echarts
- Vue_(基础)Vue中的指令
- 2-3 vue配置介绍
- vue框架-基础4-vue-使用vue-cli工具
- vue框架-基础1-vue包引入,指令,模板语言
- [Vue @Component] Define Props on a Vue Class with vue-property-decorator
- [Vue] Get up and running with vue-router
- [Vue] Conditionally Render DOM Elements in Vue.js (v-if v-else v-show)
- vue指令:v-on(@click)绑定点击事件,也就是方法
- vue指令:v-text和v-html
- vue v-for指令
- 【视频】vue组件的全局注册
- 【视频】vue指令之@click及其stop修饰符
- 【视频】vue指令之v-for
- 手摸手带你用实现vue全屏loading插件
- vue-tour快速入门:VUE项目中如何使用vue-tour新手引导指引插件?怎样使用?包含具体实例
- vue 的 render 函数的用法:new Vue({ render: h => h(App), }).$mount(‘#app‘)
- Vue2.js:v-click-outside自定义指令和vue-click-outside监听鼠标点击元素外部区域事件
- Vue学习之--------内置指令的使用【v-bind、v-model、v-for、v-on、v-if 、v-else、v-show、v-text。。。】(2022/7/19)
- vue中使用分页组件、将从数据库中查询出来的数据分页展示(前后端分离SpringBoot+Vue)
- Vue——自定义组件
- Vue中vue-i18n结合vant-ui实现国际化
- 202:vue+openlayers: easing的API及在view.animation中使用示例
- 119:vue+openlayers加载geoserver的Tile caching中的数据(示例代码)
- Vue面试中,经常会被问到的面试题/Vue知识点整理
- Vue(二)vue 指令及用法举例
- 【vue】vue的常用指令及用法总结(续)_03
- Vue实现淘宝商品放大镜效果