(第二季)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 条评论
登录 后参与评论

相关文章

来自专栏GreenLeaves

Vue.js系列之三模板语法

Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ,...

22910
来自专栏技术墨客

React学习(6)—— 高阶应用:非受控组件

在大部分情况下,推荐使用 受控组件 来实现表单、输入框等状态控制。在受控组件中,表单等数据都有React组件自己处理。这里将介绍另外一种非受控组件,表单的数据有...

592
来自专栏前端布道

Angular开发实践(四):组件之间的交互

在Angular应用开发中,组件可以说是随处可见的。本篇文章将介绍几种常见的组件通讯场景,也就是让两个或多个组件之间交互的方法。 根据数据的传递方向,分为父组件...

4948
来自专栏AndroidTv

前端入门6-JavaScript客户端api&jQuery

作为一个前端小白,入门跟着这四个来源学习,感谢作者的分享,在其基础上,通过自己的理解,梳理出的知识点,或许有遗漏,或许有些理解是错误的,如有发现,欢迎指点下。

1224
来自专栏机器学习实践二三事

Shell && Vim快捷键

刚买到了自己一直想买的HHKB pro 2 type S,不得不说手感什么的确实没让我失望,重点是Ctrl的位置很适合类unix环境啊,不会快捷键都不好意思敲这...

2005
来自专栏web前端-

JQuery语法

您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中:

1082
来自专栏前端说吧

CSS3中的animation动画

2915
来自专栏超然的博客

不容忽略的——CSS规范

         当A、B、C、...它们类型相同且外形相似区别不大,那么就以它们中出现率最高的做成基类,其他做成基类的扩展。

1082
来自专栏Golang语言社区

golang简单位运算示例

文实例讲述了golang简单位运算。分享给大家供大家参考,具体如下: // http://play.golang.org/p/idG7Ri_krU packa...

3609
来自专栏Modeng的专栏

Vue2.5笔记:v-if 和 v-show指令

熟悉 Angular 的同学对指令肯定不会陌生,Vue中也借鉴了指令这一特性,在 Vue 中指令都是带有 v-的特殊属性,那么指令有什么作用呢?

891

扫码关注云+社区

领取腾讯云代金券