vue2.0基础(二、全局API)

2020-08-17 本文已影响0人 zZ_d205

一、自定义指令

自定义指令中传递的三个参数

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

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

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

 <div id="app">
        <div v-jspang="color">{{num}}</div>
        <p><button @click="add">ADD</button></p>
    </div>
    <p>
        <button onclick="unbing()">解绑</button>
    </p>
    <script>
        // 解绑方法
        function unbing(){
            app.$destroy();
        }
        // 自定义组件
        // Vue.directive('jspang',function(el,binding){
        //     console.log(el);
        //     console.log(binding);
        //     el.style="color:"+binding.value;

        // }) 

        Vue.directive('jspang', {
            bind: function (el,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: {
                num: 10,
                color: "red"
            },
            methods: {
                add: function () {
                    this.num++;
                }
            }
        })
    </script>

二、Vue.extend构造器的延伸

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

<author></author>
    <div id="author"></div>  
    <script>
        var authorExtend=Vue.extend({
            template:"<p><a :href='authorUrl'>{{authorName}}</a></p>",
            data:function(){
                return{
                    authorName:'JSPang',
                    authorUrl:'http://jspang.com'
                }
            }
        })

        new authorExtend().$mount("author");
        new authorExtend().$mount("#author");
    
    </script>

三、vue.set全局操作

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

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

当你利用索引直接设置一个项时，vue不会为我们自动更新。
当你修改数组的长度时，vue不会为我们自动更新。

看一段代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
    <title>Vue.set 全局操作</title>
</head>
<body>
    <h1>Vue.set 全局操作</h1>
    <hr>
    <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>
</body>
</html>

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <script type="text/javascript" src="../assets/js/vue.js"></script>
   <title>构造器的声明周期</title>
</head>
<body>
   <h1>构造器的声明周期</h1>
   <hr>
   <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>
</body>
</html>

五、Template 制作模版

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

javascript代码：

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

这里需要注意的是模板的标识不是单引号和双引号，而是，就是Tab上面的键。反引号。

二、写在template标签里的模板

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

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

    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            data:{
                message:'hello Vue!'
            },
            template:'#demo2'
        })
    </script>

三、写在script标签里的模板

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

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

    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            data:{
                message:'hello Vue!'
            },
            template:'#demo3'
        })
    </script>

六、Component 组件

一、全局注册和局部注册

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件</title>
    <script src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>组件</h1>
    <hr>
    <div id="app">
        <jspang></jspang>
        <panda></panda>
    </div>
    <div id="ppa">
        <jspang></jspang>
    </div>

    <script>
        // 全局组件的定义
        Vue.component('jspang',{
            template:`
            <h2  style="color: red;">我是全局组件</h2>
            `
        })
        var app= new Vue({
            el:'#app',
            data:{
               
            },
            // 局部组件的定义
            components:{
                "panda":{
                    template:`
            <h2  style="color: green;">我是局部组件</h2>
            `
                }
            }
        })
        var ppa= new Vue({
            el:'#ppa',
            data:{
               
            }
        })
    </script>
</body>
</html>

组件和指令的区别]

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

二、 Component 组件props 属性设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件2</title>
    <script src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>组件2</h1>
    <hr>
    <div id="app">
        <panda :here="message"></panda>
    </div>


    <script>
      
        var app= new Vue({
            el:'#app',
            data:{
               message:"sichuang"
            },
            // 局部组件的定义
            components:{
                "panda":{
                    template:`
            <h2  style="color: green;">panda from {{here}}</h2>
            `,
            props:[
                'here'
            ]
                },

            }
        })
     
    </script>
</body>
</html>

### 一、定义属性并获取属性值

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

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

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

html文件：

<panda from-here="China"></panda>

javascript文件：

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

PS：因为这里有坑，所以还是少用-为好
### 三、在构造器里向组件中传值

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

我们直接看代码:

Html文件：

<panda v-bind:here="message"></panda>

javascript文件：

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

三、Component 父子组件关系

在实际开发中我们经常会遇到在一个自定义组件中要使用其他自定义组件，这就需要一个父子组件关系。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件3</title>
    <script src="../assets/js/vue.js"></script>
</head>

<body>
    <h1>组件3</h1>
    <hr>
    <div id="app">
        <panda :here="message"></panda>
    </div>


    <script>
        var city={
            template: `
            <h2  style="color: green;">sichuang from china</h2>
            `,
        }
        var panda = {
            template: `
            <div>
              <h2  style="color: red;">panda from china</h2>
              <city></city>
            </div>
            `,
            components:{
                "city":city
            }
        }
       
        var app = new Vue({
            el: '#app',
            data: {
                message: "sichuang"
            },
            // 局部组件的定义
            components: {
                "panda": panda
            }

        })
    </script>
</body>

</html>

四、 Component 标签

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件4</title>
    <script src="../assets/js/vue.js"></script>
</head>

<body>
    <h1>组件4</h1>
    <hr>
    <div id="app">
        <!-- 动态使用组件 -->
        <component :is=who></component>
        <button @click="changeButton">changeButton</button>
    </div>


    <script>
        var componentA = {
            template: `<div>I'm componentA</div>`
        }
        var componentB = {
            template: `<div>I'm componentB</div>`
        }
        var componentC = {
            template: `<div>I'm componentC</div>`
        }


        var app = new Vue({
            el: '#app',
            data: {
                who:"componentB"
            },
            // 局部组件的定义
            components: {
                "componentA":componentA,
                "componentB":componentB,
                "componentC":componentC,
            },
            methods:{
                changeButton(){
                    if(this.who=="componentA"){
                        this.who="componentB";
                    }else if(this.who=="componentB"){
                        this.who="componentC";
                    }else{
                        this.who="componentA";
                    }
                }
            }

        })
    </script>
</body>

</html>

vue2.0基础(二、全局API)

一、自定义指令

二、Vue.extend构造器的延伸

三、vue.set全局操作

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

五、Template 制作模版

六、Component 组件

一、全局注册和局部注册

二、 Component 组件props 属性设置

三、Component 父子组件关系

四、 Component 标签

猜你喜欢

热点阅读

vue2.0基础(二、全局API)

一、自定义指令

二、Vue.extend构造器的延伸

三、vue.set全局操作

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

五、Template 制作模版

六、Component 组件

一、 全局注册和局部注册

二、 Component 组件props 属性设置

三、Component 父子组件关系

四、 Component 标签

猜你喜欢

热点阅读

一、全局注册和局部注册