Vue全局API

2017-11-02  本文已影响0人  PYFang

一、Vue.directive自定义指令

可以定义一些属于自己的指令，比如我们要定义一个v-fang的指令，作用就是让文字变成红色。在页面上有一个数字为10，数字的下面有一个按钮，我们每点击一次按钮后，数字加1。
示例：

<div id="app">
<div v-fang="color">{{num}}</div>
<p><button @click="add">ADD</button></p>
</div>

<script>
Vue.directive('fang',function(el,binding){
  el.style='color:'+binding.value
})

let app = new Vue({
  el: '#app',
  data: {
    num: 10,
    color:'red'
  },
  methods:{
    add:function(){
      this.num++
    }
  }
})
</script>

自定义指令中传递的参数

el: 指令所绑定的元素，可以用来直接操作DOM。
binding: 一个对象，包含指令的很多信息。
vnode: Vue编译生成的虚拟节点。

自定义指令的生命周期

自定义指令有五个生命周期（也叫钩子函数），分别是bind,inserted,update,componentUpdated,unbind

1、bind:只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个绑定时执行一次的初始化动作。
2、inserted:被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于document中）。
3、update:被绑定于元素所在的模板更新时调用，而无论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新。
4、componentUpdated:被绑定元素所在模板完成一次更新周期时调用。
5、unbind:只调用一次，指令与元素解绑时调用。

bind:function(){//被绑定
 console.log('1 - bind');
},
inserted:function(){//绑定到节点
  console.log('2 - inserted');
},
update:function(){//组件更新
  console.log('3 - update');
},
componentUpdated:function(){//组件更新完成
  console.log('4 - componentUpdated');
},
unbind:function(){//解绑
  console.log('1 - bind');
}

二、Vue.extend构造器的延伸

什么是Vue.extend？
Vue.extend 返回的是一个“扩展实例构造器”,也就是预设了部分选项的Vue实例构造器。经常服务于Vue.component用来生成组件，可以简单理解为当在模板中遇到该组件名称作为标签的自定义元素时，会自动调用“扩展实例构造器”来生产组件实例，并挂载到自定义元素上。

自定义无参数标签
我们想象一个需求，需求是这样的，要在博客页面多处显示作者的网名，并在网名上直接有链接地址。我们希望在html中只需要写<author></author> ，这和自定义组件很像，但是他没有传递任何参数，只是个静态标签。

我们的Vue.extend该登场了，我们先用它来编写一个扩展实例构造器。
代码如下：

<h1>vue.extend</h1>
<hr>
<author></author>
<script>
  var authorExtend = Vue.extend({
    template:'<p><a :href="authorUrl">{{authorName}}</a></p>',
    data:function(){
      return {
        authorName:'Fang',
        authorUrl:'https://i.loli.net/2017/11/02/59fa818fdd1b1.jpg'
      }
    }
  })
  //这时html中的标签还是不起作用的，因为扩展实例构造器是需要挂载的，我们再进行一次挂载
  new authorExtend().$mount('author')
</script>

挂载到普通标签上
还可以通过HTML标签上的id或者class来生成扩展实例构造器，Vue.extend里的代码是一样的，只是在挂载的时候，我们用类似jquery的选择器的方法，来进行挂载就可以了。

new authorExtend().$mount('#author');

三、Vue.set全局操作

Vue.set 的作用就是在构造器外部操作构造器内部的数据、属性或者方法。

引用构造器外部数据：

什么是外部数据，就是不在Vue构造器里里的data处声明，而是在构造器外部声明，然后在data处引用就可以了。外部数据的加入让程序更加灵活，我们可以在外部获取任何想要的数据形式，然后让data引用。
看一个简单的代码：

//在构造器外部声明数据
 var outData={
    count:1,
    goodName:'car'
};
var app=new Vue({
    el:'#app',
    //引用外部数据
    data:outData
})

