zoukankan      html  css  js  c++  java
  • Vue学习之todolist组件拆分

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>vue</title>
        <script src="vue.js"></script>
    </head>
    <body>
    
        <!-- todolist组件拆分
            
            例如当
            <li v-for="(item, index) of list" :key="index">
                    {{item}}
                </li>
            非常庞大或者复杂的时候,就可以才分出来进行维护
    
            Vue.component({})定义的组件成为全局组件
    
            var Todo-item 为局部组件,需要再vue中进行注册
         -->
    
        <div id="root">
            <div>
                <input v-model="inputValue" />
                <button @click="handleSubmit">提交</button>
            </div>
            <ul>
                <todo-item
                 v-for="(item, index) of list"
                 :key="index"
                 :content="item"
                >
                </todo-item>
            </ul>
        </div>
        
        <script>
    
            Vue.component('todo-item', {
                props:['content'],
                template: '<li>{{content}}</li>'
            })
    
            // var TodoItem = {
            //     template: '<li>item</li>'
            // }
    
            new Vue({
                el:"#root",
                // components:{
                //     'todo-item': TodoItem
                // },
                data:{
                    inputValue: 'hello',
                    list: []
                },
                methods: {
                    handleSubmit: function() {
                        this.list.push(this.inputValue)
                        this.inputValue = ''
                    }
                }
            })
        </script>
    </body>
    </html>
    
  • 相关阅读:
    [JSOI2015]染色问题
    [ZJOI2016]小星星
    [BZOJ4361]isn
    [BZOJ4043/CERC2014]Vocabulary
    [BZOJ3622]已经没有什么好害怕的了
    [BZOJ2958]序列染色
    [SDOI2013]spring
    [Usaco2012 Nov]Concurrently Balanced Strings
    php常用函数集合
    制作item和category的mvc视图总结
  • 原文地址:https://www.cnblogs.com/twodoge/p/10230280.html
Copyright © 2011-2022 走看看