vue元件傳值和腳手架下載
阿新 • • 發佈:2020-08-28
1.區域性元件:三步:聲子、掛子、用子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <!-- 用子 --> <App></App> </div> </body> <script src="../vue.js"></script> <script> // 聲子 let App = { data(){ return { appmsg:'我是app元件', } }, template:` <div class="app"> <h1>{{appmsg}}</h1> </div> `, } let vm= new Vue({ el:'#app', data(){ return { // appmsg:'xxxx' } }, components:{ // App:App, // 掛子 App, } }) </script> </html>
2.全域性元件:聲子、用子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <!-- 用子 --> <App></App> <num></num> </div> </body> <script src="../vue.js"></script> <script> // 聲子 全域性元件 Vue.component('num',{ data(){ return { nummsg:'我是全域性num元件', num:100, } }, template:` <div class="app"> <h1>{{nummsg}}</h1> <h1>{{num}}</h1> </div> `, }) // 聲子 區域性元件 let App = { data(){ return { appmsg:'我是app元件', } }, template:` <div class="app"> <h1>{{appmsg}}</h1> </div> `, } let vm = new Vue({ el:'#app', data(){ return { // appmsg:'xxxx' } }, components:{ // App:App, // 掛子 App, } }) </script> </html>
3.元件傳值
3.1父元件往子元件傳值
兩步:1 在父元件使用子元件的標籤上加自定義屬性
2 在子元件中宣告props屬性來接受資料
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <!-- 用子 --> <App></App> </div> </body> <script src="../vue.js"></script> <script> // header footer section main...不要和h5中的新標籤名衝突 let Vheader = { data(){ return { msg:'我是vheader元件', } }, template:` <div class="vheader"> <button>{{msg}}</button> <h2>{{xx}}</h2> </div> `, props:['xx', ] } //<Vheader xx="30"></Vheader> 靜態傳值 //<Vheader :xx="num"></Vheader> 動態傳值 // 聲子 let App = { data(){ return { appmsg:'我是app元件', num:20, } }, components:{ Vheader, }, template:` <div> <Vheader :xx="num"></Vheader> </div> ` } let vm = new Vue({ el:'#app', // data(){ return { // appmsg:'xxxx' } }, components:{ // App:App, // 掛子 App, } }) </script> </html>
3.2子元件往父元件傳值
兩步
1 子元件中使用this.$emit('父元件的自定義事件名稱',值),
2 父元件中定義一個父元件的自定義事件名稱對應的那個方法來接受資料
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <!-- 用子 --> <App></App> </div> </body> <script src="../vue.js"></script> <script> // header footer section main...不要和h5中的新標籤名衝突 let Vheader = { data(){ return { msg:'我是vheader元件', count:180, } }, template:` <div class="vheader"> <button>{{msg}}</button> <button @click="zouni">走你</button> </div> `, methods: { zouni(){ this.$emit('fatherxx',this.count); } } // created(){ // // } } // 聲子 let App = { data(){ return { appmsg:'我是app元件', num:20, soncount:'', } }, components:{ Vheader, }, template:` <div> <p style="color:red;">{{soncount}}</p> <Vheader @fatherxx="xx"></Vheader> </div> `, methods:{ xx(val){ this.soncount = val; } } } let vm = new Vue({ el:'#app', // data(){ return { // appmsg:'xxxx' } }, components:{ // App:App, // 掛子 App, } }) </script> </html>
3.3平行元件傳值
三步
1 宣告一個公交車
2 往公交車上放資料
3 從公交車上拿資料
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <!-- 用子 --> <App></App> </div> </body> <script src="../vue.js"></script> <script> let bus = new Vue(); // Vue.component('v1',{ data(){ return { nummsg:'我是v1元件', num:100, } }, template:` <div class="app"> <h1>{{nummsg}}</h1> <h1>{{num}}</h1> <button @click="zouni">走你!</button> </div> `, methods:{ zouni(){ bus.$emit('v1xx',this.num); } } }); Vue.component('v2',{ data(){ return { nummsg:'我是v2元件', num:120, v1num:'', } }, template:` <div class="app"> <h1>{{nummsg}}</h1> <h1>{{num}}</h1> <p style="color:blue;">{{v1num}}</p> </div> `, created(){ bus.$on('v1xx', (val) => { // console.log(val); // console.log(this); this.v1num = val; }) } }) // 聲子 let App = { data(){ return { appmsg:'我是app元件', num:20, soncount:'', } }, template:` <div> <v1></v1> <v2></v2> </div> `, } let vm = new Vue({ el:'#app', // data(){ return { // appmsg:'xxxx' } }, components:{ // App:App, // 掛子 App, } }) </script> </html>
4.vue-router
通過不同的訪問路徑,載入不同的元件到單頁面中(那一個html檔案),vue做的叫做單頁面應用(SPA).
文件:https://router.vuejs.org/zh/
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <App></App> </div> </body> <script src="../vue.js"></script> <script src="vue-router.js"></script> <script> // 第一步: Vue.use(VueRouter); // 將VueRouter功能注入到Vue中 // 第二步:寫元件 let home = { data(){ return { msg:'我是home頁面', } }, template:` <div class="home"> <h1>{{msg}}</h1> </div> `, } let spa = { data(){ return { msg:'我是spa頁面', } }, template:` <div class="spa"> <h1>{{msg}}</h1> </div> ` } // 127.0.0.1:8000/home/ // 127.0.0.1:8000/spa/ // 聲子 let App = { data(){ return { appmsg:'我是app元件', num:20, soncount:'', } }, // a href='/home/' // 第六步:寫連線,寫出口 template:` <div> <router-link to="/home/">首頁</router-link> <router-link to="/spa/">spa頁</router-link> <router-view></router-view> </div> `, } // 第三步:寫路由規則 const routes = [ {path:'/home/', component:home, }, {path:'/spa/', component:spa, }, ] // 第四步:例項化vue-router物件 let router = new VueRouter({ routes, }) // 第五步:掛載router物件 let vm = new Vue({ el:'#app', // router, // 掛載到vue物件上 data(){ return { // appmsg:'xxxx' } }, components:{ // App:App, // 掛子 App, } }) </script> </html>
5. vue-cli腳手架
先下載node.js
node -v
npm -v
npm install -g vue-cli --registry=https://registry.npm.taobao.org
建立專案
vue init webpack 專案名稱
按照提示,執行專案
npm run dev