在外部改变数据的三种方法：

 function add(){
  Vue.set(outData,'count',4) //用Vue.set改变
  app.count++ //用Vue对象的方法添加
  outData.count++ //直接操作外部数据
 }

其实这三种方式都可以操作外部的数据，Vue也给我们增加了一种操作外部数据的方法。

为什么要有Vue.set的存在?

由于Javascript的限制，Vue不能自动检测以下变动的数组。

这时我们的界面是不会自动跟新数组的，我们需要用Vue.set(app.arr,1,’ddd’)来设置改变，vue才会给我们自动更新，这就是Vue.set存在的意义。

四、Vue的生命周期（钩子函数）

Vue一共有10个生命周期函数，我们可以利用这些函数在vue的每个阶段都进行操作数据或者改变内容。
点击进入生命周期图

示例：

<div id="app">
    {{message}}
    <p><button @click="jia">加分</button></p>
</div>
    <button onclick="app.$destroy()">销毁</button>

<script type="text/javascript">
    var app=new Vue({
        el:'#app',
        data:{
            message:1
        },
        methods:{
            jia:function(){
                this.message ++;
            }
        },
        beforeCreate:function(){
            console.log('1-beforeCreate 初始化之后');
        },
        created:function(){
            console.log('2-created 创建完成');
        },
        beforeMount:function(){
            console.log('3-beforeMount 挂载之前');
        },
        mounted:function(){
            console.log('4-mounted 被创建');
        },
        beforeUpdate:function(){
            console.log('5-beforeUpdate 数据更新前');
        },
        updated:function(){
            console.log('6-updated 被更新后');
        },
        activated:function(){
            console.log('7-activated');
        },
        deactivated:function(){
            console.log('8-deactivated');
        },
        beforeDestroy:function(){
            console.log('9-beforeDestroy 销毁之前');
        },
        destroyed:function(){
            console.log('10-destroyed 销毁之后')
        }

    })
</script>

五、Template 制作模版

Template的三种写法

直接写在选项里的模板

var app=new Vue({
 el:'#app',
 data:{
     message:'hello Vue!'
  },
 template:`
    <h1 style="color:green">我是选项模板</h1>
 `
})

这里需要注意的是模板的标识不是单引号和双引号，而是在英文输入状态下的波浪键。

写在<template>标签里的模板
这种写法更像是在写HTML代码，就算不会写Vue的人，也可以制作页面。

<template id="demo2">
         <h2 style="color:red">我是template标签模板</h2>
</template>

<script>
    var app=new Vue({
        el:'#app'
        template:'#demo2'
    })
</script>

写在<script>标签里的模板
这种写模板的方法，可以让模板文件从外部引入。

<script type="x-template" id="demo3">
    <h2 style="color:blue">我是script标签模板</h2>
</script>

<script>
    var app=new Vue({
        el:'#app'
        template:'#demo3'
    })
</script>

六、Component 初识组件

全局化注册组件

全局化就是在构造器的外部用Vue.component来注册
示例：

<div id="app">
  <fang></fang>
</div>

<script>
  Vue.component('fang',{
    template:`<div style="color:red">我是全局的fang组件</div>`
  })

  let app = new Vue({
    el: '#app'
  })

我们在javascript里注册了一个组件，在HTML中调用了他。这就是最简单的一个组件的编写方法，并且它可以放到多个构造器的作用域里。

局部注册组件

局部注册组件和全局注册组件是向对应的，局部注册的组件只能在组件注册的作用域里进行使用，其他作用域使用无效。

<div id="app">
  <panda />
</div>

<script>
  let app = new Vue({
    el: '#app',
    components:{
      'panda':{
        template:`<div style="color:green">我是局部的panda组件</div>`
      }
    }
  })

从代码中你可以看出局部注册其实就是写在构造器里，但是你需要注意的是，构造器里的components 是加s的，而全局注册是不加s的。

组件和指令的区别
组件注册的是一个标签，而指令注册的是已有标签里的一个属性。在实际开发中我们还是用组件比较多，指令用的比较少。因为指令看起来封装的没那么好，这只是个人观点。

