• vue中的重要特性


    一、vue中的自定义组件

    html的代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>vue1</title>
        <script type="text/javascript" src="../vue.js"></script>
    </head>
    <body>
        <div id="app">
            <my-component my-name="huhx"></my-component>
        </div>
        <script type="text/javascript" src="js/vue3.js"></script>
    </body>
    </html>

    vue3.js的代码:

    // 定义
    var MyComponent = Vue.extend({
        template: '<div>A custom component!{{myName}}</div>',
        props: ['myName']
    })
    
    // 注册
    Vue.component('my-component', MyComponent);
    
    // 创建根实例
    var ap = new Vue({
        el: '#app',
    })

    运行效果如下:

    二、vue中的自定义指令

     html的代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>vue4</title>
        <script type="text/javascript" src="../vue.js"></script>
    </head>
    <body>
        <div id="app">
             <div v-my-directive="someValue">{{msg}}</div>
        </div>
        <script type="text/javascript" src="js/vue4.js"></script>
    </body>
    </html>

    vue4.js:

    Vue.directive('my-directive', {
        bind: function() {
            // 准备工作
            console.log("bind function.");
        },
        update: function(newValue, oldValue) {
            // 值更新时的工作
            console.log("new: " + newValue + ", old: " + oldValue);
        },
        unbind: function() {
            // 清理工作
            console.log("unbind function.");
        }
    });
    
    var demo = new Vue({
        el: '#app',
        data: {
            msg: 'hello!'
        }
    })

    运行的效果:

    console打印的日志:

    bind function.
    new: undefined, old: undefined

    三、vue中的自定义过滤器

    html的代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>vue5</title>
        <script type="text/javascript" src="../vue.js"></script>
    </head>
    <body>
        <div id="app">
            <span v-text="message | reverse"></span>
        </div>
        <script type="text/javascript" src="js/vue5.js"></script>
    </body>
    </html>

    js的代码如下:

    Vue.filter('reverse', function (value) {
      return value.split('').reverse().join('')
    });
    
    var demo = new Vue({
        el: '#app',
        data: {
            message: 'hello!'
        }
    });

    运行的效果如下:

  • 相关阅读:
    leetCode21. 合并两个有序链表
    (flag)每日三道面试题(4.25)
    每日三加一面试题(4.21)
    按照顺序执行异步函数
    javascript Proxy 代理模式深度监听对象、数组变化
    数据结构与算法(二) 线性表一
    This关键字
    数据结构与算法(一)
    Git报错信息
    MakeDown语法学习
  • 原文地址:https://www.cnblogs.com/zxbzl/p/5996768.html
Copyright © 2020-2023  润新知