Vue写组件最最基础的坑

记vue组件开发遇到的坑

实例

根据文档的教程,输入的代码应该是长这样的

<script type="text/javascript">

        Vue.component('button-hi', {
            props:['title'],
            data: function () {
                //data必须是一个函数
                return {
                    count: 0
                }
            },
            template: '<button v-on:click="count++"> clicked me {{count}} times</button>'
        })
        var vm=new Vue({//所有的vue组件都是vue实例
            el: "#components-demo",
            data: {
            
            }
        });
    </script>

遇到的坑

顺序问题

创建实例一定要在组件自定义后面,不然组件没有办法正确显示

相当于先定义一个变量,然后再创建对应的实例

在一个template里面无法使用多个element

你可以将模板的内容包裹在一个父元素内,来修复这个问题

    <template id="hahah">
        <div>
            <h3>This is the title:{{title}}</h3>
            <button v-on:click="count+=3"> clicked me {{count}} times</button>
        </div>
    </template>
在定义组件的html样式里面使用模板

直接采用document.querySelector获取html建好的元素

 <template id="tem">
        <div class='blog-test'>
            <h3>{{title}}</h3>
            <div></div>
        </div>
    </template>
    
        <script>
        let tem = document.querySelector('#tem')
        console.log(tem);
        Vue.component('blog-post', {
            template:tem,
            props: ['title'],//props接受传来的data
        })
        </script>
各个地方的data关系
  • 组件模板里面的data,是可以在template里面展示的data
  • new Vue({ })里面的data:从页面获取数据,向组件模板传输数据
此处小坑,传输的数据类型问题
<html>
 <template id="tem">
        <div class='blog-test'>
            <h3>{{title}}</h3>
            <div></div>
        </div>
    </template>
    
 <div id="app">
        <blog-post v-for="post in posts" v-bind:key="post.id" v-bind:post="post"></blog-post>
    </div>
</html>

<script>
        Vue.component('blog-post', {
            template:tem,
            props: ['title'],//props接受传来的data
        })
        
 new Vue({
            el: "#app",
            data: {
                posts: [
                    { id: 1, title: "My journey with Vue" },
                    { id: 2, title: "Blogging with Vue" },
                    { id: 3, title: "Why Vue is so fun" }
                    
                ]
            }
        })
</script>

注意第三个v-bind:title=“post.title” 这里已经把post.title作为title 传下去了,在component里面获取的props是title,所以使用数据的时候也应该用title而不是post.title

  • 对比&引入大量data的方法——对象

<html>
<template id="tem">
        <div class='blog-test'>
            <h3>{{post.title}}</h3>
            <div></div>
        </div>
    </template>
    
 <blog-post v-for="post in posts" v-bind:key="post.id" v-bind:post="post"></blog-post>
 </html>
 
 <script>
 Vue.component('blog-post', {
            template:tem,
            props: ['post'],//props接受传来的data
        })
 </script>

找找茬然后体会一下不同

一点小总结

这个组件的数据传递对于js基础薄弱的我来说是最头疼的,但是经常修改代码进行对比之后好像也能略知一二

  • v-bind 通常用来绑定attribute(不管是style 或者 class 都可),这个非常重要
  • v v-for的形式是=“string” 语句比较神奇,但是应该是在每一轮循环的时候post都相当于一个对象指针,所以后面的data调用的时候写的是post

something hanging

  • attribute 有哪些,可以怎么个传参法
  • 如何引入外部文件,将css和html & JavaScipt 分开
  • 父组件和子组件的数据流动关系
  • AJAX的具体实现
  • 如何实现function里面data 的调试(console.log)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值