VUE（二 元件與路由）

2022-05-07 03:00:10 字數 1293 閱讀 1348

先來理解main.js

import vue from 'vue'


import router from './router'


vue.config.productiontip = false


/* eslint-disable no-new */


new vue()
.vue檔案，在vue中，官網叫它做元件，單頁面的意思是結構，樣式，邏輯**都寫在同乙個檔案中，當我們引入這個檔案後，就相當於引入對應的結構、樣式和js**。

檔案內分為三大部分，分別是，很好理解結構，指令碼，樣式。

<


template


>


<


div 


id>


<


img 


src="./assets/logo.png"


>


<


router-view


>


router-view


>


div>


template


>



這個的意思是在頁面中放入乙個路由檢視容器，我們根據訪問路徑不同，跳轉不同頁面

開啟router下面的index.js，配置路由規則。

import vue from 'vue'


import router from 'vue-router'


import helloworld from '@/components/helloworld'


import page from '@/components/page/page'


import page1 from '@/components/page/page1'


import page2 from '@/components/page/page2'


vue.use(router)


export default new router(, ,]}


]})
訪問http://localhost:8080/#/page/page1到page1頁面，訪問http://localhost:8080/#/page/page2到page2頁面。

這裡要注意，children的上級配置component裡必須要有才會生效。

VUE 元件（二）元件通訊

元件關係可分為父子元件通訊 兄弟元件通訊 跨級元件通訊。一 自定義事件 當子元件向父元件傳遞資料時，就要用到自定義事件 子元件用 emit 來觸發事件，父元件用 on 來監聽子元件事件 通過兩個按鈕實現 1 1的效果，在改變元件data中的count後，通過 emit 將值傳給父元件，父元件用v o...

Vue 二 元件間通訊

父元件中定義元素 如job 初始化 data 資料 data function 父元件中子元件標籤中定義並繫結資料 如 job job 等號左邊屬性名需和子元件定義 呼叫的寫法一樣，右邊表示父元件中的資料元素 name name job job namewasreset name event res...

Vue入門（2）元件

元件是可復用的 vue 例項，且帶有乙個名字。元件是vue.js最強大的功能之一。元件可以擴充套件html元素，封裝可重用的 在較高層面上，元件是自定義的元素，vue.js的編譯器為它新增特殊功能。在有些情況下，元件也可以是原生html元素的形式，以is特性擴充套件。1.區域性元件的建立 div 區...