Vue全局API总结

1.extend用于创建一个子类Vue,用$mount来挂载

  1. <body>
  2. <div id="app"></div>
  3. <script>
  4. const app=Vue.extend({
  5. template:'<p>{{a}} {{b}} {{c}}</p>',
  6. data:function(){
  7. return {
  8. a:'Welcome',
  9. b:"To",
  10. c:"BeiJing"
  11. }
  12. }
  13. });
  14. new app().$mount("#app")
  16. </script>
  17. </body>

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

 

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <script src="lib/Vue/vue.development.js"></script>
  7. </head>
  8. <body>
  9. <div id="app">
  10. <button @click="getTag">获取标签内容</button>
  11. <h1>{{message}}</h1>
  12. </div>
  13. <script>
  14. var app=new Vue({
  15. el:"#app",
  16. data:{
  17. message:"我爱北京天安门"
  18. },
  19. methods:{
  20. getTag:function(){
  21. this.message='我爱我家';
  22. console.log(document.querySelector('h1').innerHTML)
  24. }
  25. }
  26. });
  28. </script>
  29. </body>
  30. </html>

 结果如下：

我们可以看到视图更新以后拿到的并不是更新后的innerHTML，因为dom结构更新是一个异步事件

再看下面的例子

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <script src="lib/Vue/vue.development.js"></script>
  7. </head>
  8. <body>
  9. <div id="app">
  10. <button @click="getTag">获取标签内容</button>
  11. <h1>{{message}}</h1>
  12. </div>
  13. <script>
  14. var app=new Vue({
  15. el:"#app",
  16. data:{
  17. message:"我爱北京天安门"
  18. },
  19. methods:{
  20. getTag:function(){
  21. this.message='我爱我家';
  22. this.$nextTick(function(){
  23. console.log(document.querySelector('h1').innerHTML)
  24. })
  26. }
  27. }
  28. });
  30. </script>
  31. </body>
  32. </html>

我们可以看到它会等dom结构更新完成后再去获取更新后的innerHTML值

3.Vue.set(target,key,value)普通的情况下对Vue实例里面的数据进行更改，数据改掉了，但是呈现在页面的视图并没有发生变化，所以借用该方法视图也会跟着刷新

普通方式视图并没有刷新

  1. <body>
  2. <div id="app"></div>
  3. <script>
  4. var app=new Vue({
  5. el:"#app",
  6. data:{
  7. arr:['北京','上海','天津','重庆']
  8. }
  9. });
  10. app.arr[0]='北京天安门';
  11. </script>
  12. </body>

set方式视图会刷新

 

  1. <body>
  2. <div id="app">
  3. <ul>
  4. <li v-for="item in arr">{{item}}</li>
  5. </ul>
  6. </div>
  7. <script>
  8. var app=new Vue({
  9. el:"#app",
  10. data:{
  11. arr:['北京','上海','天津','重庆']
  12. }
  13. });
  14. Vue.set(app.arr,0,'北京天安门');
  15. </script>
  16. </body>

 

 

 4.Vue.delete(target,key)用法和原理与set添加元素是一样的道理

  1. <body>
  2. <div id="app">
  3. <ul>
  4. <li v-for="(val,key) in obj">{{key}}----{{val}}</li>
  5. </ul>
  6. </div>
  7. <script>
  8. var app=new Vue({
  9. el:"#app",
  10. data:{
  11. obj:{name:'张三',sex:'男',hobby:'睡大觉'}
  12. }
  13. });
  14. Vue.delete(app.obj,'hobby');
  15. </script>
  16. </body>

5.Vue.directive(id,[definition])指令函数，定义了以下几个钩子，每一个钩子都有参数el,指的是绑定的元素

  1. // 注册
  2. Vue.directive('my-directive', {
  3. bind: function () {},
  4. inserted: function () {},
  5. update: function () {},
  6. componentUpdated: function () {},
  7. unbind: function () {}
  8. })
  9. // 注册 (指令函数)
  10. Vue.directive('my-directive', function () {
  11. // 这里将会被 `bind` 和 `update` 调用
  12. })
  13. // getter，返回已注册的指令
  14. var myDirective = Vue.directive('my-directive')

bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。

  1. <body>
  2. <div id="app">
  3. <div v-drop>Hello Vue!</div>
  4. </div>
  5. <script>
  6. Vue.directive('drop',{
  7. bind:function(el){
  8. el.style.color='red';
  9. el.style.fontWeight='bold'
  10. }
  11. });
  12. var app=new Vue({
  13. el:'#app'
  14. })
  15. </script>
  16. </body>

inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。

 这是我做的一个照片墙拖曳例子

  1. <head>
  2. <meta charset="UTF-8">
  3. <title>Title</title>
  4. <style>
  5. .box{
  6. width: 800px;
  7. height: 800px;
  8. position: relative;
  9. background-color: #000000;
  10. margin: auto;
  11. }
  12. .img{
  13. position: absolute;
  14. left:0;
  15. top:0;
  16. transform: rotateZ(0deg);
  17. }
  18. </style>
  19. <script src="lib/Vue/vue.development.js"></script>
  20. </head>
  21. <body>
  22. <div id="app">
  23. <div class="box">
  24. <img src="../QQxiu/pic/21.gif" alt="" class="img" v-ball>
  25. <img src="../QQxiu/pic/31.gif" alt="" class="img" v-ball>
  26. <img src="../QQxiu/pic/2132.gif" alt="" class="img" v-ball>
  27. <img src="../QQxiu/pic/21214.gif" alt="" class="img" v-ball>
  28. <img src="../QQxiu/pic/24.gif" alt="" class="img" v-ball>
  29. <img src="../QQxiu/pic/3214.gif" alt="" class="img" v-ball>
  30. </div>
  31. </div>
  32. <script>
  33. Vue.directive('ball',{
  34. inserted:function(el){
  35. var i=0;
  36. el.onclick=function(e){
  37. i+=10;
  38. el.style.transform="rotateZ("+i+"deg)"
  39. };
  40. el.onmousedown=function(e){
  41. var l=e.clientX-el.offsetLeft;
  42. var t=e.clientY-el.offsetTop;
  43. document.onmousemove=function(e){
  44. el.style.left=(e.clientX-l)+'px';
  45. el.style.top=(e.clientY-t)+'px'
  46. };
  47. el.onmouseup=function(){
  48. document.onmousemove=null;
  49. el.onmouseup=null;
  50. }
  51. }
  52. }
  53. });
  54. var app=new Vue({
  55. el:'#app'
  56. })
  57. </script>
  58. </body>

bind:update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新（详细的钩子函数参数见下）。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <script src="lib/Vue/vue.development.js"></script>
  7. </head>
  8. <style>
  9. #text{
  10. width: 100px;
  11. height:100px;
  12. resize: none;
  13. }
  14. </style>
  15. <body>
  16. <div id="app">
  17. <textarea id="text" v-model="a" v-box></textarea>
  18. </div>
  19. <script>
  20. Vue.directive('box',{
  21. update:function(el){
  22. let color1=Math.ceil(Math.random()*225);
  23. let color2=Math.ceil(Math.random()*225);
  24. let color3=Math.ceil(Math.random()*225);
  25. el.style.backgroundColor='rgb('+color1+","+color2+','+color3+")"
  26. }
  27. });
  28. var app=new Vue({
  29. el:'#app',
  30. data:{
  31. a:""
  32. }
  33. })
  34. </script>
  35. </body>
  36. </html>

 小例子如下，当被绑定的textarea的内容发生变化的时候，就会执行钩子函数

componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。

unbind: 只调用一次， 指令与元素解绑时调用。

6.Vue.filter(id,[definition])注册或获取全局过滤器，主要用于在实例里面的数据不改变的情况下，在页面对渲染进dom的数据进行过滤处理，和angular中的过滤器用法一样

 

  1. // 注册
  2. Vue.filter('my-filter', function (value) {
  3. // 返回处理后的值
  4. })
  5. // getter，返回已注册的过滤器
  6. var myFilter = Vue.filter('my-filter')

 

简单全局过滤器和局部过滤器例子

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <script src="lib/Vue/vue.development.js"></script>
  7. </head>
  8. <body>
  9. <div id="app">
  10. <h3>数字变美元</h3>
  11. <input type="text" placeholder="数字变美元" v-model="num">
  12. <span>{{num|money}}</span>
  13. <h3>内容反转</h3>
  14. <input type="text" placeholder="内容反转" v-model="message">
  15. <span>{{message|reverse}}</span>
  16. </div>
  17. <script>
  18. Vue.filter("money",
  19. function(value){
  20. return "$"+value
  21. });
  22. var app=new Vue({
  23. el:"#app",
  24. data:{
  25. num:100,
  26. message:""
  27. },
  28. filters:{
  29. reverse:function(value){
  30. return value.split('').reverse().join('')
  31. }
  32. }
  33. })
  34. </script>
  35. </body>
  36. </html>

 

 过滤器可以管道式连接过滤

 

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <script src="lib/Vue/vue.development.js"></script>
  7. </head>
  8. <body>
  9. <div id="app">
  10. <h3>过滤字符串中的数字，并将剩余部分以数组形式输出</h3>
  11. <input type="text" placeholder="输入字符串" v-model="message">
  12. <span>{{message|delNum|arr}}</span>
  13. </div>
  14. <script>
  15. Vue.filter("delNum",
  16. function(value){
  17. return value.replace(/[0-9]/g,'')
  18. });
  19. Vue.filter("arr",
  20. function(value){
  21. return value.split('')
  22. }
  23. );
  24. var app=new Vue({
  25. el:"#app",
  26. data:{
  27. message:""
  28. }
  29. })
  30. </script>
  31. </body>
  32. </html>

