vue挂载点概念

Posted 2020-11-04 元气の程序媛

 

## 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>