vue的全局指令
Vue 指令 全局
2023-09-14 08:58:55 时间
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项目vue的版本号
- VUE v-for 循环的 2 个使用
- Vue(6)v-on指令的使用[通俗易懂]
- 闲聊vue版本差异和开发中不太容易注意的点(基础篇)
- vue-cli 初始----安装运行Vue项目
- vue网络图片url转Base64「建议收藏」
- vue双向绑定数组和对象有什么区别_后端接收前端json数据
- vue源码分析-diff算法核心原理
- 「后端小伙伴来学前端了」Vue中为什么直接安装less-loader会报版本过高错误?你有没有思考过?
- vue项目部署后刷新404_vue重载当前页面
- Vue项目:菜农管理 【maven + spring boot + RESTFul + SSM+vue + axios】
- vue的那些原理题?(面试版)
- 社招前端经典vue面试题汇总
- 【架构师(第三十篇)】Vue-Test-Utils 全局组件和第三方库 vuex | vue-router
- vue.js客服系统实时聊天项目开发(十六)连接websocket实时处理消息,断线重连,处理服务端关闭指令
- vue入门篇之Vue.js 组件
- Vue提示框组件vue-notification使用实例演示
- Vue 指令之v-bind指令绑定属性
- Vue 移动端微信内H5调起支付(WeixinJSBridge内置对象)详解程序员
- 安装Vue on Linux:轻松搭建开发环境(linux安装vue)
- Vue技术实现访问远程Redis的精彩之旅(vue访问远端redis)
- Vue结合Redis,加快数据读取速度(vue读取redis)
- 优雅的Vue请求Redis驱动的高性能服务(vue请求redis)
- 基于Vue的Redis网页设计(vue设计redis页面)
- Vue中触发Redis订阅通知(vue中订阅redis)