zoukankan      html  css  js  c++  java
  • VUE入门实例,模版组件用法

    终于见到vue模板组件实例了 

    来源于 http://www.jianshu.com/p/23e041fc013e

    第一种

    //首先,别忘了引入vue.js
    <div id="user_name_01"></div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
    var User_01 = Vue.extend({// 创建可复用的构造器
    template: '<p>{{firstName}} {{lastName}} age {{age}}</p>'
    });
    var user_01 = new User_01({ // 创建一个 user 实例
    data: {
    firstName: 'yuxie',
    lastName: 'weiliang',
    age: 33
    }
    });
    user_01.$mount('#user_name_01') // 挂载到元素上
    </script>

    // 页面结果
    <div>yuxie weiliang age 33</div>

    第二种

    data里面可以仿佛初始化的数据,然后new的时候,里面的数据会覆盖之前的,可以当做是默认数据

    <div id="user_name_02"></div>
    <script>
    //下面是另一种写法,模版和数据扔一块
    var User_02 = Vue.extend({
    template: '<p>{{firstName}} {{lastName}} age {{age}}</p>',
    data: function(){
    return {
    firstName: 'yuxie',
    lastName: 'weiliang',
    age: 33
    }
    }
    });
    var user_02 = new User_02({data:{ age: 888888 }});//修改了age
    user_02.$mount('#user_name_02')
    </script>
    // 页面结果
    <div>yuxie weiliang age 888888</div>

    第三种,使用了html模版

    //容器
    <div id="user_name_03"></div>
    //模版
    <template id="children-template">
    <p>{{firstName}} {{lastName}} age {{age}}</p>
    </template>
    //js
    <script>
    var User_03 = Vue.extend({// 构造器
    data: function(){
    return {
    firstName: 'yuxie',
    lastName: 'weiliang',
    age: 33
    }
    },
    template: '#children-template'//获取HTML模版
    });
    var user_03 = new User_03();// 实例化
    user_03.$mount('#user_name_03') // 挂载到元素上
    </script>

    // 页面结果
    <div>yuxie weiliang age 33</div>



  • 相关阅读:
    AWS 磁盘 在线扩容(SSD 磁盘)
    磁盘扩容出错:e2fsck: Bad magic number in super-block while trying to open /dev/vdb1
    manjaro_install_all_in_one
    docker_info_06_stressTest 压力测试
    docker_info_05_registry 仓库管理
    docker_info_04_image 镜像管理
    docker_info_03_volume 数据卷管理
    docker_info_02_network 网络管理
    docker_info_01_install 安装
    docker-ce_install_centos75
  • 原文地址:https://www.cnblogs.com/itadong/p/7099225.html
Copyright © 2011-2022 走看看