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的全局指令的更多相关文章

  1. vue自定义全局和局部指令

    一.介绍 1.除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令. 2.自定义指令的分类       1.全局指令 2.局部指令 3.自定义全局指令格式 V ...

  2. vue.js(14)--自定义全局指令

    <input type="text" class="form-control" v-model="keywords" v-focus& ...

  3. Vue.directive添加全局指令详解

    自定义指令创建: Vue.directive( 'mycolor(指令名称:推荐全部小写,驼峰命名会出现问题,看最后面)' , { bind:function(){}, //本例只介绍inserted ...

  4. vue.js自定义指令入门

    Vue.js 允许你注册自定义指令,实质上是让你教 Vue 一些新技巧:怎样将数据的变化映射到 DOM 的行为.你可以使用Vue.directive(id, definition)的方法传入指令id和 ...

  5. vue 通过自定义指令实现 置顶操作;

    项目需求:要求当前项目每个页面滑到超出一屏的距离时,出现 backTop 按钮,点击则回到最顶端:俗称置顶操作: 因为涉及到的页面较多,每个页面都加肯定显得重复累赘,最终想到了 Vue 的自定义指令  ...

  6. 生命周期函数以及vue的全局注册

    beforeCreate 在创造实例之前 created 创造实例以后 beforeMount 在挂载前 render 渲染节点到页面上 //将虚拟dom数组渲染出来 mounted 挂载以后 bef ...

  7. Vue(九) 自定义指令

    前面介绍了许多 Vue 内置的指令,比如 v-if.v-show等,这些丰富的指令能满足我们绝大部分的业务需求,不过在需要一些特殊功能时,我们仍然希望对 DOM 进行底层的操作,这时就要用到自定义指令 ...

  8. Vue.directive自定义指令

    Vue除了内部指令,我们也可以定义一些属于自己的指令,比如我们要定义一个v-diy的指令,作用就是让文字变成红色. 写好了这个功能,我们现在就自己定义一个全局的指令.我们这里使用Vue.directi ...

  9. 2.0 vue内置指令与自定义指令

    1.1 常用内置指令 1) v:text : 更新元素的 textContent 2) v-html : 更新元素的 innerHTML 3) v-if : 如果为 true, 当前标签才会输出到页 ...

随机推荐

  1. Scrum Meeting 11.07

    成员 今日任务 明日计划 用时 徐越       赵庶宏       薄霖       卞忠昊 JOSN数据解析 WebView和JavaScript交互基础  3h  武鑫 设计界面:独立完成一些简 ...

  2. selenium之鼠标事件

    1.鼠标悬停火狐版本51,selenium版本3ActionChains(driver).move_to_element(above).perform()执行代码时,报错:selenium.commo ...

  3. linux 常用命令-文件、文件夹管理

    1. 创建文件夹: mkdir dirName 删除文件夹: rm -rf * 删除当前目录下的所有文件以及文件夹(非交互式) rm -r  --recursive 递归式删除所删除目录以及子目录(有 ...

  4. max值——单元测试

    设计思想 在调试的时候,尽可能的将所有可能出现的情况都考虑到,输入这些情况,查看程序运行的结果 源代码 #include<iostream> using namespace std; in ...

  5. A网站访问B网站,跨域问题

    跨域异常:XMLHttpRequest cannot load  ''. No 'Access-Control-Allow-Origin' header is present on the reque ...

  6. Scrum 5.0

    5.0--------------------------------------------------- 1.团队成员完成自己认领的任务. 2.燃尽图:理解.设计并画出本次Sprint的燃尽图的理 ...

  7. Vue.js——60分钟webpack项目模板快速入门

    概述 browserify是一个 CommonJS风格的模块管理和打包工具,上一篇我们简单地介绍了Vue.js官方基于browserify构筑的一套开发模板.webpack提供了和browserify ...

  8. [转帖] 学习一下 apache bench 的总结简介 ( LAMP的没用过..)

    PS:网站性能压力测试是性能调优过程中必不可少的一环.只有让服务器处在高压情况下才能真正体现出各种设置所暴露的问题.Apache中有个自带的,名为ab的程序,可以对Apache或其它类型的服务器进行网 ...

  9. python杂谈:Python中\r的用法示例

    \r 默认表示将输出的内容返回到第一个指针,这样的话,后面的内容会覆盖前面的内容 import sys import time def view_bar(num,total): rate = floa ...

  10. window.location.hash 使用

    [转]http://www.cnblogs.com/nifengs/p/5104763.html location是javascript里边管理地址栏的内置对象,比如location.href就管理页 ...