7.Vue.component()在组件那一篇文章有说到，不做总结了

8.Vue.version用于获取当前Vue的版本号

9.Vue.use用于安装Vue插件

10.对于Vue.mixin的理解，引用别人的博文

vue中mixin的一点理解

    vue中提供了一种混合机制--mixins，用来更高效的实现组件内容的复用。最开始我一度认为这个和组件好像没啥区别。。后来发现错了。下面我们来看看mixins和普通情况下引入组件有什么区别？

     组件在引用之后相当于在父组件内开辟了一块单独的空间，来根据父组件props过来的值进行相应的操作，单本质上两者还是泾渭分明，相对独立。
     而mixins则是在引入组件之后，则是将组件内部的内容如data等方法、method等属性与父组件相应内容进行合并。相当于在引入后，父组件的各种属性方法都被扩充了。
     单纯组件引用：
          父组件 + 子组件 >>> 父组件 + 子组件
     mixins：
          父组件 + 子组件 >>> new父组件
 
     值得注意的是，在使用mixins时，父组件和子组件同时拥有着子组件内的各种属性方法，但这并不意味着他们同时共享、同时处理这些变量，两者之间除了合并，是不会进行任何通信的。最开始看到mixins的时候，天真的我似乎看到了一种向下的类似vuex的数据共享方案，心情十分激动啊。但是仔细一研究官方api和一些技术博客，才发现自己。。。天真。
 
 
 
我个人的拙见如下：
1.Vue在实例化成对象的那一刻，会通过mixin混合机制将方法直接添加到实例里面去
2.prototype方法直接将方法添加到Vue本身的构造器里面去

 

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <script src="lib/Vue/vue.development.js"></script>
  7. </head>
  8. <body>
  9. <div id="app"></div>
  10. <div id="app1"></div>
  11. <script>
  12. Vue.mixin({
  13. created:function(){
  14. this.hello()
  15. },
  16. methods:{
  17. hello:function(){
  18. console.log('这是混合器添加的hello方法')
  19. },
  20. say:function(){
  21. console.log('这是混合器添加的say方法')
  22. }
  23. }
  24. });
  25. Vue.prototype.myapp=function(){
  26. console.log("我是外来入侵者")
  27. };
  28. var app=new Vue({
  29. el:"#app",
  30. methods:{
  31. lsit:function(){
  32. console.log('这是app实例本身的list方法')
  33. },
  34. say:function(){
  35. console.log('这是app实例本身的say方法')
  36. }
  37. }
  39. });
  40. var app1=new Vue({
  41. el:"#app1",
  42. });
  43. app.hello();
  44. app.lsit();
  45. app.say();
  46. app1.hello();
  47. app1.say();
  48. app.myapp();
  49. console.log(app.__proto__)
  51. </script>
  52. </body>
  53. </html>

 

输出结果：

 

 大家可以看到

第一个输出的是混合器的hello方法，此刻刚开始创建实例app

第二个属于混合器的hello方法，因为app本身实例没有这个方法，所以是混合器为其添加的

第三个输出的是混合器的hello方法，此刻刚开始创建实例app1

第四个输出的是app本身的list方法

第五个输出的是app实例的say方法。因为app实例中用有该方法，会将混合器添加的say方法覆盖掉

对于六和七由于app1没有自己的hello和say方法，所以只能用混合器为他添加的方法

第八个属于Vue原型里面我们添加进去的myapp方法

我们再看一下Vue原型对象app.__proto__

 

 我们发现里面并没有混合方法，所以混合方法在创建实例对象的那一刻添加到实例对象里面了，但是里面却有myapp方法

 11.Vue.compile()在 render 函数中编译模板字符串。只在独立构建时有效

 

本文转载于：https://www.cnblogs.com/douyaer/p/7650140.html

posted @ 2018-07-24 12:11  ysx_小鱼  阅读(667)  评论(0)  编辑  收藏  举报