如何在主播中加载模板中的外部html文件 [英] How to load external html file in a template in VueJs
本文介绍了如何在主播中加载模板中的外部html文件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我是VUE JS的新手。 我只是在创建一个简单的项目，其中我只包括Vuejs通过CDN。未使用节点/npm或cli。
我将我的所有html标记保存在单个html中，随着它的增长，它看起来很杂乱。我尝试将html拆分为视图，并希望通过类似于angularJ的ng-include
我以前在ANGLE中工作过，在那里有ng-include加载外部html文件。我在找和VUE类似的东西。关键是要将我的html文件分割成更易于维护的独立文件。
<template src="./myfile.html"/>，但不起作用
谁能帮帮我
推荐答案
它实际上非常简单，但您需要记住一些事情。在幕后，Vue将您的html模板标记转换为代码。也就是说，您看到的每个定义为HTML的元素都会被转换为一个javascript指令来创建一个元素。模板很方便，所以单文件组件(VUE文件)是不能在不编译webpack这样的代码的情况下完成的。相反，您需要使用其他一些模板方法。幸运的是，还有其他定义模板的方法，这些方法不需要预编译，并且可以在此场景中使用。
1-字符串/模板文字
示例：template: '<div>{{myvar}}</div>'
2-呈现函数🤢
示例：render(create){create('div')}
Vue还有其他几种创建模板的方法，但它们就是不符合条件。
以下是两者的示例：
AddItem.js-使用Render😠函数
'use strict';
Vue.component('add-item', {
methods: {
add() {
this.$emit('add', this.value);
this.value = ''
}
},
data () {
return {
value: ''
}
},
render(createElement) {
var self = this
return createElement('div', [
createElement('input', {
attrs: {
type: 'text',
placeholder: 'new Item'
},
// v-model functionality has to be implemented manually
domProps: {
value: self.value
},
on: {
input: function (event) {
self.value = event.target.value
// self.$emit('input', event.target.value)
}
}
}),
createElement('input', {
attrs: {
type: 'submit',
value: 'add'
},
on: {
click: this.add
}
}),
])
}
});
ListItem.js-使用模板文字(反勾)
'use strict';
Vue.component('list-item', {
template: `<div class="checkbox-wrapper" @click="check">
<h1>{{checked ? '☑' : '☐'}} {{ title }}</h1>
</div>`,
props: [
'title',
'checked'
],
methods: {
check() {
this.$emit('change', !this.checked);
}
}
});
和html
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js"></script>
<script src="ListItem.js"></script>
<script src="AddItem.js"></script>
</head>
<body>
<div id="app">
<add-item @add='list.push({title:arguments[0], checked: false})'></add-item>
<list-item v-for="(l, i) in list" :key="i" :title="l.title" :checked="l.checked" @change="l.checked=arguments[0]"></list-item>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
newTitle: '',
list: [
{ title: 'A', checked: true },
{ title: 'B', checked: true },
{ title: 'C', checked: true }
]
}
});
</script>
</body>
</html>
TL；DR；
查看实际操作：https://repl.it/OEMt/9
这篇关于如何在主播中加载模板中的外部html文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
