【vue】掛載點概念

 

## vue

vue是mvvm模型，自底向上逐層應用，用於構建用戶界面的漸進式框架。

### 掛載點、模板、實例

掛載點，vue僅處理掛點下面的內容（dom節點）。掛載點內部的為模板。

 

<div id="app">
        <p>{{ mag }}</p>
    </div>
    <script>
        new Vue({
            el: "#app",
            data() {
                mag: 'hello,  ';
            },
        });
        
        Vue.component('todo-item', {
          template: '<li>這是個待辦項</li>'
        })
    
    </script>

模板

1. 直接放在掛在點內部
2. 實例內的template屬性

<div id="app">
    </div>
    <script>
    new Vue({
        el: "#app",
        template: "<p>哈韓</p>"
        data() {},
    });
</script>

 

實例，new Vue創建

    <div id="app">
        <p>{{ mag }}</p>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            components: {
                todo-item,
            },
            data() {
                mag: 'hello,  ';
            },
        });
        
        app.component('todo-item', {
          template: '<li>這是個待辦項</li>'
        })
    </script>

 

## vue組件，實例，vue-cli

每一個組件也是一個實例，掛在點下最大的實例，有一層層組件構成。

開發大型項目，借助webpack打包單文件組件(.vue)。腳手架vue-cli搭建項目。

## 單文件組件

<template>
        <div>
            <li class="todo-item"
                @dblclick="handleDelete(index)" 
                >{{ text }}</li>
        </div>
    </template>
    <script>
    export default {
        name: 'todo-item',
        props: ['text', 'index'],
        methods: {
            handleDelete(index) {
                this.$emit('delete', index);
            },
        },
    };
    </script>
    <style scoped>
    .todo-item{
        
    }
    </style>