发表于： 2017-02-09 19:51:18
1 1213
今天完成的事：读了框架的官方文档，对所学知识慢慢的进行梳理。
明天计划的事：明天计划把官方文档看结束，一定要将难啃的知识彻底理解透。
遇到的问题：在进行数据转换的时候，思维老是转换不过来，习惯了jquery的手动操作DOM，而对于数据驱动一直适应不了。
收货：通过今天的学习，学习了vue的基础数据转换，不过对于一些问题还是有些生疏，希望路过的师兄指点一下。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- <div id="app-7">
<ol>
<todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
</ol>
</div> -->
<ul id="app-4">
<!--
创建一个todo-item组件实例输出数据中的dotos数组
-->
<todo-item v-for="td in todos" v-bind:oo="td"></todo-item> <!--模板模式下必须在模板里面定义，这里显示无效..td是对象-->
<br>
<li v-for="td in todos">{{td.text}}</li>
</ul>
<script src="vue.js"></script>
<script>
Vue.component('todo-item', {
props: ['oo'],
template: '<li>{{oo.text}}</li>' //模板模式必须在模板里面定义
})
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue' },
{ text: 'Build something awesome' }
]
}
})
console.log(app4.todos[0].text)
</script>
</body>
</html>
这里00和td到底是什么性质的数据，是对象还是数组还是数据？绑定数据 v-bind:oo="td"实现的原理是什么？
返回列表
评论