vue全局API

.array p { counter-increment: longen; margin-left: 10px }
.array p::before { content: counter(longen) "." }
.alink { font-size: 16px; color: blue }

阅读目录

  • 1.Vue.extend({})
  • 2.Vue.nextTick([callback, context])
  • 3.Vue.set(object, key, value)
  • 4.Vue.delete(object, key)
  • 5.Vue.directive(id, [definition])
  • 6.Vue.mixin(mixin)

回到顶部

1.Vue.extend({})

1. Vue.extend({})
extend是构造一个组件的语法糖。如下创建一个vue构造器，如下代码：

<!DOCTYPE html>
<html>
  <head>
    <title>演示Vue</title>
    <style>
      img { width: 180px; height: 180px; overflow: hidden;}
    </style>
  </head>
  <body>
    <div id=‘demo‘></div>
  </body>
  <script src="https://tugenhua0707.github.io/vue/transition/vue.js"></script>

  <script type="text/javascript">
    // 创建构造器
    var P = Vue.extend({
      template: ‘<p>{{msg}}</p>‘,
      data: function() {
        return {
          msg: ‘aa‘
        }
      }
    });
    // 创建实例
    new P().$mount(‘#demo‘);
  </script>
</html>

查看效果

回到顶部

2.Vue.nextTick([callback, context])

2. Vue.nextTick([callback, context])
作用是：在下次DOM更新循环结束之后执行延迟回调，在修改数据之后立即使用这个方法。
如下代码：

<!DOCTYPE html>
<html>
  <head>
    <title>演示Vue</title>
    <style>
      img { width: 180px; height: 180px; overflow: hidden;}
    </style>
  </head>
  <body>
    <div id=‘demo‘>{{ msg }}</div>
  </body>
  <script src="https://tugenhua0707.github.io/vue/transition/vue.js"></script>

  <script type="text/javascript">
    var vm = new Vue({
      el: ‘#demo‘,
      data: {
        msg: ‘123‘
      }
    });
    // 更改数据
    vm.msg = ‘new message‘;
    console.log(vm.$el.textContent); // 123
    Vue.nextTick(function() {
      console.log(vm.$el.textContent); // new message
    });
  </script>
</html>

查看效果

比如 当我设置 vm.msg = ‘new message‘， 该组件不会立即渲染，当刷新队列时，组件会在事件循环队列清空时的下一个tick更新，如上代码，
当设置 vm.msg 然后打印还是之前的数据，然后会延迟执行 Vue.nextTick该方法。最后会更新数据。

那么在组件内如何使用 vm.$nextTick()方法呢？可以看如下demo

<!DOCTYPE html>
<html>
  <head>
    <title>演示Vue</title>
    <style>
      img { width: 180px; height: 180px; overflow: hidden;}
    </style>
  </head>
  <body>
    <div id=‘demo‘>
      <component1></component1>
    </div>
  </body>
  <script src="https://tugenhua0707.github.io/vue/transition/vue.js"></script>

  <script type="text/javascript">
    Vue.component(‘component1‘, {
      template: ‘<span @click="updateMessage()">{{ msg }}</span>‘,
      data: function() {
        return {
          msg: ‘new message‘
        }
      },
      methods: {
        updateMessage: function() {
          this.msg = ‘update msg‘;
          console.log(this.$el.textContent); // new message
          this.$nextTick(function() {
            console.log(this.$el.textContent); // update msg
          });
        }
      }
    })
    new Vue({
      el: ‘#demo‘
    });
  </script>
</html>

查看效果

页面加载完的时候 显示 new message信息，当我点击一下的时候， 控制台先打印 new message 信息，接着会执行 this.$nextTick函数，最后打印 update msg 信息了。

回到顶部

3.Vue.set(object, key, value)

3. Vue.set(object, key, value)
作用：设置对象的属性。
设置属性 如下方法会报错：

var app = new Vue({
   el: ‘#demo‘,
  data: {
    age: 29
  }
});
Vue.set(app.$data, ‘name‘, ‘longen‘);

因为不能直接在data对象上增加属性，但是可以在data里的对象上增加属性， 如下代码就可以了；

<!DOCTYPE html>
<html>
  <head>
    <title>演示Vue</title>
    <style>
      img { width: 180px; height: 180px; overflow: hidden;}
    </style>
  </head>
  <body>
    <div id=‘demo‘>
      {{ msg.age }}
    </div>
  </body>
  <script src="https://tugenhua0707.github.io/vue/transition/vue.js"></script>

  <script type="text/javascript">
    var app = new Vue({
      el: ‘#demo‘,
      data: {
        msg: {
          age: 10
        }
      }
    });
    Vue.set(app.msg, ‘name‘, ‘longen‘);
    console.log(app.msg);  // 打印出对象，有刚刚设置的属性name {}
  </script>
</html>

查看效果

回到顶部

4.Vue.delete(object, key)

作用是：删除对象的属性。如下demo代码：

<!DOCTYPE html>
<html>
  <head>
    <title>演示Vue</title>
    <style>
      img { width: 180px; height: 180px; overflow: hidden;}
    </style>
  </head>
  <body>
    <div id=‘demo‘>
      {{ msg.age }}
    </div>
  </body>
  <script src="https://tugenhua0707.github.io/vue/transition/vue.js"></script>

  <script type="text/javascript">
    var app = new Vue({
      el: ‘#demo‘,
      data: {
        msg: {
          age: 10
        }
      }
    });
    Vue.set(app.msg, ‘name‘, ‘longen‘);
    console.log(app.msg);  // 在控制台打印出对象，有刚刚设置的属性name {}
    // 现在删除对象的属性 name
    Vue.delete(app.msg, ‘name‘);
    console.log(app.msg);  // 在控制台打印出 对象 ，可以看到美元name属性了
  </script>
</html>

查看效果

回到顶部

5.Vue.directive(id, [definition])

作用是：注册或获取全局指令。也可以理解为注册自定义指令。
比如页面上有一个input框，当页面加载时候，元素将获得焦点。如下代码：

<!DOCTYPE html>
<html>
  <head>
    <title>演示Vue</title>
    <style>
      img { width: 180px; height: 180px; overflow: hidden;}
    </style>
  </head>
  <body>
    <div id=‘demo‘>
      <input v-focus />
    </div>

  </body>
  <script src="https://tugenhua0707.github.io/vue/transition/vue.js"></script>

  <script type="text/javascript">
    // 注册一个全局自定义指令 v-focus
    Vue.directive(‘focus‘, {
      // 当绑定元素插入到DOM中
      inserted: function(el) {
        // 聚焦元素
        el.focus();
      }
    })
    new Vue({
      el: ‘#demo‘
    })
    // 返回已注册的指令
    var myDirective = Vue.directive(‘focus‘);
    console.log(myDirective);
  </script>
</html>

查看效果

回到顶部

6.Vue.mixin(mixin)

Vue.use(plugin)
参数：{Object | Function }
作用：安装Vue.js插件，如果插件是一个对象，必须提供install方法，如果插件是一个函数的话，它会作为install方法，install方法将被作为Vue参数调用。

Vue.mixin(mixin)

参数是 {Object}
作用： 全局注册一个混合，影响注册之后所有创建的每个vue实例。
比如如下demo：

// mixin.js
module.exports = {
  created: function () {
    this.hello()
  },
  methods: {
    hello: function () {
      console.log(‘hello from mixin!‘)
    }
  }
}

然后在 test.js可以如下编码：

// test.js
var myMixin = require(‘./mixin‘)
var Component = Vue.extend({
  mixins: [myMixin]
})
var component = new Component() // -> "hello from mixin!"

就可以使用了。

时间： 2024-07-31 15:39:52

vue全局API的相关文章

Vue全局API总结

带图原文链接地址:http://www.cnblogs.com/douyae...1.extend用于创建一个子类Vue,用$mount来挂载 <body> <div id="app"></div> <script> const app=Vue.extend({ template:'<p>{{a}} {{b}} {{c}}</p>', data:function(){ return { a:'Welcome', b

vue全局api --- nextTick

nextTick 在下次 DOM 更新循环结束之后执行延迟回调.在修改数据之后立即使用这个方法,获取更新后的 DOM. 在项目中遇到做横向滚动,并且通过首页传进来的值找到是通过哪一条进来的,并且将那一条展示在手机屏幕的可视区域, css代码如下 .detail-parent { width: 100%; height: 150px; overflow-x: scroll; } 通过上一级页面传进来的值去请求接口之后,找到当前定位的那一条之后,改变元素的scrollLeft就可以在将那条数据放到手

Vue基础（环境配置、内部指令、全局API、选项、内置组件）

1.环境配置 安装VsCode 安装包管理工具:直接下载 NodeJS 进行安装即可,NodeJS自带 Npm 包管理工具,下载地址:https://nodejs.org/en/download/安装完成后在命令行执行以下命令查看npm包管理器版本 npm -v npm中文文档:https://www.npmjs.cn/ 配置淘宝镜像 npm install cnpm -g --registry=https://registry.npm.taobao.org 然后执行 cnpm -v 查看版本信

vue 2.0 —— 全局API

一.什么是全局API? 全局API并不在构造器里,而是先声明全局变量或者直接在Vue上定义一些新功能,Vue内置了一些全局API,比如我们今天要学习的指令Vue.directive.说的简单些就是,在构造器外部用Vue提供给我们的API函数来定义新的功能. #二.Vue.directive自定义指令 我们在第一季就学习了内部指令,我们也可以定义一些属于自己的指令,比如我们要定义一个v-jspang的指令,作用就是让文字变成绿色. 在自定义指令前我们写一个小功能,在页面上有一个数字为10,数字的下

Vue.js（25）之 vue全局配置api介绍

本文介绍的全局api并不在Vue的构造函数内,而是在Vue构造器外面提供这些方法,让我们扩展新功能. 1. vue.extend(options) 参考:https://www.w3cplus.com/vue/vue-extend.html   1 vue在创建vue实例会经过以下四个过程: 使用vue.extend创建实例也是相似的: <!DOCTYPE html> <html lang="en"> <head> <meta charset=

vuejs全局api概念

什么是全局API? 全局API并不在构造器里,而是先声明全局变量或者直接在Vue上定义一些新功能,Vue内置了一些全局API,比如我们今天要学习的指令Vue.directive.说的简单些就是,在构造器外部用Vue提供给我们的API函数来定义新的功能.

vue2.0学习(二)-全局API

vue2.0学习(二)-全局API GitHub源码 https://github.com/sunnyguyan/VueDemo 1.Vue.directive自定义指令 一.什么是全局API? 全局API并不在构造器里,而是先声明全局变量或者直接在Vue上定义一些新功能,Vue内置了一些全局API,比如我们今天要学习的指令Vue.directive.说的简单些就是,在构造器外部用Vue提供给我们的API函数来定义新的功能 二.Vue.directive自定义指令 我们在第一季就学习了内部指令,

vue全局配置----小白基础篇

今天学习vue全局配置.希望帮助我们去了解vue的全局配置,快速开发. Vue.config是vue的全局配置对象.包含Vue的所有全局属性: silent:boolean(默认值:false)----取消Vue的所有的日志与警告 :用法:Vue.config.silent = true optionMergeStrategies:{[key:string]:Function}(默认是空对象{}) vue.config.optionMergeStrategies._my_option = fun

自定义vue全局组件use使用、vuex的使用

自定义vue全局组件use使用(解释vue.use()的原理)我们在前面学习到是用别人的组件:Vue.use(VueRouter).Vue.use(Mint)等等.其实使用的这些都是全剧组件,这里我们就来讲解一下怎么样定义一个全局组件,并解释vue.use()的原理而我们再用Axios做交互,则不能使用Vue.use(Axios),因为Axios没有install 自定义一个全局Loading组件,并使用:总结目录: |-components |-loading |-index.js 导出组件,