专栏首页郭少华(第二季)Vue2.0-全局API

(第二季)Vue2.0-全局API

全局API介绍

全局API并不在构造器里,而是先声明全局变量或者直接在Vue上定义一些新功能,Vue内置了一些全局API,说的简单些就是,在构造器外部用Vue提供给我们的API函数来定义新的功能。

Vue.directive 自定义指令

<div id="app">
        <div v-guosh="color">{{message}}</div>
        <p><button @click="add">ADD</button></p>
        <p><button onclick="unbind()">解绑</button></p>
    </div>
    <script type="text/javascript">
        function unbind(){
            app.$destroy(); //解除绑定
        }
        Vue.directive("guosh",{
            //el指令所绑定的元素,可以用来直接操作 DOM
            //binding 一个对象 
            bind:function(el,binding){//被绑定
                console.log(binding);
                console.log('1 - bind');
                el.style="color:"+binding.value;
            },
            inserted:function(){//绑定到节点
                console.log('2 - inserted');
            },
            update:function(){//组件更新
                console.log('3 - update');
            },
            componentUpdated:function(){//组件更新完成
                console.log('4 - componentUpdated');
            },
            unbind:function(){//解绑
                console.log('5 - bind');
            }

        });
        
        var app =  new Vue({
            el:'#app',
            data:{
                message:1,
                color:'green'
            },
            methods: {
                add:function(){
                    this.message++;
                }
            }
        })
    
    </script>

钩子函数

  • bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
  • inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。
  • update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
  • componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用。
  • unbind:只调用一次,指令与元素解绑时调用。

钩子函数参数

  • el:指令所绑定的元素,可以用来直接操作 DOM 。
  • binding:一个对象,包含以下属性:
    • name:指令名,不包括 v- 前缀 例如:guosh
    • value:指令的绑定值,例如:v-guosh="color" 中,绑定值为 green
    • oldValue:指令绑定的前一个值,仅在 updatecomponentUpdated 钩子中可用。无论值是否改变都可用。
    • expression:字符串形式的指令表达式。例如 v-guosh="color" 中,表达式为 "color"
    • arg:传给指令的参数,可选。例如 v-my-directive:foo 中,参数为 "foo"
    • modifiers:一个包含修饰符的对象。例如:v-my-directive.foo.bar 中,修饰符对象为 { foo: true, bar: true }
  • vnode:Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
  • oldVnode:上一个虚拟节点,仅在 updatecomponentUpdated 钩子中可用。

Vue.extend构造器的延伸

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

 <div id="author"></div>
    <script type="text/javascript">
        var authorURL = Vue.extend({
            template:"<p><a :href='authorUrl'>{{authorName}}</a></p>",
            data:function(){
                return{
                    authorName:'guosh',
                    authorUrl:'http://guoshaohua.cn'
                }
            }
        });
        //创建 authorUR 实例,并挂载到一个元素上
        new authorURL().$mount("#author");
    </script>

Vue.set全局操作

Vue.set 的作用就是在构造器外部操作构造器内部的数据、属性或者方法。比如在vue构造器内部定义了一个count为1的数据,我们在构造器外部定义了一个方法,要每次点击按钮给值加1.就需要用到Vue.set。

    <div id="app">
        {{count}}
        <ul>
            <li v-for="item in arr">
                {{item}}
            </li>
        </ul>
    </div>
    <button onclick="add();">add</button>
    <script type="text/javascript">
        function add(){
            Vue.set(app,'count',2);
            //把arr下标1的值改成dddd
            Vue.set(app.arr,1,'dddd');
        }
        var outData={
            count:1,
            arr:['aaa','bbb','ccc']
        }
        
        var app = new Vue({
            el:'#app',
            //引用外部数据
            data:outData
        })
    </script>

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

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

  • 当你利用索引直接设置一个项时,vue不会为我们自动更新。
  • 当你修改数组的长度时,vue不会为我们自动更新。 例如:
<div id="app">
        <ul>
            <li v-for=" aa in arr">{{aa}}</li>
        </ul>
       
    </div>
    <button onclick="add()">外部添加</button>
 
    <script type="text/javascript">
     
        function add(){
            console.log("我已经执行了");
           app.arr[1]='ddd';
           //Vue.set(app.arr,1,'ddd');
        }
        var outData={
            arr:['aaa','bbb','ccc']
        };
        var app=new Vue({
            el:'#app',
            data:outData
        })
    </script>

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

Vue的生命周期(钩子函数)

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

