本篇內(nèi)容主要講解“用vue寫的頁(yè)面后綴名怎么表示”,感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷,實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“用vue寫的頁(yè)面后綴名怎么表示”吧!
創(chuàng)新互聯(lián)建站是一家專業(yè)從事網(wǎng)站建設(shè)、做網(wǎng)站、網(wǎng)頁(yè)設(shè)計(jì)的品牌網(wǎng)絡(luò)公司。如今是成都地區(qū)具影響力的網(wǎng)站設(shè)計(jì)公司,作為專業(yè)的成都網(wǎng)站建設(shè)公司,創(chuàng)新互聯(lián)建站依托強(qiáng)大的技術(shù)實(shí)力、以及多年的網(wǎng)站運(yùn)營(yíng)經(jīng)驗(yàn),為您提供專業(yè)的成都網(wǎng)站建設(shè)、營(yíng)銷型網(wǎng)站建設(shè)及網(wǎng)站設(shè)計(jì)開(kāi)發(fā)服務(wù)!
用vue寫的頁(yè)面后綴名是“.vue”?!?vue”文件是一個(gè)自定義的文件類型,用類HTML語(yǔ)法描述一個(gè)Vue組件;一個(gè)vue文件就是一個(gè)組件。vue頁(yè)面有3個(gè)組成部分:1、模板(template),即template標(biāo)簽包裹的界面展示代碼(HTML代碼);2、script標(biāo)簽包裹的業(yè)務(wù)實(shí)現(xiàn)代碼(js腳本代碼);3、style標(biāo)簽包裹的界面樣式代碼(css樣式代碼)。
用vue寫的頁(yè)面后綴名是“.vue
”。
.vue 文件是一個(gè)自定義的文件類型,用類 HTML 語(yǔ)法描述一個(gè) Vue 組件。每個(gè) .vue 文件包含三種類型的頂級(jí)語(yǔ)言塊 、
把每個(gè)組件都放到一個(gè)獨(dú)立的.vue文件里,
文件的后綴是:.vue
文件
此文件三大部分: template
、 script
、 style
template
寫html結(jié)構(gòu)的
注意這里的html部分必須用一個(gè)標(biāo)簽全包住
script
寫邏輯的,data、methods、生命周期鉤子、計(jì)算屬性等等代碼都寫在這個(gè)部分
注意這里的data不再是一個(gè)對(duì)象,在組件里,data將會(huì)是一個(gè)函數(shù),return一個(gè)對(duì)象。
style
在css中的導(dǎo)入(主體使用):
寫樣式的
如何 導(dǎo)入外部css,
@import url(./babel.css);
快捷鍵快速生成:
單文件組件的運(yùn)行
在cmd窗口該vue文件根目錄下輸入vue serve index.vue
這里index.vue
是需要運(yùn)行的單文件組件的路徑
vue serve index.vue
注意點(diǎn)
template里面的html部分必須用一個(gè)標(biāo)簽全包住
組件里沒(méi)有el,組件是無(wú)需掛載到哪的,里面已經(jīng)有template是它的使用的html了
data在組件里面是一個(gè)function,return 一個(gè)對(duì)象
如何在一個(gè)組件中引入其它組件,實(shí)現(xiàn)一個(gè)組裝。
組件的使用三步
1:導(dǎo)入組件
import 自定義的一個(gè)組件名 from "組件路徑";
注意點(diǎn),這里組件路徑就算是當(dāng)前同一目錄也最好加上"./組件名",不然會(huì)報(bào)錯(cuò)
2:注冊(cè)組件
組件的使用是需要注冊(cè)的,注冊(cè)方式為:
export default {
components: {
組件名, //注冊(cè)的組件都寫在components對(duì)象下。
}
}
3:使用組件(寫到相應(yīng)html位置即可)
<組件名>組件名> //該組件名來(lái)自于在組件注冊(cè)時(shí)的組件名
以axios為例
使用外部插件分為三步
裝包(安裝外部插件)
npm i axios //到相應(yīng)目錄下執(zhí)行該命令
導(dǎo)包(在單文件組件中導(dǎo)入外部插件)
import axios from "axios"
用包(在相應(yīng)代碼位置使用)
使用和以前一樣,該怎么用還是怎么用
axios({
url:"xxx"
}).then(res=>{
})
DEMO
- {{item.name}}
如果A組件中引入了B組件 ,這樣我們稱A組件為父組件,B為子組件
父組件傳值給子組件
在子組件標(biāo)簽上定義一個(gè)ref屬性
<組件名 ref="xxx">組件名>
在需要給子組件傳值的地方寫入:
this.$refs.xxx //這就代表了子組件xxx的vue實(shí)例
//這里xxx代碼標(biāo)簽中定義的ref屬性名這里就可訪問(wèn)到子組件里面的data屬性與methods方法
//如要修改子組件里面data里的某個(gè)值: this.$refs.xxx.子組件里data屬性名
//如果需要調(diào)用子組件里面methods里某個(gè)方法: this.$refs.xxx.子組件里面methods里方法名
子組件傳值給父組件
this.$parent //這就代表父組件的vue實(shí)例
//如要修改父組件里面data里的某個(gè)值: this.$parent.父組件里data屬性名
//如果需要調(diào)用父組件里面methods里某個(gè)方法: this.$parent.父組件里面methods里方法名
//兩個(gè)組件,這個(gè)是father.vue
直通車
腳手架就是個(gè)項(xiàng)目模板 , 相當(dāng)于把整個(gè)文件基本目錄結(jié)構(gòu)搭好了,把必要的文件也建好 了,讓我們省了很多事情。
創(chuàng)建時(shí)路徑不要選錯(cuò),就是命令的路徑要是需要?jiǎng)?chuàng)建項(xiàng)目的文件夾下
完美選擇不出錯(cuò)路徑方法:在文件夾相應(yīng)路徑下的地址欄輸入cmd ---再 回車
運(yùn)行創(chuàng)建命令
vue create 項(xiàng)目名 //這里項(xiàng)目名不要有中文,不要有大寫字母,不要搞特殊符號(hào),盡可能有意義 ,像普通變量命名一樣
彈出的對(duì)話框先選擇默認(rèn)的選項(xiàng)(如下圖)
稍等一會(huì),等進(jìn)度條走完 提示如下畫面說(shuō)明成功了,如下圖:
進(jìn)入項(xiàng)目文件夾(就是項(xiàng)目名的文件夾)
cd 項(xiàng)目名 直接根據(jù)提示即可
運(yùn)行項(xiàng)目(根目錄,readme同級(jí)目錄)
npm run serve
稍等片刻 ,出現(xiàn)如下效果說(shuō)明成功了
項(xiàng)目結(jié)構(gòu)說(shuō)明:
node_modules 第三方模塊包,也就是項(xiàng)目所需要用到的依賴包
public
favicon.ico 運(yùn)行項(xiàng)目時(shí)在網(wǎng)頁(yè)上顯示 的小圖標(biāo)
index.html 項(xiàng)目的頁(yè)面模板 ,也就是項(xiàng)目運(yùn)行最開(kāi)始,是先執(zhí)行這個(gè)模板html的
src 項(xiàng)目開(kāi)發(fā)主體就是在這個(gè)src目錄下面
assets 項(xiàng)目所需要的靜態(tài)資源,如css,圖片等文件
components 項(xiàng)目中的單文件組件都放這里
App.vue 入口組件 ,可以理解為一個(gè)項(xiàng)目就是一個(gè)app.vue的單文件組件,只不過(guò)里面包括了很多小組件
main.js 入口js文件,進(jìn)入項(xiàng)目會(huì)優(yōu)先執(zhí)行main.js以此來(lái)運(yùn)行app.vue
.gitignore 讓git忽略某些文件,文件夾
babel.config.js js編譯的設(shè)置,比如把高版本的js轉(zhuǎn)為低版本的js,讓項(xiàng)目達(dá)到更好兼容性
package-lock.json 項(xiàng)目模塊詳細(xì)信息,包括來(lái)源。
package.json 項(xiàng)目基本信息
README.md 項(xiàng)目說(shuō)明
main.js
中
最后我們看到的整個(gè)網(wǎng)站其實(shí)就是App.vue
創(chuàng)建了最外層的Vue
實(shí)例
把App.vue
這個(gè)組件,當(dāng)做Vue
實(shí)例內(nèi)部的最頂級(jí)組件并渲染到index.html
上去
到此,相信大家對(duì)“用vue寫的頁(yè)面后綴名怎么表示”有了更深的了解,不妨來(lái)實(shí)際操作一番吧!這里是創(chuàng)新互聯(lián)網(wǎng)站,更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢,關(guān)注我們,繼續(xù)學(xué)習(xí)!