七、Component 组件props 属性设置

定义属性并获取属性值

定义属性我们需要用props选项，加上数组形式的属性名称，例如：props:[‘here’]。在组件的模板里读出属性值只需要用插值的形式，例如{{ here }}。

<div id="app">
  <panda here="China"></panda>
</div>

<script>
    var app=new Vue({
        el:'#app',
        components:{
            'panda':{
                template:`<div style='color:red'>Panda from {{ here }}.</div>`,
                props:['here']
            }
        }
    })
</script>

上面的代码定义了panda的组件，并用props设置了here的属性值，在here属性值里传递了China给组件。

最后输出的结果是红色字体的Panda from China.

属性中带’-‘的处理方式

我们在写属性时经常会加入’-‘来进行分词，比如：<panda from-here=”China”></panda>，那这时我们在props里如果写成props:[‘form-here’]是错误的，我们必须用小驼峰式写法props:[‘formHere’]。

<panda from-here="China"></panda>
var app=new Vue({
        el:'#app',
        components:{
            "panda":{
                template:`<div style="color:red;">Panda from {{ fromHere }}</div>`,
                props:['fromHere']
            }
        }
    })

PS：因为这里有坑，所以还是少用-为好。

在构造器里向组件中传值

把构造器中data的值传递给组件，我们只要进行绑定就可以了。就是我们第一季学的v-bind:xxx.

<panda v-bind:here="message"></panda>
var app=new Vue({
        el:'#app',
        data:{
           message:'China' 
        },
        components:{
            "panda":{
                template:`<div style="color:red;">Panda from {{ here }}.</div>`,
                props:['here']
            }
        }
    })

也可直接省略v-bind 直接使用：

<panda :here="message"></panda>

八、Component 父子组件关系

构造器外部写局部注册组件

把组件编写的代码放到构造器外部或者说单独文件。
我们需要先声明一个对象,对象里就是组件的内容并在构造器里引用

<div id="app">
  <panda></panda>
</div>
var panda = {
 template:`<div>Panda from China!</div>`
}
var app=new Vue({
  el:'#app',
  components:{
      'panda':panda
  }
})

父子组件的嵌套
在div里面嵌套一个city

<div id="app">
  <panda></panda>
</div>

<script>
  var city = {
    template:`<div style='color:green'>siChuan from China!</div>`
  }
  var panda = {
      template:`
      <div style='color:red'>
      Panda from China!
      <city></city>
      </div>
      `,
      components:{
          'city':city
      }
  }

 var app=new Vue({
  el:'#app',
  components:{
      'panda':panda
  }
})
</script>

九、Component 标签

<component></component>标签是Vue框架自定义的标签，它的用途就是可以动态绑定我们的组件，根据数据的不同更换不同的组件。
示例：
我们先在构造器外部定义三个不同的组件，分别是componentA,componentB和componentC.

var componentA = {
  template: `<div style='color:green'>I'm componentA!</div>`
}
var componentB = {
  template: `<div style='color:red'>I'm componentB!</div>`
}
var componentC = {
  template: `<div style='color:blue'>I'm componentC!</div>`
}

我们在构造器的components选项里注册这三个组件。

components: {
    'componentA': componentA,
    'componentB': componentB,
    'componentC': componentC
  }

我们在html里插入component标签，并绑定who数据，根据who的值不同，调用不同的组件。

<component v-bind:is="who"></component>
data: {
    who: 'componentA'
  }
//根据who的值改变而改变

再根据原有的基础上提高一下，给页面加个按钮，每点以下更换一个组件。

添加一个methods属性
methods: {
    changeConponent: function () {
      if (this.who === 'componentA') {
        this.who = 'componentB'
      } else if (this.who === 'componentB') {
        this.who = 'componentC'
      } else {
        this.who = 'componentA'
      }
    }
  }

点击button的同时改变component标签里的值

上一篇 下一篇

猜你喜欢

热点阅读