JSFiddle - React, Tailwind, and code Playground

by lin zhou

HTML

<script src="https://unpkg.com/vue"></script>
<div id="app1">
<t-t1 v-bind:todo="data"></t-t1>
</div>

<div id="app2">
<ol>
<t-t2 v-for="item in list" v-bind:todo="item"></t-t2>
</ol>
</div>

JavaScript

//模板
//全局模板，直接用Vue。局部模板直接在实例中。
//无论是全局模板还是局部模板，在定义模板的地方，都需要bind数据，然后在实现模板那props上。用以解耦。
//全局模板用component函数，局部模板用components。

//在 Vue 中，父子组件的关系可以总结为 props down, events up。父组件通过 props 向下传递数据给子组件，子组件通过 events 给父组件发送消息。看看它们是怎么工作的。

//https://cn.vuejs.org/v2/guide/components.html#组合组件

Vue.component("t-t1",
			{props:["todo"], template:"<span>{{todo.text}} ?</span>"});

var vm1 = new Vue({
		el:"#app1",
    data:{
    	data:{text:"神奇动物在哪里"}
    }
});

var vm2 = new Vue({
		el:"#app2",
    data:{
    	list:[
      		{name:"php"},
          {name:"python"},
          {name:"node.js"},
          {name:"java"}
      ]
    },
    components:{
    	"t-t2":{
          props:["todo"],
          template:"<li>{{todo.name}}</li>"
       }
    }
});