vue.js 树视图初学者

Question

学习JS并尝试从Vue.js中找出树视图。

我所做的是根据 JSFiddle 创建了一个 html 文档，其中包含 HTML 代码：

<!DOCTYPE html>
<html>

<head>

<style>
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;
}
</style>
</head>

<body>
<script type="text/x-template" id="template">
  <div v-class="bold: isFolder"
    v-on="click: toggle, dblclick: changeType">
    {{model.name}}
    <span v-if="isFolder">[{{open ? '-' : '+'}}]</span>
  </div> 
  <ul v-show="open" v-if="isFolder">
    <li class="item"
      v-repeat="model: model.children"
      v-component="item">
    </li>
    <li v-on="click: addChild">+</li>
  </ul>
</script>
<script src="JS/app.js"></script>
<script src="JS/vue.min.js"></script>
<p>(You can double click on an item to turn it into a folder.)</p>

<!-- the demo root element -->
<ul id="demo">
  <li class="item"
    v-component="item"
    v-with="model: treeData">
  </li>
</ul>



</body>
</html>

然后我将 Javascript 添加到一个单独的 app.js 文件中，并将其放在与 html 文件相同目录下的名为 JS 的文件夹中。

我也将 vue.min.js 放入该文件夹，但代码根本不起作用。看起来脚本只是不像 CSS 那样运行ning，其他一切都显示正常。就指向正确的 js 文件或遗漏某些内容而言，我可能在这里犯了一个相当基本的错误，但语法并没有从工作在线演示中更改，所以我怀疑是这样。

JS:

// 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' }
          ]
        }
      ]
    }
  ]
}

// define the item component
Vue.component('item', {
  template: '#template',
  data: function () {
    return {
      open: false
    }
  },
  computed: {
    isFolder: function () {
      return this.model.children &&
        this.model.children.length
    }
  },
  methods: {
    toggle: function () {
      if (this.isFolder) {
        this.open = !this.open
      }
    },
    changeType: function () {
      if (!this.isFolder) {
        this.model.$add('children', [])
        this.addChild()
        this.open = true
      }
    },
    addChild: function () {
      this.model.children.push({
        name: 'new stuff'
      })
    }
  }
})

// boot up the demo
var demo = new Vue({
  el: '#demo',
  data: {
    treeData: data
  }
})

如果有人对我做错了什么有任何想法，请告诉我。

所有浏览器（Safari、Firefox、Chrome）都存在问题 -> 我相当确定这是一个高级问题，因为上面链接的 JSFiddle 页面和示例页面都显示正确，我只是复制+除了下载和引用 vue.min.js

之外，还将代码粘贴到 html 和 js 文件中

欢迎所有帮助和建议！

男

编辑：

在 Orland 的下面回答之后，我将所有代码包含在一个文件中，如下所示：

<!DOCTYPE html>
<html>

<head>
<style>
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;
}
</style>
</head>

<body>
<script src="https://cdn.rawgit.com/yyx990803/vue/master/dist/vue.min.js"></script>
<!-- item template -->
<script type="text/x-template" id="item-template">
  <div v-class="bold: isFolder"
    v-on="click: toggle, dblclick: changeType">
    {{model.name}}
    <span v-if="isFolder">[{{open ? '-' : '+'}}]</span>
  </div>
  <ul v-show="open" v-if="isFolder">
    <li class="item"
      v-repeat="model: model.children"
      v-component="item">
    </li>
    <li v-on="click: addChild">+</li>
  </ul>
</script>

<p>(You can double click on an item to turn it into a folder.)</p>

<!-- the demo root element -->
<ul id="demo">
    <item model="{{ treeData }}"></item>
</ul>
<script>
    // demo data
    var data = {
        name: 'My Tree',
        children: [
            { 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' }
                        ]
                    }
                ]
            }
        ]
    }

    // define the item component
    Vue.component('item', {
        template: '#item-template',
        props: ['model'],
        data: function () {
            return {
                open: false,
                model: {}
            }
        },
        computed: {
            isFolder: function () {
                return this.model.children &&
                        this.model.children.length
            }
        },
        methods: {
            toggle: function () {
                if (this.isFolder) {
                    this.open = !this.open
                }
            },
            changeType: function () {
                if (!this.isFolder) {
                    this.model.$add('children', [])
                    this.addChild()
                    this.open = true
                }
            },
            addChild: function () {
                this.model.children.push({
                    name: 'new stuff'
                })
            }
        }
    })

    // boot up the demo
    var demo = new Vue({
        el: '#demo',
        data: {
            treeData: data
        }
    })

</script>
</body>
</html>

这很好用，但我正在开发一个运行大部分离线的应用程序，所以我尝试将 vue.min.js 源更改为我拥有的本地 vue.min.js，但它停止工作了！！我所做的更改是：

来自<script src="https://cdn.rawgit.com/yyx990803/vue/master/dist/vue.min.js"></script> 至 <script src="JS/vue.min.js"></script>

无法理解，但假设这是我在定位 vue.min.js!!!???

时所做的事情

Answer 1

似乎连 Vue JS 网站上的原始代码片段都无法正常工作。我更新了代码片段以使其正常工作。

// demo data
var data = {
  name: 'My Tree',
  children: [
    { 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' }
          ]
        }
      ]
    }
  ]
}

// define the item component
Vue.component('item', {
  template: '#item-template',
  props: ['model'],
  data: function () {
    return {
      open: false,
      model: {}
    }
  },
  computed: {
    isFolder: function () {
      return this.model.children &&
        this.model.children.length
    }
  },
  methods: {
    toggle: function () {
      if (this.isFolder) {
        this.open = !this.open
      }
    },
    changeType: function () {
      if (!this.isFolder) {
        this.model.$add('children', [])
        this.addChild()
        this.open = true
      }
    },
    addChild: function () {
      this.model.children.push({
        name: 'new stuff'
      })
    }
  }
})

// boot up the demo
var demo = new Vue({
  el: '#demo',
  data: {
    treeData: data
  }
})

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;
}

<script src="https://cdn.rawgit.com/yyx990803/vue/master/dist/vue.min.js"></script>
<!-- item template -->
<script type="text/x-template" id="item-template">
  <div v-class="bold: isFolder"
    v-on="click: toggle, dblclick: changeType">
    {{model.name}}
    <span v-if="isFolder">[{{open ? '-' : '+'}}]</span>
  </div>
  <ul v-show="open" v-if="isFolder">
    <li class="item"
      v-repeat="model: model.children"
      v-component="item">
    </li>
    <li v-on="click: addChild">+</li>
  </ul>
</script>

<p>(You can double click on an item to turn it into a folder.)</p>

<!-- the demo root element -->
<ul id="demo">
    <item model="{{ treeData }}"></item>
</ul>

vue.js 树视图初学者

beginner with vue.js treeview

html

javascript

treeview

vue.js