vue.js treeview的初学者
[英]beginner with vue.js treeview
问题描述
学习JS并尝试从Vue.js找出树视图。
该示例在Vue网站上的以下位置：Vue网站上的树视图
我所做的是创建一个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一样运行，其他所有内容都显示为OK。 在指向正确的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
欢迎所有帮助和建议！
中号
编辑：
在下面的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时所做的事情！
1 个解决方案
解决方案1
1 已采纳 2015-09-29 11:56:07
看来，即使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计算初学者
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.