2. 程式人生 > 實用技巧 >vue元件傳值和腳手架下載

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

下載地址：https://nodejs.org/en/download/【如果已經安裝了nvm，那麼這裡不用手動安裝了】

node -v
npm -v

安裝vue- cli

npm install -g vue-cli --registry=https://registry.npm.taobao.org

建立專案

vue init webpack 專案名稱

按照提示，執行專案

npm run dev

相關推薦

vue元件傳值和腳手架下載

1.區域性元件:三步：聲子、掛子、用子 <!DOCTYPE html> <html lang=\"en\"> <head>

關於vue元件傳值和事件繫結問題

<template> <view style=\"width: 100%; height: 100%;\"> <view class=\"tabs\"> <view v-for=\"(tab, index) in tabs\" :key=\"index\" class=\"tab-item\" :class=\"current==index&&a

Vue-元件傳值：子傳父和兄弟元件間常見的傳值方式

前言 上篇介紹了我對vue元件化的理解和父元件對子元件傳值的方式，這篇介紹下常見的子傳父和兄弟元件間的傳值方式

vue元件傳值的實現方式小結【三種方式】

本文例項講述了vue元件傳值的實現方式。分享給大家供大家參考，具體如下：

前端入職學習筆記-第二週第三天（vue元件傳值：Bus傳值、路由傳值、Vuex傳值）

Bus匯流排 1 定義Bus匯流排 　　在main.js中定義Bus匯流排　　 　　constBus=newVue() 　　然後將Bus新增到new Vue中的data裡面　　

vue元件傳值的幾種方式

1、bus匯流排 //定義bus外掛 //在util資料夾下定義bus.js import Vue from \'vue\'; let install = (vue) => {

vue元件傳值 | 子父元件

一、子父元件 1、子元件獲得父元件中的值：通過v-bind方式繫結在子元件中 // 子元件中定義propsprops: [\'msg\']

Vue元件傳值--父子元件中的傳值--兄弟元件中的傳值(個人總結)

父子元件中的傳值 1.方法一（官網標準） 父向子v-bind props <!-- 父元件使用v-bind傳值 -->

小程式元件傳值和引入sass的方法(使用vant Weapp元件庫)

1.生命週期 1.onLoad()：頁面載入時觸發，一個頁面只加載一次。 2.onShow()：頁面顯示切換的時候觸發

Vue元件傳值過程中丟失資料的分析與解決方案

前言 在上一篇文章 javascript 中的兩種資料型別中，分別介紹了基本型別和引用型別，以及引用型別的淺拷貝與深拷貝。這裡需要注意的是，該qYnSqHF文章中深拷貝引用型別值的方法，並不是完美的，引用型別值中的某些屬

vue元件傳值eventBus

VUE eventBus問題背景：元件傳值；在專案開發中，會發現元件傳值是一個組基本的操作，也是用的最多的。但是很多時候可能涉及到爺爺和孫子，甚至重孫子之間需要的傳值。這個時候eventBus就到了大顯身手的時候了。eve

Vue父元件向子元件傳值以及data和props的區別詳解

1.在父元件中定義 msg 屬性 data:{ msg:\'123 -我是父元件中的資料\' }, 2.引用子元件

vue element 父元件和子元件 傳值

vue 父元件與子元件相互通訊 一、父元件給子元件傳值 props 實現父元件向子元件傳值。

vue 子元件和父元件傳值的示例

一、子元件向父元件傳值 1：子元件中（例：） 2：父元件中（例：） 二、父元件向子元件傳值

Vue專案開發隨記（父子元件傳值，computed和watch區別）

本部落格主要記載在做專案的時候遇到的一些小問題，需要溫習的小知識 Vue父子元件傳值

vue父子元件的互相傳值和呼叫

1、父傳值給子元件 父元件： <template> <div> <p class=\"father\">父元件</p>

Vue元件間傳值 和 訪問

1、根元件向子元件傳值 ：使用props屬性 <html> <body> <script src=\"vue.js\"></script>

vue-父子元件之傳值和單項資料流問題

前言 　　我們知道 vue 中父子元件的核心概念是單項資料流問題，props 是單項傳遞的。那究竟什麼是單項資料流問題，這篇文章來總結一下關於這個知識點的學習筆記。

淺談vue中provide和inject用法(父元件向孫元件傳值)

一、概念解析 成對出現：provide和inject是成對出現的 作用：用於父元件向子孫元件傳遞資料

快速瞭解Vue父子元件傳值以及父調子方法、子調父方法

稍微總結了一下Vue中父子間傳值以及相互調方法的問題，非常基礎、希望可以幫到你！先來個最常用的，直接上程式碼：