zoukankan      html  css  js  c++  java
  • 前端组件化

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Hello World</title>
        <script src="./vue.js"></script>
    </head>
    <body>
    <div id="root">
        <input type="text" v-model="todoValue">
        <button @click="handleBtnClick">提交</button>
        <ul>
            <todo-item v-bind:content="item" v-for="item in list"></todo-item>
        </ul>
    </div>
    <script>
        // 全局组件
        // Vue.component('TodoItem', {
        //     props: ['content'],
        //     template: "<li>{{content}}</li>"
        // });
    
        //局部组件
        var TodoItem = {
            props: ['content'],
            template: "<li>{{content}}</li>"
        };
    
    
        var app = new Vue({
            el: '#root',
            components:{
                TodoItem:TodoItem    //注册局部组件
            },
            data: {
                list: [],
                todoValue: ''
            },
            methods: {
                handleBtnClick: function () {
                    this.list.push(this.todoValue);
                    this.todoValue = ''
                }
            }
        })
    </script>
    </body>
    </html>
    
    <!--
    逻辑解析:
        首先定义一个全局组件Vue.component[TodoItem] ->通过list决定生成多少个todo-item组件 同时将list对象的内容
        通过v-bind语法 借助content变量 传给todo-item这个子组件  在全局组件定义一个props 接收content 载将content渲染在模板上
    
    -->
  • 相关阅读:
    Linux filesystem
    centos 下 gradle 编译打包 apk
    python SSL 错误
    nginx 缓存配置
    nginx 反向代理配置
    redhat 网卡绑定
    磁盘阵列
    Centos 安装Django2.1
    python pyquery 基本用法
    python 爬虫之-- 正则表达式
  • 原文地址:https://www.cnblogs.com/xuyxbiubiu/p/9950806.html
Copyright © 2011-2022 走看看