• 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!'
        }
    });

    运行的效果如下:

  • 相关阅读:
    Objective-C NSFileManager 文件管理总结
    ScrollView在RelativeLayout失效问题
    解决myeclipse中struts2 bug问题包的替换问题
    SOA究竟是个啥
    Flash--元件和实例
    MyEclipse中加入web项目到tomcat
    [C]if (CONDITION)语句中CONDITION的情况
    GTK经常使用控件之笔记本控件( GtkNotebook )
    org.apache.solr.handler.dataimport.DataImportHandlerException: Data Config problem: 对实体 &quot;characterEn
    Android自动测试之Monkey工具
  • 原文地址:https://www.cnblogs.com/zxbzl/p/5996768.html
Copyright © 2020-2023  润新知