如何在require中使用VUE

現在網上抄的沸沸揚揚的vue看來是個很nb的東西啊，看了一下，確實相對於angular1來說簡化了不少東西，效能方面也比angular1要好很多，所以現在用的人越來越多了，於是作為前端，學習一下新東西不至於被淘汰那是必須的~在網上看了一下，感覺還不錯，打算用它寫個單頁面應用。於是……坑就跟著來了……

先來看看require的入口js吧！

1 require.config(,
11     waitseconds:3
12 });
13 require(['common','jquery','vue','vuerouter','iview'],function(common,$,vue,vuerouter,iview),
22             }
'26                 }
27             },
28             
33             },
34             
38         ]
39     });
40 41     common.load();
42     common.load2();
43     var vm=new vue(,
48         components:,
51         methods:
55         },
56         router:router
57     });
58 59 });

配置檔案就不用說了，如果連require也不會的話就先去學學require吧！這裡不再贅述了~我這裡引用了vuerouter作為單頁面的路由，其中我還引入了jquery，有人說vue不能和jq一起使用，但是經過實驗是可以的！這裡還涉及到了兩個前端的ui庫，乙個是iview，乙個是element，雖然看上去差不多，但是具體用起來還是有區別的，這裡就以iview為例介紹一下吧（這兩個ui庫是不能混用的，否則會有意想不到的「驚喜」）！再有一點要說明的就是我用的require和vue的版本號，都是2.0以上的，我看網上有很多把vue寫到require的shim裡面去的，其實是不用的！vue2.0是支援amd的！包括它的外掛程式vuerouter和iview都支援！所以shim是不用的！而且我用的jq是1.9的，也是支援amd的，這一點來說的話個大庫的公司還是有一致性的！

好了說完了主檔案再來看看模組吧！

1 define(["vue","text!../vuetemp/1.html","text!../vuetemp/2.html","iview"],function(vue,templates,templates2,iview)
9             }
10         });
11     }
12     function load2()
19             },
20             methods:
24             }
25         });
26     }
27     var ob=,
39                     ,
45                     ,
51                     ,
57                     ,
63                     ,
69                     ,
75                     ,
81                     ,
87                     
93                 ],
94                 randommovielist: 
95             }
96         },
97         methods:,
101             changelimit:function() 
107                     const return_array = ;
108                     for (let i = 0; i0)  else 
116                     }
117                     return return_array;
118                 }
119                 this.randommovielist = getarrayitems(this.movielist, 5);
120             }
121         },
122         mounted () 
125     }
126     return 
131 });

這裡因為沒法用.vue檔案，所以只能這麼寫了，就是引入模板，然後再在下面配置元件的各種屬性方法等等，然後封裝成乙個object，然後傳出去，在路由的地方使用，或者直接註冊進全域性的vue裡面，然後上面的兩個是定義的乙個全域性元件，直接在主檔案中呼叫就ok了，可以看一下文章開頭那段**的41和42行。

接下來就是最重要的模板了（要不是為了方便引入模板，我才不用require呢）~

1 2 遠端載入的模板！}
3 9

1 2 3 4

5 經典電影

7 8

9 換一換

25 26 click me!

27 歡迎使用 iview

這兩段就是模板檔案，直接引入之後加入進去就行了，雖然不能用.vue檔案，但是有個好處就是我們可以直接拿html來用~而且還支援語法提示和高亮！也算是一種補償吧~

如何在require中使用VUE

如何在AndroidStudio中使用AIDL

如何在Oracle中使用Sequence

如何在Oracle中使用Sequence

如何在require中使用VUE

如何在AndroidStudio中使用AIDL

如何在Oracle中使用Sequence

如何在Oracle中使用Sequence

相關推薦