成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

【呆萌の體驗(yàn)】vue.js初次體驗(yàn)

wdzgege / 1364人閱讀

摘要:官方默認(rèn)項(xiàng)目是存放了一個(gè)為的打開(kāi)文件夾有一個(gè),還有一個(gè)名為組件的文件夾,里面放了一個(gè)文件。部分我們會(huì)發(fā)現(xiàn)這幾排字就是顯示在頁(yè)面的幾排文字部分這其中的這個(gè)文件引入了,還有上述的。結(jié)合查詢(xún)其他說(shuō)法,就是說(shuō)它會(huì)把是的元素以形式替換。

前言

我很早就想來(lái)學(xué)習(xí)學(xué)習(xí)vue.js啦,終于有了那么一些空閑的時(shí)間可以拿來(lái)學(xué)習(xí),于是從前天開(kāi)始我就每天抽一個(gè)多小時(shí)來(lái)體驗(yàn)vue.js。
當(dāng)然啦,因?yàn)槭切“兹腴T(mén),這其中可能會(huì)有“錯(cuò)誤”或者不恰當(dāng)?shù)恼f(shuō)法,還請(qǐng)各位大神能多指正我(●"?"●)。

Vue.jsの安裝

Vue.js官網(wǎng):https://cn.vuejs.org/v2/guide...
固然最好的資料就是官網(wǎng)了,所以一開(kāi)始我在官網(wǎng)上看了一些基本的用法,然后就跟著官方的安裝教程安裝(https://cn.vuejs.org/v2/guide...),過(guò)程比較順利,也相對(duì)容易。
安裝好vue和vue-cli之后,就可以初始化項(xiàng)目了,運(yùn)行

vue init webpack my-project

之后,出現(xiàn)了一個(gè)名為my-project的項(xiàng)目文件夾。進(jìn)去之后就會(huì)發(fā)現(xiàn)整個(gè)項(xiàng)目的結(jié)構(gòu):

當(dāng)然node_modules這個(gè)文件夾是后面才出現(xiàn)的,也就是我們還要運(yùn)行

npm install

這個(gè)命令會(huì)根據(jù)pakage.json里的依賴(lài)內(nèi)容去安裝相關(guān)的依賴(lài)包,但是我就是在這里遇到了一個(gè)小麻煩,就是它很久都沒(méi)有反應(yīng),后來(lái)查詢(xún)才知道是因?yàn)槊顣?huì)去國(guó)外的網(wǎng)站去下載的,速度太慢了,所以我們最好用國(guó)內(nèi)的鏡像去下載。直接下載淘寶的cnmp命令行工具(https://npm.taobao.org/)或者借用鏡像地址下載就可以解決問(wèn)題。

npm install --registry=https://registry.npm.taobao.org

最后,只要輸入

npm run dev

就可以運(yùn)行項(xiàng)目了,會(huì)在git上看到如下圖的提示,瀏覽器也會(huì)自動(dòng)打開(kāi)頁(yè)面:

看到官網(wǎng)的默認(rèn)頁(yè)面就是運(yùn)行成功了。

demo頁(yè)面是怎么組成的?

我們看看這個(gè)文檔結(jié)構(gòu)的文件,要找到入手改代碼的地方,就要知道這些文件是做什么用的。

index.html:官方默認(rèn)項(xiàng)目是存放了一個(gè)ID為app的DIV

打開(kāi)src文件夾:

有一個(gè)main.js、App.vue,還有一個(gè)名為組件的文件夾,里面放了一個(gè)HelloVue.vue文件。我們都打開(kāi)看看。
HelloVue.vue部分

  

我們會(huì)發(fā)現(xiàn)這幾排字就是顯示在頁(yè)面的幾排文字~
App.vue部分



這其中的", components: { App } })

這個(gè)文件引入了App.vue,還有上述的router.js。并在下面用到了App的組件。
所以可以得出一個(gè)簡(jiǎn)單的結(jié)論:以main.js為中心,main.js引進(jìn)了App.vue,App.vue借助使用到了HelloWorld。
在main.js中這個(gè)組件對(duì)準(zhǔn)了id是app的元素,使用APP組件去替換。
其中有一句template: "",官方對(duì)template(https://cn.vuejs.org/v2/api/#...)的解釋是:

一個(gè)字符串模板作為 Vue 實(shí)例的標(biāo)識(shí)使用。模板將會(huì) 替換 掛載的元素。掛載元素的內(nèi)容都將被忽略,除非模板的內(nèi)容有分發(fā)插槽。
結(jié)合查詢(xún)其他說(shuō)法,就是說(shuō)它會(huì)把id是app的元素以形式替換。
修改和比較

router-view替換
在App.vue中,不用寫(xiě)出一樣的效果