0
0

VUE [入门篇(三)]

Vue入门

1.6.自定义指令

vue中的自定义指令通过Vue.directive来实现，主要完成内置指令不能完成的一些事情

1、示例代码

<!DOCTYPE html>
    <html lang="en">
        <head>
        <meta charset="UTF-8">
            <title>Vue入门之自定义指令</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <div v-test="color">
            {{num}}
                </div>
</div>
<button onclick="unbindApp()">解绑</button>

<script type="text/javascript">
    // 解绑
    function unbindApp() {
    app.$destroy();
}

// 自定义指令
Vue.directive("test",{
    //1-被绑定
    bind:function (el, binding, vnode) {
        console.log("1-bind 被绑定");
        console.log("el:",el);
        console.log("binding:",binding);
        console.log("vnode:",vnode);
        el.style.color = binding.value;
    },
    //2-被插入
    inserted:function (el, binding, vnode) {
        console.log("2-inserted 被插入");
    },
    //3-更新
    update:function (el, binding, vnode) {
        console.log("3-update 更新");
    },
    //4-更新完成
    componentUpdated:function (el, binding, vnode) {
        console.log("4-componentUpdated 更新完成");
    },
    //5-解绑
    unbind:function (el, binding, vnode) {
        console.log("5-unbind 解绑");
    }
});

var app = new Vue({
    el:'#app',
    data:{
        num: 123,
        color:'red'
    }
})
</script>
</body>
</html>

2、调试步骤

（1）chrome打开控制器查看
（2）控制台输入“app.num=’通过控制台设置的新name’”
（3）点击解绑按钮

3、参数说明

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

4、生命周期

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

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

1.7.组件基础

1、组件注册

（1）全局注册

// script
Vue.component('button-counter', {
    data: function () {
        return {
            count: 0
        }
    },
    template: '<button v-on:click="count++">全局组件显示： {{ count }}</button>'
});

new Vue({
    el: '#app'
});

// html使用
<button-counter></button-counter>

（2）局部注册

// script
new Vue({
    el: '#app',
    components:{
        "button-inner":{
            data: function() {
                return {
                    inner: 0
                }
            },
            template: '<button v-on:click="inner++">局部组件显示： {{ inner }}</button>'
        }
    }
});

// html使用
<button-inner></button-inner>

2、props属性传值

（1）属性取值

// script
new Vue({
    el: '#app',
    components:{
        "button-props":{
            template:`<div style="color:red;">参数1： {{ here }}:---参数2： {{fromHere}}</div>`,
            props:['here', 'fromHere']
        }
    }
});

// html使用
<button-props here="hello" from-here="world"></button-props>

PS：如果属性带“-”，props中需要驼峰取值

（2）在构造器向组件传值（v-bind）

// script
new Vue({
    el: '#app',
    data: {
        message: 'hello'
    },
    components:{
        "button-props":{
            template:`<div style="color:red;">参数1： {{ here }}:---参数2： {{fromHere}}</div>`,
            props:['here', 'fromHere']
        }
    }
});

// html使用
<button-props v-bind:here="message" :from-here="message"></button-props>

3、父子组件

// script
// 子组件
var city = {
    template:`<div>Sichuan of China</div>`
}
// 父组件
var parent = {
    template:
    `<div>
    <p> Panda from China!</p>
    <city></city>
    </div>`,
    components:{
        "city": city
    }
}

// 实例化
new Vue({
    el: '#app',
    // 定义局部组件
    components:{
        // 组件注册
        "parent": parent
    }
});

// html使用
<parent></parent>

4、完整示例代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Vue入门之组件</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <!-- 全局组件 -->
            <div>
                <button-counter></button-counter>
            </div>
            <!-- 局部组件 -->
            <div>
                <button-inner></button-inner>
            </div>
            <!-- 常规属性传值 -->
            <div>
                <button-props here="hello" from-here="world"></button-props>
            </div>
            <!-- v-bind传值 -->
            <div>
                <button-props v-bind:here="message" :from-here="message"></button-props>
            </div>
            <!-- 父子组件调用 -->
            <div>
                <parent></parent>
            </div>

        </div>

        <script type="text/javascript">
            // 定义全局组件
            Vue.component('button-counter', {
                data: function() {
                    return {
                        count: 0
                    }
                },
                template: '<button v-on:click="count++">全局组件显示： {{ count }}</button>'
            });

            // 子组件
            var city = {
                template: `<div>Sichuan of China</div>`
            }
            // 父组件
            var parent = {
                template: `<div>
                <p> Panda from China!</p>
                <city></city>
            </div>`,
                components: {
                    "city": city
                }
            }

            // 实例化
            new Vue({
                el: '#app',
                data: {
                    message: 'hello'
                },
                // 定义局部组件
                components: {
                    "button-inner": {
                        data: function() {
                            return {
                                inner: 0
                            }
                        },
                        template: '<button v-on:click="inner++">局部组件显示： {{ inner }}</button>'
                    },
                    // 取值
                    "button-props": {
                        template: `<div style="color:red;">参数1： {{ here }}:---参数2： {{fromHere}}</div>`,
                        props: ['here', 'fromHere']
                    },
                    // 组件注册
                    "parent": parent
                }
            });
        </script>
    </body>
