Vue从入门到放弃(二)——Vue全局API

最新推荐文章于 2024-08-08 22:38:20 发布

凤凰院凶真Z

最新推荐文章于 2024-08-08 22:38:20 发布

阅读量228

点赞数

分类专栏： Vue从入门到放弃文章标签： Vue

本文链接：https://blog.csdn.net/tuohongweng3138/article/details/85227491

版权

Vue从入门到放弃专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章目录

1.Vue.directive注册自定义指令
- 1.1注册自定义标签
- 1.2自定义标签声明周期
2.Vue.extend
3.Template制作模板

1.Vue.directive注册自定义指令

前面我们都是使用vue提供给我们的指令，现在我们自己来注册一个指令。比如我们自定义一个能控制DOM节点的<cc>标签。

1.1注册自定义标签

  	<div id="app">
        <p v-cc="color">{{count}}</p>
    </div>
    <script>
        Vue.directive("cc", function (el, binding) {
            console.log(el);//输出可以看出el是cc指令所在的dom节点:<p color="green">10</p>
            console.log(binding);//binding是一个对象，包含很多指令信息
            console.log(binding.value);//binding为指令的值：green
            console.log(binding.name);//binding为指令的名称cc
            el.style = "color:" + binding.value;//
        });
        var app = new Vue({
            el: '#app',
            data: {
                count: 10,
                color: 'green'
            },
        });
    </script>

注意此时Vue.directive要写在new Vue之前，否则先挂载，指令无法生效

代码解析Vue.directive("cc", function (el, binding)
- Vue.directive注册自定义指令的全局API
- 第一个参数是自定义指令的名字

1.2自定义标签声明周期

我们先看一段代码：

<body>
    <div id="app">
        <p v-cc="color">{{count}}</p>
        <button @click="add">ADD</button>
    </div>
    <script>
        Vue.directive("cc", {
            bind: function () {//只调用一次，指令第一次绑定到元素时调用
                console.log("1-被绑定");
            },
            inserted: function () {//(父节点存在即调用)
                console.log("2-被绑定元素插入到父节点时调用")
            },
            update: function () {//被绑定的元素所在的模板更新时调用，无论绑定值是否变化
                console.log("3-dom变化时")
            },
            componentUpdated: function () {//被绑定元素所在模板完成一次更新周期时调用
                console.log("4-组件更新时")
            },
            unbind: function () {
                console.log("5-解除绑定时")
            }
        });
        var app = new Vue({
            el: '#app',
            data: {
                count: 10,
                color: 'green'
            },
            methods: {
                add: function () {
                    this.count++
                }
            }
        });
    </script>
    <style>
    </style>
</body>
console端输出：
1-被绑定
2-被绑定元素插入到父节点时调用
点击按钮时输出：
3-dom变化时
4-组件更新时

这一段即是自定义指令的生命周期，我们可以在勾子函数中做很多事情

Vue.directive("cc", {
            bind: function () {//只调用一次，指令第一次绑定到元素时调用
                console.log("1-被绑定");
            },
            inserted: function () {//(父节点存在即调用)
                console.log("2-被绑定元素插入到父节点时调用")
            },
            update: function () {//被绑定的元素所在的模板更新时调用，无论绑定值是否变化
                console.log("3-dom变化时")
            },
            componentUpdated: function () {//被绑定元素所在模板完成一次更新周期时调用
                console.log("4-组件更新时")
            },
            unbind: function () {
                console.log("5-解除绑定时")
            }
        });

2.Vue.extend

返回的是一个带有预设选项的Vue实例的拓展。好吧，我也懵了。我的理解是它是Vue实例的子类，继承了Vue实例的选项，并且可以自己再增加功能。具体怎么用的话，你可以理解为可以使用这个API来自定义自己的标签，在页面中使用。

比如这里我们定义一个<myTag>,你在页面上使用这个标签时，呈现的效果就是显示出“我的标签”这几个字

<body>
    <div id="app">
        <myTag></myTag>
    </div>
    <script type="text/javascript">
        var myTag=Vue.extend({
           template:"<p>{{message}}</p>",
           data () {
               return {
                   message:'我的标签'
               }
           }
        });
        new myTag().$mount('myTag')
    </script>

使用$mount()挂载到要生效的自定义标签上
使用Vue.component内部其实调用的也是Vue.extend

3.Template制作模板

3.1直接写在Vue实例里，template是实例的一个选项

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

3.2写在`<template>`标签里

写在<template>标签里，然后在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>

3.3写在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>