Vue.js a file corresponds to a component practice _javascript skills

This aspect of the official website to the example is needed tools to compile, but Nodejs and no energy to learn, had to curve the nation. Vuejs's author, in another Web site, had an article about the use of jquery.getscript or Requirejs to implement components, but did not give examples, so they found a way.

Tools to use :

Vue.js---0.12.+ (requires async component support in 0.12)
Require.js
Text.js---requirejs text plugin https://github.com/requirejs/text

File list

Index.html
Index.js
Comp.js (the component is defined here)
Comp.html (template for components)

In fact, the component is divided into JS and html,html is the template content, this seems to be "a file with a component" slightly inconsistent, but if the template content is more, this is necessary, and easier to maintain. directly on the code.

comp.html-- component templates

So far, a simple template has been built. Then you register this component in the Vuejs.

Index.js

require.config {
 paths: {//Specify the path of Text.js and vue.js, do not need the. js suffix, see Requirejs document
 text: '. /.. /.. /assets/requirejs/text ',
 vue: '. /.. /.. /assets/vue/vue '
 }
});

Require ([' vue '], function (vue) {//dependent vue.js
 vue.component (' comp ', function (resolve) {///Register an asynchronous component
 require ([ ' Comp '], function (comp) {//Because we want to load the component on demand, so require ([' comp ']) must be in the function
 Resolve (comp)
 })
 });
 New Vue ({
 el: ' Body '
 });

 New Vue ({
 //el: ' Body ',
 //components: {
 //comp:function (Resolve) {
 //require ([' comp '], functi On (comp) {
 //Resolve (COMP)
 //})
 ///
 //
 }//})
;

Index.html

<! DOCTYPE html>
 
 

Run the code, and you can see the difference by dropping <component> comments.

If there are more components, the registration component is cumbersome, so you can distill this part.

The improved Index.js

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 '
 });

So far.

This article has been organized into the "Vue.js front-end component Learning course", welcome to learn to read.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.