</html>

1.8.制作模板

vue中的模板使用template来实现

1、选项模板

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

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

2、<template>标签模板

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

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

3、<script>标签模板

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

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

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

4、完整示例代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Vue入门之组件</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <!-- template标签模板 -->
            <template id="demo2">
                <h2 style="color:red">我是template标签模板</h2>
            </template>
        </div>

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

        <script type="text/javascript">
            // 实例化
            new Vue({
                el: '#app',
                data: {
                    message: 'hello'
                },
                // 选项模板
                //template:`<h1 style="color:red">我是选项模板</h1>`
                //template:'#demo2'
                template: '#demo3'
            });
        </script>
    </body>
</html>

1.9.插槽slot

插槽，也就是slot，是组件的一块HTML模板(占位符)，一个slot最核心的两个问题是显不显示和怎样显示

1、单个slot

单个插槽，别名默认插槽、匿名插槽，不用设置name属性

<div id="app">
    <children1>
    <span>12345</span>
</children1>
</div>

<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        components: {
            children1: {
                template: "<button><slot></slot>单个插槽</button>"
            }
        }
    });
</script>

2、具名slot

插槽加了name属性，就变成了具名插槽。具名插槽可以在一个组件中出现N次，出现在不同的位置

<div id="app">
    <children2>
    <span slot="first" @click="tobeknow">12345</span>
<span slot="second">56789</span>
</children2>
</div>

<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        methods: {
            tobeknow: function () {
                console.log("It is the parent's method");
            }
        },
        components: {
            children2: {//这个无返回值，不会继续派发  
                template: "<button><slot name='first'></slot>具名插槽，<slot name='second'></slot></button>"
            }
        }
    });
</script>

3、作用域slot

vue2.5版本中slot-scope取代了scope，来实现作用域插槽，主要用在组件调用中，具体在template标签上面使用slot-scope来获取插槽slot上面的属性值，获取值的为一个对象，slot-scope=”它可以取任意字符串”，在element-ui的组件中经常看到。

<div id="app">
    <!-- 将数据传递给组件 -->
    <tb-list :data="data">
        <!-- 获取slot上面的值 -->
        <template slot-scope="scope">
            <p>索引：{{JSON.stringify(scope)}}</p>
            <p>索引：{{scope.$index}}</p>
            <p>姓名:{{scope.row.name}}</p>
            <p>年龄: {{scope.row.age}}</p>
            <p>性别: {{scope.row.sex}}</p>
        </template>
    </tb-list>
</div>

<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            data: [{
                name: 'kongzhi1',
                age: '29',
                sex: 'man'
            }]
        },
        components: {
            // 作用域slot
            'tb-list': {
                template:
                `<ul>
                <li v-for="(item, index) in data">
                <slot :row="item" :$index="index"></slot>
                </li>
                </ul>`,
                // 获取值
                props: ['data']
            }
        }
    });
</script>

4、完整示例代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Vue入门之slot</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <children1>
                <span>12345</span>
            </children1>
            
            <children2>
                <span slot="first" @click="tobeknow">12345</span>
                <span slot="second">56789</span>
            </children2>
            
            <!-- 将数据传递给组件 -->
            <tb-list :data="data">
                <!-- 获取slot上面的值 -->
                <template slot-scope="scope">
<p>索引：{{JSON.stringify(scope)}}</p>
<p>索引：{{scope.$index}}</p>
<p>姓名:{{scope.row.name}}</p>
<p>年龄: {{scope.row.age}}</p>
<p>性别: {{scope.row.sex}}</p>
                </template>
            </tb-list>
        </div>
        
        <script type="text/javascript">
            var app = new Vue({
                el: '#app',
                data: {
                    data: [{
                        name: 'kongzhi1',
                        age: '29',
                        sex: 'man'
                    }]
                },
                methods: {
                    tobeknow: function() {
                        console.log("It is the parent's method");
                    }
                },
                components: {
                    // 单个slot
                    children1: {
                        template: "<button><slot></slot>单个插槽</button>"
                    },
                    // 具名slot
                    children2: {
                        template: "<button><slot name='first'></slot>具名插槽，<slot name='second'></slot></button>"
                    },
                    // 作用域slot
                    'tb-list': {
                        template: `<ul>
                        <li v-for="(item, index) in data">
                        <slot :row="item" :$index="index"></slot>
            </li>
            </ul>`,
                        // 获取值
                        props: ['data']
                    }
                }
            });
        </script>
    </body>
</html>
标签： vue.js 前端 javascript
本文转载自: https://blog.csdn.net/LKS_010620/article/details/126147061
版权归原作者 轻狂客_零度 所有， 如有侵权，请联系我们删除。
登录后发布评论

“VUE [入门篇(三)]”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

Drogue Device：构建高效安全的嵌入式IoT应用

Closure Rules for Bazel：构建高效、安全的JavaScript项目

ubuntu-server（22.04）安装

Linux--守护进程与会话

【网络】UDP协议

微服务实战系列之玩转Docker（十五）

VScode+STM32开发环境搭建

文章导航