vue组件化开发改造List Item

最新推荐文章于 2024-08-15 13:48:12 发布

C大大

最新推荐文章于 2024-08-15 13:48:12 发布

阅读量1.3k

点赞数 1

分类专栏：前端 Vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_38912284/article/details/88672934

版权

前端同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

Vue

5 篇文章 0 订阅

订阅专栏

<!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>组件化开发改造listItem</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="inputValue">
        <button @click="handerClick">提交</button>
        <!-- 这是第一种方式不使用组件化，直接通过v-for去循环我们list数组里的 -->
            <!-- <ul>
                <li v-for="item in list">{{item}}</li>
            </ul>           -->
        <!-- 这里我们使用的是第二种方式，即将li标签合成为一个全局组件 -->
        <!-- 2.这里我们使用v-bind简写为":"去接收父组件的值，也就是将item通过v-bind方法借助content变量去传给我们创建的子组件list-item，也可以叫绑定 -->
        <list-item :content="item" v-for="item in list">{{item}}</list-item>
    </div>
 
    <script>
        // 1.每一部分我们都可以看成一个组件，所以我们尝试去使用组件去代替上面li标签
        // Vue.js提供给我们一个自定义组件的方法,component,这里我们先定义一个全局组件
        // Vue.component("ListItem",{
        //     // 3.我们通过v-bind去绑定了父组件的值以后，这时候就需要用到props去接收父组件的值了
        //     props:[
        //         'content'
        //     ],
        //     // 4.这里我们使用插值表达式去引入值到我们的模板中
        //     template: '<li>{{content}}</li>'
        // })
        // 第三种方式我们将其定义为局部组件，先声明再注册，（全局组件声明与注册在一起）,要注意局部的注册是components
        var ListItem = {
            props: [
                'content'
            ],
            template: '<li>{{content}}</li>'
        }

        var app = new Vue({
            el: '#app',
            // 注册局部组件,这里是components哦
            components: {
                ListItem: ListItem
            },
            data:{
                list: [],
                inputValue: ''
            },
            methods: {
                handerClick:function(){
                    //将输入框内容添加到list数组中
                    app.$data.list.push(this.inputValue);
                    //每次添加结束以后我们就将输入框中的内容清空
                    this.inputValue=''
                }
            },
        })
    </script>
</body>
</html>

我们这里使用简单的小组件去演示组件的逻辑，通过点击按钮，将输入框中的内容添加到页面展示出来，另外我这里使用的是下载下来的vue.js，你们也可以选用cdn的方式引入vue.js