Vue組件與Vue cli腳手架安裝方法超詳細講解

更新時間：2022年11月03日 09:48:23 作者：GG_Bonin

CLI是一個全局安裝的npm包，提供了終端里的vue命令。它可以通過vue create快速搭建一個新項目，或者直接通過vue serve構(gòu)建新想法的原型。你也可以通過vue ui通過一套圖形化界面管理你的所有項目

計算屬性

計算屬性關(guān)鍵字：computed

每次頁面刷新都會重新加載數(shù)據(jù)，而我們有時候退出頁面再返回頁面后希望保持原來選擇商品的價格總價，這是就可以運用到計算屬性：只有涉及到計算屬性中使用的變量發(fā)生變化它才會重新運算

<body>
<div id="app">
    <input type="text" v-model="name"> ---》》 {{handleUpper()}}
    <hr>
    <input type="text" v-model="name2">--->{{upper}}
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            name: '',
            name2: ''
        },
        methods: {
            handleUpper() {
                // 只要頁面刷新就會變化
                console.log('我執(zhí)行了')
            }
        },
        computed: {
            upper() {
                console.log('我執(zhí)行了計算屬性')
            }
        }
    })
</script>
</html>

監(jiān)聽屬性

監(jiān)聽屬性關(guān)鍵字：watch

當監(jiān)聽的屬性發(fā)生變化時，會自動調(diào)用回調(diào)函數(shù)執(zhí)行相關(guān)操作

<body>
<div id="app">
    <span> <button @click="type='人文'">人文</button>|<button @click="type='社科'">社科</button>|<button
            @click="type='地理'">地理</button></span>
    <br>
    {{type}}
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            type: '人文',
        },
        watch: {
            type(val) {
                console.log('向后端加載數(shù)據(jù)了')
            }
        }
    })
</script>
</html>

組件介紹和定義

組件的介紹

為了提高代碼的可重用性，減少代碼的重復(fù)開發(fā)，我們可以把代碼封裝到一個自定義標簽內(nèi)。以.vue結(jié)尾的文件一般由三部分組成：template、script、style

- 組件導(dǎo)出：export default{}

- 組件導(dǎo)入：import Hello World from“./components/HelloWorld.vue”

組件定義

- 全局組件：全局可以使用，可以用在任意其它組件中

<div id="app">
    <h1>全局組件</h1>
    <child></child>
</div>
</body>
<script>
    // 1 定義全局組件 (必須在一個標簽)，組件有自己的數(shù)據(jù)，方法，生周期.....
    var obj = {
        template: `
          <div>
          <button>后退</button>
          {{ title }}
          <button @click="handleClick">前進</button>
          </div>`,
        data() {
            return {
                title: '標題'
            }
        },
        methods: {
            handleClick() {
                alert('前進')
            }
        },
    }
    Vue.component('child', obj)
</script>

- 局部組件：局部組件只能在定義的位置(組件中)使用

<body>
<div id="app">
    <h1>局部組件</h1>
    <part></part>
    <hr>
</div>
</body>
<script>
var part = {
        template: `
          <div>
          <h1>我是part組件</h1>
          {{ name }}
          <child3></child3>
          </div>`,
        data() {
            return {
                name: 'part'
            }
        },
        components: {
            'child3': {
                template: `
            <div>
              <h2>我是lqz組件內(nèi)的組件</h2>
              </div>`,
            }
        }
    }
    var vm = new Vue({
        el: '#app',
        data: {},
        components: {
            part
        }
    })
</script>

父子通信

父傳子

父子組件可以理解為組件中再嵌套一個組件，他們的定義和普通組件是一樣的只是多了一個嵌套；父組件中需要聲明子組件，引入子組件對象

ps：無論是哪種類型的組件每個組件都相當于一個完整的vue實例，組件與組件之間的數(shù)據(jù)是不互通的

- 子組件使用父組件數(shù)據(jù)關(guān)鍵字：props

<div id="app">
    <h1>自定義事件實現(xiàn)父子通信之子傳父</h1>
    父組件中的name值為：{{name}}
    <hr>
    <lqz @myevnet="handleEvent"></lqz>
    <hr>
</div>
</body>
<script>
    var child= {
        template: `
          <div>
          <h1>我是a組件</h1>
          <input type="text" v-model="name"> ---》{{ name }}
          <br>
          <button @click="handleSend">點我把name傳給父組件</button>
          </div>`,
        data() {
            return {
                name: ''
            }
        },
        methods: {
            handleSend() {
                // alert('我被點了')
                // 在這里，觸發(fā)自定義事件的執(zhí)行
                this.$emit('myevnet', this.name)
            }
        }
    }
    var vm = new Vue({
        el: '#app',
        data: {
            name: '大帥哥'
        },
        methods: {
            handleEvent(name) {
                this.name = name
            }
        },
        components: {
            child
        }
    })
