vue2.0開發(fā)入門筆記之.vue文件的生成和使用
這幾天新項(xiàng)目用vue2.0開發(fā)，由于之前沒用過vue，拿到項(xiàng)目框架看到都是.vue文件，
不知道怎么用，以下是關(guān)于.vue文件的發(fā)現(xiàn)：
1、一個(gè).vue文件是一個(gè)封裝的組件，在.vue文件里可以寫 html, css, js
其中template 中寫html 代碼，其實(shí)就是定義模板。
2、各個(gè).vue之間樣式不是獨(dú)立的，同一選擇器在不同的.vue里只要滿足選中的條件就可以起作用.比如我在箭頭1指的文件里定義了樣式 .box{ width:200px; },如果在箭頭2指的文件里也有 .box，那么 .box{ width:200px; }就會(huì)在箭頭2的文件也起作用，除非是在箭頭2的文件重新定義樣式并覆蓋。
3、不使用.vue 單文件時(shí)，通過 Vue 構(gòu)造函數(shù) 創(chuàng)建一個(gè) Vue 根實(shí)例來啟動(dòng)vuejs 。.vue文件中不用Vue創(chuàng)建實(shí)例，用export default 。 .vue文件中 export default 后面的對(duì)象 就相當(dāng)于 new Vue() 構(gòu)造函數(shù)中的接受的對(duì)象：
即：
<script>
export default{
data:function(){
return {
//返回一個(gè)對(duì)象
}
},
methods:{
//定義方法
}
}
</script>
4、可以引入less等：
5、在route.js中設(shè)置跳轉(zhuǎn)路徑是，如果調(diào)到某一文件夾下的 index.vue文件，則可以省略文件夾后的 index.vue。要跳轉(zhuǎn)到這個(gè)文件時(shí)：
則下面這兩句話是等價(jià)的：
所以一般是省略掉文件夾后的index.vue。
以上關(guān)于這個(gè).vue的組件應(yīng)用，希望對(duì)您有所幫助。也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue3?關(guān)于reactive的重置問題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
Vue中transition單個(gè)節(jié)點(diǎn)過渡與transition-group列表過渡全過程
這篇文章主要介紹了Vue中transition單個(gè)節(jié)點(diǎn)過渡與transition-group列表過渡全過程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue中動(dòng)態(tài)添加style樣式的幾種寫法總結(jié)
這篇文章主要介紹了vue中動(dòng)態(tài)添加style樣式的幾種寫法總結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
基于vue的短信驗(yàn)證碼倒計(jì)時(shí)demo
這篇文章主要介紹了基于vue的短信驗(yàn)證碼倒計(jì)時(shí)demo，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
vue2.0$nextTick監(jiān)聽數(shù)據(jù)渲染完成之后的回調(diào)函數(shù)方法
今天小編就為大家分享一篇vue2.0$nextTick監(jiān)聽數(shù)據(jù)渲染完成之后的回調(diào)函數(shù)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue組件間通信方法總結(jié)（父子組件、兄弟組件及祖先后代組件間）
這篇文章主要給大家介紹了關(guān)于Vue組件間通信的相關(guān)資料，其中包括父子組件、兄弟組件及祖先后代組件間的通信，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
Vue項(xiàng)目中引入字體文件的幾種方法總結(jié)
在 Vue 項(xiàng)目中引入自定義字體文件,可以通過多種方式實(shí)現(xiàn),這取決于你的項(xiàng)目結(jié)構(gòu)、構(gòu)建工具以及字體文件的來源,本文將詳細(xì)介紹如何通過不同方法引入本地字體文件以及從外部引入字體,需要的朋友可以參考下2024-10-10
這篇文章主要介紹了vue中如何初始化data數(shù)據(jù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
vue項(xiàng)目前端錯(cuò)誤收集之sentry教程詳解
Sentry 是一個(gè)開源的錯(cuò)誤追蹤工具，可以幫助開發(fā)人員實(shí)時(shí)監(jiān)控和修復(fù)系統(tǒng)中的錯(cuò)誤。這篇文章主要介紹了vue項(xiàng)目前端錯(cuò)誤收集之sentry,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-05-05
前端vue如何通過URL訪問存儲(chǔ)在服務(wù)器或磁盤的圖片
在Vue中,通常需要將圖片存儲(chǔ)在服務(wù)器端,并通過url地址來訪問,下面這篇文章主要給大家介紹了前端vue如何通過URL訪問存儲(chǔ)在服務(wù)器或磁盤的圖片的相關(guān)資料,需要的朋友可以參考下2024-02-02