vue-树状视图

树状视图

传送门

此实例主要包含钩子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"

也就是说每个item都有一个model，而他们是不互相影响的，组件间的数据传递需要使用props来进行组件间的通讯。