javascript - vue.js TreeView 初学者

学习 JS 并尝试从 Vue.js 中找出 TreeView 。

我所做的是创建一个 html 文档，其中包含 JSFiddle 的 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 文件中，并将其放入与名为 JS 的 html 文件位于同一目录的文件夹中。

我也将 vue.min.js 放入该文件夹中，但代码根本不起作用。看来脚本只是没有像 CSS 一样运行，其他一切都显示正常。在指向正确的 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 时所做的事情!!!???

最佳答案

似乎连 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>

关于javascript - vue.js TreeView 初学者，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32842681/

javascript - vue.js TreeView 初学者

上一篇：javascript - 使用 length 属性获取事件目标时的困惑

下一篇：javascript - 如果条件失败，尝试返回默认字符串