<div id="app">
        {{count}}
        <p><button @click="add">add</button></p> 
    </div>
    <button onclick="app.$destroy()">销毁</button>
    <script type="text/javascript">
        var app =  new Vue({
            el:"#app",
            data:{
                count:1
            },
            methods: {
                add:function(){
                    this.count++;
                }
            },
            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>

生命周期展示图.png

Template 制作模版

直接写在选项里的模板

    <div id="app">
        {{message}}
    </div>

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

直接在构造器里的template选项后边编写。这种写法比较直观,但是如果模板html代码太多,不建议这么写。

写在<template>标签里的模板

这种写法更像是在写HTML代码,就算不会写Vue的人,也可以制作页面

    <div id="app">
        {{message}}
    </div>
    <template id="add2">
            <h1 style="color:red">我标签模板</h1>
    </template>
    <script type="text/javascript">
        var app = new Vue({
            el:"#app",
            data:{
                message:'hello world'
            },
            template:"#add2"
        })
    </script>

写在<script>标签里的模板

这种写模板的方法,可以让模板文件从外部引入。

<div id="app">
        {{message}}
    </div>
    <script  type="x-template" id="add3">
            <h1 style="color:red">我script模板</h1>
    </script>
    <script type="text/javascript">
        var app = new Vue({
            el:"#app",
            data:{
                message:'hello world'
            },
            template:"#add3"
        })
    </script>

Component 初识组件

什么是组件?

组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。在有些情况下,组件也可以表现为用 is 特性进行了扩展的原生 HTML 元素。 所有的 Vue 组件同时也都是 Vue 的实例,所以可接受相同的选项对象 (除了一些根级特有的选项) 并提供相同的生命周期钩子。

全局注册组件

    <div id="app">
        <guosh></guosh>
    </div>
    
    <script type="text/javascript">
        Vue.component("guosh",{
            template:`<div style="color:red">我是全局组件</div>`
        })

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

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

局部注册组件

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

    <div id="app">
        <guo></guo>
    </div>
    
    <script type="text/javascript">
        var app = new Vue({
            el:"#app",
            //定义局部组件
            components: {
                "guo":{
                    template:"<div style='color:red'>我是局部组件</div>"
                }
            }
        })
    </script>

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

Component-props属性设置

定义属性并获取属性值

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

    <div id="app">
        <guo here="China"></guo>
    </div>
    
    <script type="text/javascript">

        var app = new Vue({
            el:"#app"
            //定义局部组件
            components: {
                "guo":{
                    template:"<div style='color:red'>属性值{{here}}</div>",
                    props: ['here']
                }
            }
        })
    </script>

属性种带'-'的处理方式

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

    <div id="app">
        <guo fom-here="fomChina" ></guo>
    </div>
    
    <script type="text/javascript">

        var app = new Vue({
            el:"#app",
            data:{
                message:'hello'
            },
            //定义局部组件
            components: {
                "guo":{
                    template:"<div style='color:red'>属性值{{fomHere}} </div>",
                    props: ['fomHere']
                }
            }
        })
    </script>

在构造器里向组件中传值

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

     <div id="app">
        <guo:heres="message"></guo>
    </div>
    
    <script type="text/javascript">

        var app = new Vue({
            el:"#app",
            data:{
                message:'hello'
            },
            //定义局部组件
            components: {
                "guo":{
                    template:"<div style='color:red'>属性值 {{heres}}</div>",
                    props: ['heres']
                }
            }
        })
    </script>

Component 父子组件关系

 //必须把子组件放到上面按顺序执行否则会找到不子组件
        //子组件
        var city={
            template:`<div style='color:green'>我是子组件</div>`
        }
        //父组件
        var guoComponent={
            template:`<div style='color:red'>我是父组件<city></city></div>`,
            components: {
                "city":city
            }
        }
        var app = new Vue({
            el:"#app",
            //定义局部组件
            components: {
                "guo":guoComponent
            }
        })
    </script>

Component 标签

<component></component>标签是Vue框架自定义的标签,它的用途就是可以动态绑定我们的组件,根据数据的不同更换不同的组件。

 <div id="app">
        <!--可以动态的使用下面定义的组件-->
        <component :is="who"></component>
        <button @click="changeComponent">更换</button>
    </div>
    
    <script type="text/javascript">
        var componentA={
            template:`<div style='color:red'>I'm componentA</div>`
        }
        var componentB={
            template:`<div style='color:green'>I'm componentB</div>`
        }

        var componentC={
            template:`<div style='color:pink'>I'm componentC</div>`
        }
        

        var app = new Vue({
            el:"#app",
            data:{
               who:"componentA" 
            },
            methods:{
                "changeComponent":function(){
                    if(this.who=="componentA"){
                        this.who="componentB";
                    }
                    else if(this.who=="componentB"){
                        this.who="componentC";
                    }
                    else{
                        this.who="componentA"; 
                    }

                }
            },
            components: {
                "componentA":componentA,
                "componentB":componentB,
                "componentC":componentC
            }
        })
    </script>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • (第三季)Vue2.0-选项

    扩展标签已经做好了,这时我们要在挂载时传递一个数字过去,我们就用到了propsData。 我们用propsData三步解决传值: 1、在全局扩展里加入pro...

    楠楠
  • (第四季)Vue实例和内置组件

    概述:实例就是在构造器外部操作构造器内部的属性选项或者方法,就叫做实例?实例的作用就是给原生的或者其他javascript框架一个融合的接口或者说是机会,让Vu...

    楠楠
  • (第一季)Vue2.0-内部指令

    Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核...

    楠楠
  • vue 组件基本使用

    组件是可复用的 Vue 实例,且带有一个名字。把这个组件作为自定义元素来使用。组件的好处是写一次可以进行任意次数的复用

    章鱼喵
  • 02Vue.js快速入门-Vue入门之数据绑定

    Vue框架很核心的功能就是双向的数据绑定。 双向是指:HTML标签数据 绑定到 Vue对象,另外反方向数据也是绑定的。通俗点说就是,Vue对象的改变会直接影响到...

    老马
  • 02-Vue入门之数据绑定

    2.1. 什么是双向绑定? Vue框架很核心的功能就是双向的数据绑定。 双向是指:HTML标签数据 绑定到 Vue对象,另外反方向数据也是绑定的。通俗点说就是,...

    老马
  • day86-ES6一般的语法和Vue的认识

    少年包青菜
  • [OHIF-Viewers]医疗数字阅片-医学影像-获取焦点的2种方式-ref

    前言 在React中,只要props或state发生改变,则render()方法必定执行,即DOM会更新。然React更新DOM时,可能会导致已经获取焦点的元素...

    landv
  • Vue—前端框架

    3、在外部可以通过vue对象名.属性的方式获取属性值,在vue对象内部,通过this.属性的方式获取属性值

    nbsp-nbsp
  • VUE+WebPack:开发一款太空版植物大战僵尸的前端页游

    望月从良

扫码关注云+社区

领取腾讯云代金券