vue-树状视图

作者: 孤独花园 | 来源:发表于2016-08-21 19:45 被阅读2294次
    树状视图
    传送门
    此实例主要包含钩子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来进行组件间的通讯。

    相关文章

      网友评论

        本文标题:vue-树状视图

        本文链接:https://www.haomeiwen.com/subject/vhhwsttx.html