【发布时间】：2015-12-26 20:34:41
【问题描述】：
学习 JS 并尝试从 Vue.js 中找出树视图。
示例在此处的 Vue 站点上：Tree view on Vue site
我所做的是根据 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 文件中，并将其放在与名为 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 页面和示例页面都正确显示，我实际上只是将代码复制+粘贴到html和js文件除了下载和引用vue.min.js
欢迎所有帮助和建议！
M
编辑：
在 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，请查看开发者工具
标签： javascript html treeview vue.js