课时41 前端基础-Vue-组件化基础

最新推荐文章于 2023-12-21 17:05:04 发布

一只小灰灰

最新推荐文章于 2023-12-21 17:05:04 发布

阅读量66

点赞数

分类专栏：谷粒商城学习笔记

本文链接：https://blog.csdn.net/weixin_44543578/article/details/115311516

版权

谷粒商城学习笔记专栏收录该内容

34 篇文章 0 订阅

订阅专栏

组件化
在大型应用开发的时候，页面可以划分成很多部分。往往不同的页面，也会有相同的部分。例如可能会有相同的头部导航。
但是如果每个页面都独自开发，这无疑增加了我们开发的成本。所以我们会把页面的不同部分拆分成组件，然后在不同页面就可以共享这些组件，避免重复开发
在vue里，所有的vue示例都是组件

·组件其实也是一个Vue实例，因此它在定义时也会接收：data、methods、生命周期函数等
·不同的是组件不会与页面的元素绑定，否则就无法复用了，因此没有el属性
·但是组件渲染需要html模板，所以增加了template属性，值就是HTML模板
·全局组件定义完毕，任何vue示例都可以在HTML中通过组件名称来使用组件了
·data必须是一个函数，不再是一个对象

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>tes1t1</title>
</head>

<body>
<div id="app">
    <button v-on:click="count++">我被点击了 {{count}} 次</button>
    <counter></counter>
    <counter></counter>
    <button-counter></button-counter>
</div>

<script src="./node_modules/vue/dist/vue.js"></script>
<script>
    //1、全局声明注册一个组件
    Vue.component("counter",{
        template:`<button v-on:click="count++">我被点击了 {{count}} 次</button>`,
        data(){
            return{
                count: 1
            }
        }
    });

    //2、局部声明一个组件
    const buttonCounter = {
        template:`<button v-on:click="count++">我被点击了 {{count}} 次~~~~</button>`,
        data(){
            return{
                count: 1
            }
        }
    };
    let vm = new Vue({
        el:"#app", 
        data:{ 
            count:1
        },
        components: {
            'button-counter':buttonCounter
        }
    }) 
</script>
</body>
</html>

一只小灰灰

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
课时41 前端基础-Vue-组件化基础

组件化在大型应用开发的时候，页面可以划分成很多部分。往往不同的页面，也会有相同的部分。例如可能会有相同的头部导航。但是如果每个页面都独自开发，这无疑增加了我们开发的成本。所以我们会把页面的不同部分拆分成组件，然后在不同页面就可以共享这些组件，避免重复开发在vue里，所有的vue示例都是组件·组件其实也是一个Vue实例，因此它在定义时也会接收：data、methods、生命周期函数等·不同的是组件不会与页面的元素绑定，否则就无法复用了，因此没有el属性·但是组件渲染需要html模板，所以增加了te
复制链接

扫一扫