如何在require中使用VUE

2022-01-16 11:11:54 字數 3038 閱讀 2236

現在網上抄的沸沸揚揚的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 經典電影

6

7 8

9 換一換

10

11

25 26 click me!

27 歡迎使用 iview

28

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

如何在AndroidStudio中使用AIDL

本章節介紹如何在androidstudio中使用aidl 2.在aidl下建立乙個包,包裡建立乙個 aidl檔案,右鍵aidl new aidl aidl file 紅框就是建立完成後的樣子 3.在aidl檔案寫要被呼叫的方法,此方法不能有許可權修飾符 4.首先build下,然後建立乙個servic...

如何在Oracle中使用Sequence

sql server可以自增字段,但是oracle中在建表的時候可沒有這個選項,但是可以通過觸發器 trigger 或者序列 sequence 來實現,本文主要講述sequence。二者的區別oracle中自增字段的兩種方法的比較 trigger和sequence 建立sequence的語法很簡單,...

如何在Oracle中使用Sequence

sql server可以自增字段,但是oracle中在建表的時候可沒有這個選項,但是可以通過觸發器 trigger 或者序列 sequence 來實現,本文主要講述sequence。二者的區別oracle中自增字段的兩種方法的比較 trigger和sequence 在oracle中,沒有象ms sq...