Kha*_*eel 12 vue.js vue-router vue-component vuejs2
我是vue js的新手.我只是创建一个简单的项目,我只是通过CDN包含vuejs.不使用node/npm或cli.
我将所有的html标记保存在单个html中,随着它的增长看起来很乱.我试图将html拆分为视图,并希望通过类似于ng-includeangularJs的东西来包含它
我之前在角度工作过,ng-include需要加载外部html文件.我正在寻找类似于vue的东西.重点是将我的html文件拆分为更易于维护的单独文件.
已经遇到<template src="./myfile.html"/>但它不起作用有人可以帮助我
这实际上非常简单，但您需要记住一些事情。在幕后，Vue 将您的 html 模板标记转换为代码。也就是说，您看到定义为 HTML 的每个元素都会转换为 javascript 指令来创建元素。模板很方便，因此如果不使用 webpack 之类的东西进行编译，单文件组件（vue 文件）就无法完成。相反，您需要使用其他一些模板化方法。幸运的是，还有其他不需要预编译并且可以在这种情况下使用的定义模板的方法。
\n\n例子：template: \'<div>{{myvar}}</div>\'
例子：render(create){create(\'div\')}
Vue 还有其他几种创建模板的方法，但它们只是不符合标准。
\n\n这是两者的示例：
\n\nAddItem.js - 使用渲染函数
\n\n\'use strict\';\nVue.component(\'add-item\', {\n methods: {\n add() {\n this.$emit(\'add\', this.value);\n this.value = \'\'\n }\n },\n\n data () {\n return {\n value: \'\'\n }\n },\n\n render(createElement) {\n var self = this\n return createElement(\'div\', [\n createElement(\'input\', {\n attrs: {\n type: \'text\',\n placeholder: \'new Item\'\n },\n // v-model functionality has to be implemented manually\n domProps: {\n value: self.value\n },\n on: {\n input: function (event) {\n self.value = event.target.value\n // self.$emit(\'input\', event.target.value)\n }\n }\n }),\n createElement(\'input\', {\n attrs: {\n type: \'submit\',\n value: \'add\'\n },\n on: {\n click: this.add\n }\n }),\n ])\n }\n});\nListItem.js - 使用模板文字（反引号）
\n\n\'use strict\';\nVue.component(\'list-item\', {\n template: `<div class="checkbox-wrapper" @click="check">\n <h1>{{checked ? \'\xe2\x98\x91\' : \'\xe2\x98\x90\'}} {{ title }}</h1>\n </div>`,\n props: [\n \'title\',\n \'checked\'\n ],\n methods: {\n check() {\n this.$emit(\'change\', !this.checked);\n }\n }\n});\n和 html\n
\n\n<!DOCTYPE html>\n<html lang="en">\n<head>\n <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js"></script>\n <script src="ListItem.js"></script>\n <script src="AddItem.js"></script>\n</head>\n<body>\n<div id="app">\n <add-item @add=\'list.push({title:arguments[0], checked: false})\'></add-item>\n <list-item v-for="(l, i) in list" :key="i" :title="l.title" :checked="l.checked" @change="l.checked=arguments[0]"></list-item>\n</div>\n<script type="text/javascript">\nnew Vue({\n el: \'#app\',\n data: {\n newTitle: \'\',\n list: [\n { title: \'A\', checked: true },\n { title: \'B\', checked: true },\n { title: \'C\', checked: true }\n ]\n }\n});\n</script>\n</body>\n</html>\n