Pratica di Vue.js con un file per un componente

Il esempio fornito ufficialmente su questo argomento richiede strumenti di compilazione, ma non ho la possibilità di studiare nodejs, quindi devo trovare un altro modo. L'autore di VueJS ha un articolo su un altro sito che spiega come utilizzare jQuery.getScript o RequireJS per implementare componenti, ma non fornisce esempi, quindi ho cercato e trovato un metodo da solo.

UtilizzatiStrumenti:

vue.js --- 0.12.+ (richiede il supporto del componente asincrono in 0.12)
require.js
text.js --- Plugin text di RequireJS https://github.com/requirejs/text

文件列表

index.html
index.js
comp.js (组件在此定义)
comp.html (模板组件)

实际上组件分成了js和html，html是模板内容，这里似乎与“一个文件对应一个组件”稍有不符，但如果模板内容比较多，这是有必要的，也更便于维护。直接上代码。

comp.html -- 组件模板

<h2>{{title}}</h2>
<p>{{content}}</p>
comp.js -- 组件定义
define(['text!comp.html'], function (temp) { // 在requirejs中定义一个模块，依赖为模板文本
 return {
 props: ['title', 'content'],
 template: temp
 }
});

至此，一个简单的模板就建好了。然后就是在VueJS中注册这个组件。

index.js

require.config({
 paths: { // 指定text.js和vue.js的路径，不需要.js后缀，详见RequireJS文档
 text: '../../../assets/requirejs/text',
 vue: '../../../assets/vue/vue'
 }
});
require(['vue'], function (Vue) { // 依赖vue.js
 Vue.component('comp', function (resolve) { // 注册一个异步组件
 require(['comp'], function (comp) { // 因为我们需要按需加载组件，因此require(['comp'])必须在function里
 resolve(comp)
 });
 });
 new Vue({
 el: 'body'
 });
 //new Vue({
 // el: 'body',
 // components: {
 // comp: function (resolve) {
 // require(['comp'], function (comp) {
 // resolve(comp)
 // })
 // }
 // }
 //});
});

index.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title></title>
</head>
<body>
<component is="comp" title="[#1#]" content="fjkldsjfkldjsklgjks"></component>
<script data-main="index" src="../../../assets/require.js"></script>
</body>
</html>

Esegui il codice, commenta <component> per vedere la differenza.

Se ci sono molti componenti, la registrazione dei componenti sarà fastidiosa, quindi questa parte può essere estratta.

index.js migliorato

require.config({
 paths: {
 text: '../../../assets/requirejs/text',
 vue: '../../../assets/vue/vue'
 }
});
function conponent(name) {
 return function (resolve, reject) {
 require([name], function (comp) {
 resolve(comp)
 });
 }
}
require(['vue'], function (Vue) {
 Vue.component('comp', conponent('comp'));
 Vue.component('comp2', conponent('comp2'));
 new Vue({
 el: 'body'
 });
});

Fino a qui.

Questo articolo è stato organizzato nel libro 'Guida di studio dei componenti front-end Vue.js', benvenuti a studiare e leggere.

Questo è tutto il contenuto dell'articolo, speriamo che sia utile per la tua apprendimento, e speriamo che tu sostenga fortemente la guida urla.

Dichiarazione: il contenuto di questo articolo è stato tratto da Internet, il copyright è di proprietà del rispettivo autore, il contenuto è stato contribuito e caricato autonomamente dagli utenti di Internet, questo sito non detiene il diritto di proprietà, non è stato editato manualmente e non assume alcuna responsabilità legale. Se trovi contenuti sospetti di copyright, ti preghiamo di inviare una e-mail a: notice#oldtoolbag.com (al momento dell'invio dell'e-mail, sostituisci # con @) per segnalare il problema e fornire prove pertinenti. Una volta verificata, questo sito eliminerà immediatamente il contenuto sospetto di violazione del copyright.

Manuale di base