JavaEE鸿蒙应用开发HTML&JS+前端Python+大数据开发人工智能开发电商视觉设计软件测试新媒体+短视频直播运营产品经理集成电路应用开发(含嵌入式)Linux云计算+运维开发C/C++拍摄剪辑+短视频制作PMP项目管理认证电商运营Go语言与区块链大数据PHP工程师Android+物联网iOS.NET

【Web前端】Vue前端组件化 全局和局部组件

来源:黑马程序员

浏览24251人

2019.05.09

vue 的全局和局部组件 Demo
这里我把学习的知识点都放在代码对应的注释中了

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
        <title>
前端组件化</title>
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
                <!--
                         M V P
                        M V VM
                -->
                <!-- v-model
实现 数据双向绑定,在 data中注册一下,两边数据会保持一致,谁变都变 -->
                <input type="text" v-model='inputValue'>
                <!--
使用 v-on:click 来实现 事件绑定 handleBtnClick  ,然后从 方法中找个这个方法,监听执行 -->
                <input type="button" name="" v-on:click="handleBtnClick" value="
提交">
                <ul>
                        <!-- <li v-for="item in list">{{item}}</li> -->
                        <!-- v-for
遍历 list 每个元素 -->
                        <!-- 
                                1
、这里有个 及其重要的注意点 定义组件名字为 TodoItem 使用时要写成 todo-item
                               
即把大写变小写,每个之间加一个 -         !!!!!!!
                                2
、或者直接定义为        todo-item

                        -->
                        <!-- 
                                v-bind
实现数据绑定,
                               
list中的数据给 item
                                item
content绑定在一起,
                               
这里要在 Vue.component 中添加 props:['content']
                               
这里的 v-bind: 后的名字 要和 props[] 中一致!!!! 
                        -->
                        <todo-item v-bind:todo="item" v-for="item in list"></todo-item>

                </ul>
        </div>
        <script type="text/javascript">
                // Vue
创建局部组件
                /*
                       
局部组件在定义后不能像全局组件一个样直接使用,需要在要使用的Vue对象中进行注册
                        components:{
                                TodoItem:TodoItem
                        }
                */
                var TodoItem = {
                        props:['todo'],
                        template:"<li>{{todo}}</li>"
                }

        /*                
                // Vue
提供的创建 全局组件
                Vue.component("todo-item",{
                        props:['todo'],
                        template:"<li>{{todo}}</li>"
                });
        */


                var app = new Vue({
                        el:'#app',
                        components:{
                                TodoItem:TodoItem
                        },
                        data:{
                                // list:['Hello','World'],
                                list:['Hello','World!'],
                                inputValue:'v-model'
                        },
                        methods: {
                                handleBtnClick:function () {
                                        this.list.push(this.inputValue);
                                }
                        }
                                
                });
        </script>
</body>
</html>