3 Vue單檔案元件

2022-02-10 12:11:18 字數 740 閱讀 4581

1.問題

單檔案元件的組成結構

//建議為每個style都新增乙個scoped的指令,從而防止元件樣式之間的衝突問題,保證每個元件的樣式都是自己私有的,不會影響到其他的元件

1 執行 npm i vue-loader vue-template-compiler -d命令

2 在webpack.config.js配置檔案中,新增vue-loader的配置如下:

//匯入外掛程式

const vueloaderplugin = require('vue-loader/lib/plugin')

module.exports=]},

plugins:[

//...其它外掛程式

new vueloaderplugin()//請確保引入這個外掛程式!

]}

//1.匯入vue建構函式

import vue from 'vue'

const vm = new vue()

上線之前需要通過webpack將應用進行整體打包,可以通過package.json檔案配置打包命令:

//在package.json檔案中配置webpack打包命令

//該命令預設載入專案根目錄中的webpack.config.js配置檔案

"scripts":,

執行npm run build打包

(3)Vue 元件傳值

父子元件之間的通訊 props down,events up 1 父元件向子元件傳遞 props down hello.vue 子元件 如圖所示,按鈕顯示的資訊來自父元件 2 子元件向父元件傳遞 events up 子元件通過this.emit 事件名 引數 觸發自定義事件 hello.vue 子元...

Vue學習筆記3 Vue外掛程式

ref在dom上獲取的是原生dom物件 ref在元件上獲取的是元件物件 refs 獲取元件內的元素 parent 獲取當前元件物件的父元件 children 獲取子元件 root 獲取new vue的例項 el 元件物件的dom元素 前端路由 前端框架vue angular react都適合開發單頁...

vue 單檔案元件

vue.js自定義的一種檔案格式 vue檔案,稱為單檔案元件,就是將html css js封裝在同乙個檔案內,從而實現了對乙個元件的封裝,乙個.vue 檔案就是乙個單獨的元件。1 編寫單檔案元件 vue結尾的檔案 由3部分組成 html template css style js script ht...