树状视图
传送门
此实例主要包含钩子computed的使用、组件中变量的作用域范围等知识。
首先来看看它的JavaScript代码：
// demo data
var data = { //初始数据
name: 'My Tree',
children: [
{ name: 'hello' },
{ name: 'wat' },
{
name: 'child folder',
children: [
{
name: 'child folder',
children: [
{ name: 'hello' },
{ name: 'wat' }
]
},
{ name: 'hello' },
{ name: 'wat' },
{
name: 'child folder',
children: [
{ name: 'hello' },
{ name: 'wat' }
]
}
]
}
]
}
// 定义并注册组件
Vue.component('item', {
template: '#item-template',
props: { //传递父组件传递的数据
model: Object //判断是否是Object类型的数据
},
data: function () {
return {
open: false
}
},
computed: {
isFolder: function () { //使用isFolder来判断是否是文件夹，这个变量随model.children的值的变化进行变化
return this.model.children &&
this.model.children.length //如果this.model.children是存在的，并且长度不为0的时候返回true
}
},
methods: {
toggle: function () { //使用此方法决定是否打开文件夹
if (this.isFolder) {
this.open = !this.open
}
},
changeType: function () { //创建文件夹，将没有文件夹属性的model加children这个属性，使其变为文件夹可打开
if (!this.isFolder) {
Vue.set(this.model, 'children', []) //使用set来增加model的children属性，使其变为响应的
this.addChild() // 默认添加一个子文件
this.open = true
}
},
addChild: function () { // 创建一个子文件 name默认为'new stuff'
this.model.children.push({
name: 'new stuff'
})
}
}
})
// 创建根实例
var demo = new Vue({
el: '#demo',
data: {
treeData: data
}
})
接下来我们看看html代码：
<!-- item template -->
<script type="text/x-template" id="item-template">
<li>
<div
:class="{bold: isFolder}"
@click="toggle"
@dblclick="changeType"><!-- 如果是文件夹点击一下可打开关闭 如果是文件，双击可将其改变为文件夹 -->
{{model.name}}
<span v-if="isFolder">[{{open ? '-' : '+'}}]</span>
</div>
<ul v-show="open" v-if="isFolder"> <!-- open属性来决定是否打开，isFolder属性来决定能否打开 -->
<item
class="item"
v-for="model in model.children"
:model="model">
</item> <!-- 重复使用item，并将数据传递给子组件，很深层次的文件夹也会遍历到 -->
<li @click="addChild">+</li>
</ul>
</li>
</script>
<p>(You can double click on an item to turn it into a folder.)</p>
<!-- the demo root element -->
<ul id="demo">
<item
class="item"
:model="treeData">
</item> <!-- 将数据传递给子组件 -->
</ul>
最后是css代码：
body {
font-family: Menlo, Consolas, monospace;
color: #444;
}
.item {
cursor: pointer;
}
.bold {
font-weight: bold;
}
ul {
padding-left: 1em;
line-height: 1.5em;
list-style-type: dot;
}
你应该会注意到html中有有一句
v-for =" model in model.children"
:model="model"
