Vue 2.0修仙之路 — 组件

作者: 杀个程序猿祭天 | 来源:发表于2018-05-30 18:09 被阅读77次

Vue 2.0修仙之路 — 组件
Vue2.0-Vue3.0语法差异性总结
Vue 2.0修仙之路 — 指令
vue UI组件、开发框架、实用库、服务端、辅助工具和应用实例
Vue2.0的改变
vue05
Vue 2.0 起步(3) 数据流vuex和LocalStora
vue2.0中keep-alive实践
vue组件传值和函数调用
vue-2.0 loading 组件

HTML 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
    <!-- 自定义组件，可以自定义属性 -->
        <tou name="Logo-"></tou>
        <ol>
            <list v-for="item in groceryList"
            v-bind:todo="item" v-bind:key="item.id"></list>
        </ol>
    </div>
</body>
</html>
<script src="js/demo2.js"></script>

JS 代码

window.onload  = function(){
    // 下载 dev-tools   https://github.com/vuejs/vue-devtools
        var data = {
            groceryList: [
                 { id: 0, text: '蔬菜' },
                 { id: 1, text: '奶酪' },
                 { id: 2, text: '随便其它什么人吃的东西' }
               ]
        }
        var methods = {

        }
        // 定义组件
        Vue.component("tou",{
            // 接收组件传来的值
            props:["name"],
            //组件模板
            template:'<p>我是头部<a href="###">{{name}}</a></p>'
        })
        // 自定义列表组件
        Vue.component("list",{
            // 接收组件传来的值
            props:["todo"],
            //组件模板
            template:'<li>{{todo.text}}</li>'
        })
        var app = new Vue({
            el:"#app",
            data:data,
            methods:methods
        })
}

原网址：Vue之组件：https://cn.vuejs.org/v2/guide/?#%E7%BB%84%E4%BB%B6%E5%8C%96%E5%BA%94%E7%94%A8%E6%9E%84%E5%BB%BA