</script>

子傳父

- 子組件向父組件傳遞必須通過自定義事件來完成

<div id="app">
    <!--子組件中監(jiān)聽自定義事件，隨便起名-->
    <navbar @myevent="handleClick($event)"></navbar>
</div>
</body>
<script>
    Vue.component('navbar', {
        template: `
            <div>
                <button>返回</button>
                組件
                <button @click="handleEvent">點擊按鈕把子組件數(shù)據(jù)傳遞到父組件</button>
                <br>
            </div>
        `,
        data(){
            return {
                name:'abc'
            }
        },
        methods:{
            handleEvent(){
                // this.$emit('myevent') //myevent:子組件中監(jiān)聽自定義事件
                this.$emit('myevent',100) //100表示傳遞的參數(shù)
            }
        }
    })
    var vm = new Vue({
        el: '#box',
        data: {},
        methods:{
            handleClick(ev){
                console.log('點擊子組件，我會執(zhí)行')
                console.log(ev)
            }
        }
    })
</script>

ref屬性

可以放在普通標簽上，通過this.$refs.自定義的名字取到的是原生的dom對象

- 使用原生dom操作了(不推薦)

可以放在組件上：通過this.$refs.自定義的名字取到的是 vc對象(組件對象)，

可以之間使用組件對象上的方法和屬性---》子的數(shù)據(jù)給了父親

- 父組件有個方法執(zhí)行，需要傳參數(shù)，傳入子組件的數(shù)據(jù)---》子的數(shù)據(jù)給了父親

- 拿到子對象之間使用父中的數(shù)據(jù)修改----》父傳子

<body>
<div id="app">
    <h1>ref屬性放在普通標簽上</h1>
    <input type="text" ref="myinput" v-model="name">====>{{name}}
    <br>
    <button @click="handlePrint">點我，打印點東西</button>
    <hr>
</div>
</body>
<script>
    var abc = {
        template: `
          <div>
          <button>后退</button>
          首頁--{{ age }}---{{ show }}
          <button @click="handleQJ('大帥哥')">前進</button>
          </div>`,
        data() {
            return {
                show: true,
                age: 19
            }
        },
        methods: {
            handleQJ(name) {
                alert(name)
            }
        }
    }
    var vm = new Vue({
        el: '#app',
        data: {
            name: '大美女'
        },
        methods: {
            handlePrint() {
                //this.$refs.myinput 原生dom對象
                // this.$refs.myinput.value='xxxxxx'
                console.log(this.$refs)
                // this.$refs.mylqz.age=999
                // this.$refs.mylqz.show = false
                // this.$refs.mylqz.handleQJ()
                // this.name=this.$refs.mylqz.age
                this.$refs.mylqz.handleQJ(this.name)
            }
        },
        components: {
            abc
        }
    })
</script>

動態(tài)組件

點擊不同的標簽展示不同的組件

<body>
<div id="app">
    <div>
        <span @click="type='home'">首頁</span>|
        <span @click="type='goods'">商品</span>|
        <span @click="type='order'">訂單</span>
    </div>
    <div>
        <component :is="type"></component>
    </div>
</div>
</body>
<script>
    // 1 定義三個全局組件
    Vue.component('home', {
        template: `
        <div>
            <h1>首頁</h1>
        </div>`,
    })
    Vue.component('goods', {
        template: `
        <div>
            <h1>商品</h1>
        </div>`,
    })
    Vue.component('order', {
        template: `
        <div>
            <h1>訂單</h1>
        </div>`,
    })
    var vm = new Vue({
        el: '#app',
        data: {
            type: 'home'
        },
    })
</script>

插槽

簡單理解就是組件內(nèi)部留一個或多個的插槽位置，可供組件傳對應(yīng)的模板代碼進去。插槽的出現(xiàn)，讓組件變的更加靈活

<body>
<div id="app">
    <h1>插槽的使用</h1>
    <home>
        <img src="美女.jpg" width="200px" height="200px">
    </home>
    <hr>
    <home>
        <div>我是div</div>
    </home>
    <hr>
    <goods>
        <div slot="bottom">
            我是底部
        </div>
        <a href="" slot=" rel="external nofollow" top">點我看美女</a>
    </goods>
</div>
</body>
<script>
    // 1 定義三個全局組件
    Vue.component('home', {
        template: `
        <div>
        <button>后退</button>
           <span>首頁</span>
         <button>前進</button>
         <hr>
         <slot></slot>
        </div>`,
    })
    Vue.component('goods', {
        template: `
        <div>
        <slot name="top"></slot>
        <hr>
        <button>后退</button>
           <span>首頁</span>
         <button>前進</button>
         <hr>
         <slot name="bottom"></slot>
        </div>`,
    })
    var vm = new Vue({
        el: '#app',
        data: {
            type: 'home'
        },
    })
</script>