网站建设   网站建设技术   网站建设百科  

【vue】挂载点概念

人浏览  发布时间:2022-03-28

载点,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...

载点,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>

点击浏览下载讲义资料
(编辑:360°搜索建站)

备注:本网站资料免费下载浏览,为百度空间下载资料,需用户注册有百度账号,登陆后才可浏览下载,如有疑问联系我们免费解答。


你可能喜欢的:

友情链接
24小时服务电话:13992352808 地址:广东省深圳市宝安区西乡街道东方商务大厦 WebDesign ©2012 Corporation 360°搜索建站网 网站地图