Vue学习笔记(一)组件

在做课设的时候,动态生成表格需要写一堆js代码,于是乎决定采用一个前端框架来简化编码过程,之前已经学过Vue的一些知识了,因此直接从组件开始记录。

1.简单的组件实例

<div class="vue">
    <button-counter></button-counter>
</div>

</body>

<script>
    Vue.component('button-counter',{
        data: function () {
            return{
                count: 0
            }
        },
        template: "<button>{{count}}</button>"
    })

    var app = new Vue({
        el: '.vue'
    })
</script>

对比直接写一个button

<div class="vue">
    <button-counter></button-counter>
    <button>{{count}}</button>
</div>

<script>
    var app = new Vue({
        el: '.vue',
        data: {
            count: 1
        }
    })
</script>

可以看出二者在绑定数据时不同,根据我的理解,当时用component时是创建一个组件的构造器,也就是说每次使用它生成组件各个组件都是独立的,所以它内部的数据是局部数据,需要用function封装起来

2.生成一个组件计数器

<div class="vue">
    <button-counter></button-counter>
</div>

</body>

<script>
    Vue.component('button-counter',{
        data: function () {
            return{
                count: 0
            }
        },
        template: "<button @click='click'>{{count}}</button>",
        methods: {
            click: function () {
                this.count++
            }
        }
    })

    var app = new Vue({
        el: '.vue',
    })
</script>

组件通过methods绑定需要用到的函数

3.通过 Prop 向子组件传递数据

<blog-post title="en"></blog-post>
<blog-post title="ene"></blog-post>
<blog-post title="enee"></blog-post>

Vue.component('blog-post', {
        template: "<h3>{{title}}</h3>",
        props: ['title']
    })

在使用组件时可以通过title属性传递给template中的{{title}}

来看一个复杂的栗子

//html
<blog-post v-for="post in posts" v-bind:post="post"></blog-post>

//js
Vue.component('blog-post', {
        template: "<div>{{post.id}}{{post.title}}</div>",
        props: ['post'],
    })

    var app = new Vue({
        el: '.vue',
        data: {
            posts: [
                { id: 1, title: 'My journey with Vue' },
                { id: 2, title: 'Blogging with Vue' },
                { id: 3, title: 'Why Vue is so fun' }
            ]
        }
    })

首先看html中,我们把暂时当做一个普通的标签,使用v-for标签遍历app中的posts(因为他在el:‘.vue’下,所以可以得到值),接下来把遍历来的post的值绑定到标签的属性post上,同时由于for循环生成了多个标签,相当于此时是这样的:

<blog-post post='posts[0]'></blog-post>
<blog-post post='posts[1]'></blog-post>
<blog-post post='posts[2]'></blog-post>

接下来我们看一下模板

Vue.component('blog-post', {
        template: "<div>{{post.id}}{{post.title}}</div>",
        props: ['post'],
    })

这里通过props指定用post属性向模板传值,也就是说此时吧标签翻译成了

<div>{{post[0].id}}{{post[0].title}}</div>
<div>{{post[1].id}}{{post[1].title}}</div>
<div>{{post[2].id}}{{post[2].title}}</div>

为了便于区分,我们把一些post重命名试试,并加入一些东西生成一个完整的博客组件

<blog-post v-for="post in posts" v-bind:data="post"></blog-post>

Vue.component('blog-post', {
        template: "<div>" +
                        "<div>第{{data.id}}篇</div>" +
                        "<h3>{{data.title}}</h3>" +
                        "<div>{{data.content}}</div>" +
                        "<br>" +
                   "</div>",
        props: ['data'],
    })

    var app = new Vue({
        el: '.vue',
        data: {
            posts: [
                { id: 1, title: 'My journey with Vue', content: 'Download the Vue Devtools extension for a better development experience:\n' +
                                                                    'https://github.com/vuejs/vue-devtools' },
                { id: 2, title: 'Blogging with Vue' , content: 'You are running Vue in development mode.\n' +
                                                                    'Make sure to turn on production mode when deploying for production.\n' +
                                                                    'See more tips at https://vuejs.org/guide/deployment.html'},
                { id: 3, title: 'Why Vue is so fun', content: 'component lists rendered with v-for should have explicit keys. See https://vuejs.\n' +
                                                                     'org/guide/list.html#key for more info.\n' }
            ]
        }
    })

4.通过事件向父级组件发送消息

现在有个需求,我希望可以点击按钮查看某个博文的详细信息,在js可以直接用闭包实现,我们来看看Vue

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值