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>
    

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

  • 相关阅读:
    docker简单入门之使用docker容器部署简单的java web开源项目jpress博客程序
    go语言的安装、环境变量配置及简单使用
    bootstrap4简单使用和入门02-bootstrap的js组件简单使用
    bootstrap4简单使用和入门01-简单表单的使用
    bootstrap4简单使用和入门03-响应式布局
    python操作三大主流数据库(14)python操作redis之新闻项目实战②新闻数据的展示及修改、删除操作
    python操作三大主流数据库(13)python操作redis之新闻项目实战①新闻数据的导入
    python操作三大主流数据库(12)python操作redis的api框架redis-py简单使用
    python操作三大主流数据库(11)redis的安装和简单使用
    python操作三大主流数据库(10)python操作mongodb数据库④mongodb新闻项目实战
  • 原文地址:https://www.cnblogs.com/hippieZhou/p/9484698.html
Copyright © 2011-2022 走看看