zoukankan      html  css  js  c++  java
  • Vue 系列之 组件

    一个简单的 TodoList

    <body>
        <div id="root">
            <div>
                <input type="text" v-model="todo">
                <button @click="handleSubmit">Submit</button>
                <ul>
                    <li v-for="(item, index) in items" :key="index">{{item}}</li>
                </ul>
            </div>
        </div>
        <script>
            new Vue({
                el: "#root",
                data: {
                    todo: "hello",
                    items: []
                },
                methods: {
                    handleSubmit: function () {
                        this.items.push(this.todo)
                        this.todo = ""
                    }
                }
            })
        </script>
    </body>
    

    往数组里面添加元素使用 push 方法,删除使用

    组件

    全局组件

    <body>
        <div id="root">
            <input type="text" v-model="todo">
            <button @click="handleSubmit">Submit</button>
            <ul>
                <todo-item v-for="(item, index) in items" :key="index" :content="item"></todo-item>
            </ul>
        </div>
        <script>
    
            Vue.component("todo-item", {
                props: ["content"],
                template: "<li>{{content}}</li>"
            })
    
            new Vue({
                el: "#root",
                data: {
                    todo: "",
                    items: []
                },
                methods: {
                    handleSubmit: function () {
                        this.items.push(this.todo)
                        this.todo = ""
                    }
                }
            })
        </script>
    </body>
    

    局部组件

    <body>
        <div id="root">
            <input type="text" v-model="todo">
            <button @click="handleSubmit">Submit</button>
            <ul>
                <todo-item v-for="(item, index) in items" :key="index" :content="item"></todo-item>
            </ul>
        </div>
        <script>
    
            var todoItem = {
                props: ["content"],
                template: "<li>{{content}}</li>"
            }
    
            new Vue({
                el: "#root",
                data: {
                    todo: "",
                    items: []
                },
                components: {
                    "todo-item": todoItem,
                },
                methods: {
                    handleSubmit: function () {
                        this.items.push(this.todo)
                        this.todo = ""
                    }
                }
            })
        </script>
    </body>
    

    组件与实例的关系

    
    <body>
        <div id="root">
            <input type="text" v-model="todo">
            <button @click="handleSubmit">Submit</button>
            <ul>
                <todo-item v-for="(item, index) in items" :key="index" :content="item"></todo-item>
            </ul>
        </div>
        <script>
    
            var todoItem = {
                props: ["content"],
                template: "<li @click='handleClick'>{{content}}</li>",
                methods: {
                    handleClick: function () {
                        alert(1111)
                    }
                }
            }
    
            new Vue({
                el: "#root",
                data: {
                    todo: "",
                    items: []
                },
                components: {
                    "todo-item": todoItem,
                },
                methods: {
                    handleSubmit: function () {
                        this.items.push(this.todo)
                        this.todo = ""
                    }
                }
            })
        </script>
    </body>
    

    Vue程序 是由众多的 vue实例 构建而成的。对于根实例,对应的模板是挂载点下所有的 Dom 节点;

    组件的 data 必须是一个函数

    一个组件的 data 选项必须是一个函数,因此每个实例可以维护一份被返回对象的独立的拷贝:

    data: function () {
      return {
        count: 0
      }
    }
    

    事件的发布与订阅

    <body>
        <div id="root">
            <input type="text" v-model="todo">
            <button @click="handleSubmit">Submit</button>
            <ul>
                <!--订阅事件-->
                <todo-item @delete="handledelete" v-for="(item, index) in items" :key="index" :content="item" :index="index"></todo-item>
            </ul>
        </div>
        <script>
    
            var todoItem = {
                props: ["content", "index"],
                template: "<li @click='handleClick'>{{index}} - {{content}}</li>",
                methods: {
                    handleClick: function () {
                        //发布事件
                        this.$emit('delete', this.index)
                    }
                }
            }
    
            new Vue({
                el: "#root",
                data: {
                    todo: "",
                    items: []
                },
                components: {
                    "todo-item": todoItem,
                },
                methods: {
                    handleSubmit: function () {
                        this.items.push(this.todo)
                        this.todo = ""
                    },
                    //实现事件
                    handledelete: function (index) {
                        this.items.splice(index)
                    }
                }
            })
        </script>
    </body>
    

    通过 发布-订阅 模式进行组件间的数据传递和事件通知;

  • 相关阅读:
    2018年你需要知道的13个JavaScript工具库
    JavaScript一团乱,这是好事
    5大JavaScript前端框架简介
    大型Vuex应用程序的目录结构
    Github被微软收购,这里整理了16个替代品
    如何使用@vue/cli 3.0在npm上创建,发布和使用你自己的Vue.js组件库
    TensorFlow入门教程
    想成为顶级开发者吗?亲自动手实现经典案例
    2018年最值得关注的30个Vue开源项目
    SQL Server 合并复制遇到identity range check报错的解决 (转载)
  • 原文地址:https://www.cnblogs.com/hippieZhou/p/9484698.html
Copyright © 2011-2022 走看看