• Vue组件化开发


    5. 组件化开发

    5.1 组件[component]

    组件(Component)是自定义封装的功能。在前端开发过程中,经常出现多个网页的功能是重复的,而且很多不同的页面之间,也存在同样的功能。

    而在网页中实现一个功能,需要使用html定义功能的内容结构,使用css声明功能的外观样式,还要使用js来定义功能的特效,因此就产生了把一个功能相关的[HTML、css和javascript]代码封装在一起组成一个整体的代码块封装模式,我们称之为“组件”。

    所以,组件就是一个html网页中的功能,一般就是一个标签,标签中有自己的html内容结构,css样式和js特效。

    这样,前端人员就可以在组件化开发时,只需要书写一次代码,随处引入即可使用。

    vue的组件有两种:默认组件[全局组件] 和 单文件组件

    5.1.1 默认组件

    <div id="app">
        <addnum></addnum>
        <addnum></addnum>
        <addnum></addnum>
        <addnum></addnum>
        <addnum></addnum>
    </div>
    
    <script>
        Vue.component("addnum",{
            template:'<div><input type="text" v-model="num"><button @click="num+=1">点击</button></div>',
            data: function(){
                // 写在这里的数据只有当前组件可以使用
                return {
                    num:1,
                }
            }
        });
    
    
        var vm = new Vue({
            el:"#app",
            // 这里写的数据是全局公用的,整个文件共享
            data:{
    
            }
        })
    </script>
    

    单文件组件的代码, 是需要保存组建代码到vue文件中。

    例如,我们希望创建一个单文件组件,则需要创建一个vue文件,里面写这个vue组建的代码。浏览器默认不识别vue文件。

  • 相关阅读:
    前端大全
    事件获取目标 currentTarget target srcElement 三者之间的区别和联系
    wx:key
    [微信小程序] -- wxss引用外部css文件及iconfont
    v-show, v-if, 以及动态组件的区别
    self_vue@1.0.0 dev: `webpack-dev-server --inline --progress --config build/webpack.dev.conf.js`
    git命令行使用
    CentOS6与7区别整理
    git
    python--批量修改文件夹名
  • 原文地址:https://www.cnblogs.com/ghh520/p/12951694.html
Copyright © 2020-2023  润新知