Изучение JS и попытка выяснить древовидное представление Vue.js.начинающий с vue.js treeview
пример на сайте Vue здесь: Tree view on Vue site
То, что я сделал это создал HTML документ, который имеет HTML-код, как в JSFiddle:
<!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, и все остальное отображается ОК. Я, вероятно, делаю довольно элементарную ошибку здесь, чтобы указать на правильные файлы 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
Edit:
После ответа Орленд-в ниже я включил весь код в одном файле, как показано ниже:
<!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. – Orland