vue的组件components基础和安装vue脚手架

组件


组件在vue是一个很强大的功能,可以对HTML进行扩展,在大型应用中,可以对一些抽象的功能进行封装

作用:可复用的vue实例

组件注册

  • 局部注册组件

new Vue({
  el:
  components:{
          自定义组件名称:{
                  template:'模板内容'
            }
    }
})

   <!-- 1.引入vue -->
    <script src="./vue.js"></script>
</head>
<body>
    <!-- 2.创建DOM元素 -->
    <div id="app">
        <h1>这是文本内容给</h1>
        <!-- 组件调用 -->
        <one></one>
        <two></two>
    </div>
    <script>
        // 3.实例化vue
        let vm  = new Vue({
            el:'#app',
            data:{

            },
            methods:{
                
            },
            /**
             * 1.components:组件
             * 2.在components中可以注册多个组件
            */
            components:{
                // 声明一个one组件
                one:{
                    template:'<h2>这是一个局部one注册组件</h2>'
                },
                // 声明一个two组件
                two:{
                    template:'<h3>这是一个局部two注册组件</h3>'
                }
            }
        })
    </script>
  • 全局注册组件

书写语法:
    Vue.component('自定义组件名称',{
    template:'模板内容'
  })

 

   <!-- 1.引入vue -->
    <script src="./vue.js"></script>
</head>
<body>
    <!-- 2.创建DOM元素 -->
    <div id="app">
        <!-- 调用组件 -->
        <three></three>
        <four></four>
    </div>
    <script>
        // 声明全局注册组件
        /**
         * 参数一:自定义组件名称
         * 参数二:组件值为vue实例,   即值为一个Object
        */
        Vue.component('three',{
            template:'<h2>这是一个全局three注册组件</h2>'
        })
        Vue.component('four',{
            template:'<h2>这是一个全局four注册组件</h2>'
        })
        // 3.实例化vue
        let vm  = new Vue({
            el:'#app',
            data:{

            },
            methods:{
                
            }
        })
    </script>
  • 全局注册组件和局部注册组件的区别

 全局注册组件:在任何vue实例化中都可调用
局部注册组件:只在当前vue实例中调用

    <!-- 1.引入vue -->
    <script src="./vue.js"></script>
</head>
<body>
    <!-- 2.创建DOM元素 -->
    <div id="app">
        <!-- 组件调用 -->
        <one></one>
        <two></two>
    </div>
    <hr>
    <div id="root">
        <!-- 组件调用 -->
        <one></one>
        <two></two>
    </div>
    <script>
        Vue.component('two',{
            template:'<h2>全局组件</h2>'
        })
        // 3.实例化vue
        let vm  = new Vue({
            el:'#app',
            data:{

            },
            methods:{
                
            },
            components:{
                one:{
                    template:'<h2>局部组件</h2>'
                }
            }
        })
   
        let vm1 = new Vue({
            el:'#root'
        })
   </script>

组件名称注意事项

组件名称注意事项
     * 1.不能使用现有标签作为组件名称:  eg:div p img span
   * 2.不能使用现有标签的大写作为组件名称 eg:Div  DIV   dIV
   * 3.组件名称建议使用小驼峰法进行命名,目的为了方便书写,  组件调用: v-one
   * 4.组件模板渲染时,必须包含一个根元素

 

  <!-- 1.引入vue -->
    <script src="./vue.js"></script>
</head>
<body>
    <!-- 2.创建DOM元素 -->
    <div id="app">
        <!-- 组件调用 -->
        <v-one></v-one>
    
    </div>
    <script>
        // 3.实例化vue
        let vm  = new Vue({
            el:'#app',
            data:{

            },
            methods:{
                
            },
            components:{
                /**
                 * 1.不能使用现有标签作为组件名称:  eg:div p img span
                 * 2.不能使用现有标签的大写作为组件名称 eg:Div  DIV   dIV
                 * 3.组件名称建议使用小驼峰法进行命名,目的为了方便书写,  组件调用: v-one
                 * 4.组件模板渲染时,必须包含一个根元素
                */
                vOne:{
                    template:`
                    <div>
                        <h2>局部注册组件</h2>
                        <h2>局部注册组件</h2>
                    </div>
                    `
                }
            }
        })
    </script>

template模板

    <!-- 1.引入vue -->
    <script src="./vue.js"></script>
</head>
<body>
    <!-- 2.创建DOM元素 -->
    <div id="app">
        <!-- 组件调用 -->
        <v-one></v-one>
        <v-two></v-two>
    </div>

    <!-- 系统提供了一个组件模板: template -->
    <!-- 组件的模板内容 -->
    <template id="one">
        <div>
            <h2>one组件</h2>
            <img src="https://www.baidu.com/img/flexible/logo/pc/result@2.png" alt="">
        </div>
    </template>

    <!-- two组件模板内容 -->
    <template id="two">
        <div>
            <ul>
                <li>北京</li>
                <li>上海</li>
                <li>西安</li>
                <li>郑州</li>
                <li>广州</li>
            </ul>
        </div>
    </template>
    <script>
        // 3.实例化vue
        let vm  = new Vue({
            el:'#app',
            data:{

            },
            methods:{
                
            },
            components:{
                // 组件声明
                vOne:{
                    template:'#one',
                },
                vTwo:{
                    template:'#two',
                }
            }
        })
    </script>

选项

vOne:{
  template:
  data
  methods
  watch
  components
  filters
  computed
  render
  8个钩子函数
}

总结:new Vue()产生的实例为vue实例
        子组件产生的实例为VueComponent实例 

 data的用法

  • data是一个对象

  * 在js中对象类型的变量属于引用类型,不管数据被复用多少次,此时的数据是处于共享状态,一旦data中的数据发生改变,则所有被复用的数据都会发生改变

 

 <!-- 1.引入vue -->
    <script src="./vue.js"></script>
    <style>
        .box{
            width:80%;
            margin:20px auto;
            border: 2px solid red;
        }
    </style>
</head>
<body>
    <!-- 2.创建DOM元素 -->
    <div id="app">
        <div class="box">
            <h3>num的值为:{{num}}</h3>
            <button @click="num++">++</button>
        </div>
        <div class="box">
            <h3>num的值为:{{num}}</h3>
            <button @click="num++">++</button>
        </div>
        <div class="box">
            <h3>num的值为:{{num}}</h3>
            <button @click="num++">++</button>
        </div>
    </div>
    <script>
        // 3.实例化vue
        // 根组件
        let vm  = new Vue({
            el:'#app',
            /**
             * 在js中对象类型的变量属于引用类型,不管数据被复用多少次,此时的数据是处于共享状态,
             * 一旦data中的数据发生改变,则所有被复用的数据都会发生改变
             * */ 
            data:{
                num:0,
            },
            methods:{
                
            }
        })
    </script>

data是函数返回值

组件是可复用的vueComponent实例,一旦组件被创建好之后,就有可能被复用在各个地方,不管组件被复用多少,他们之间的数据都应该是相互独立,互不影响.基于以上原理. * 
此时的data被声明为函数返回值的形式,数据不管复用多少次,都是互不影响的.这就相当关于为每一份data开辟了一个独立的空间,各个空间管理者各自的数据

 

  <!-- 1.引入vue -->
    <script src="./vue.js"></script>
    <style>
        .box{
            width:80%;
            margin:20px auto;
            border: 2px solid red;
        }
    </style>
</head>
<body>
    <!-- 2.创建DOM元素 -->
    <div id="app">
        <!-- 组件调用 -->
        <v-one></v-one>
        <v-one></v-one>
        <v-one></v-one>
    </div>

    <!-- one组件的模板内容 -->
    <template id="one">
        <div class="one">
            <div>{{name}}</div>
            <div class="box">
                <h3>num的值为:{{num}}</h3>
                <button @click="num++">++</button>
            </div>
        </div>
    </template>
    <script>
        // 3.实例化vue
        // 根组件
        let vm  = new Vue({
            el:'#app',
            components:{
                vOne:{
                    template:'#one',
                    /**
                     * 组件是可复用的vueComponent实例,一旦组件被创建好之后,就有可能被复用在各个地方,不管组件被复用多少,他们之间的数据都应该是相互独立,互不影响.基于以上原理.
                     * 此时的data被声明为函数返回值的形式,数据不管复用多少次,都是互不影响的.这就相当关于为每一份data开辟了一个独立的空间,各个空间管理者各自的数据
                    */
                    data(){
                        return{
                            name:'薇娅',
                            num:0,
                        }
                    }
                }
            }
        })
    </script>
</body>
</html>

组件的嵌套

 所谓组件嵌套 就是在子组件的父级模板中 用标签的形式调用子组件

在下面这段代码中app这个<div>是最大的的父级,他所包裹着的子组件都有自己的模板 并且根据id相互连接但是自组建的数据只能在他们的内部实现,需要在他们每个组件的父级下进行注册用下面这种方法,并且在他们的父级内部用标签的形式调用

components:{
    xxx:xxx
}
 <title>Document</title>
    <!-- 1.引入vue -->
    <script src="./vue.js"></script>
    <style>
        *{
            margin:0;
            padding: 0;
            list-style: none;
        }
        .page{
            width:100vw;
            height: 100vh;
            background-color: grey;
            position: absolute;
            left:0;
            top:0;
            display: flex;
            flex-direction: column;
        }
        .header{
            height: 100px;
            background-color: hotpink;
        }
        .main{
            flex:1;
            display: flex;
        }
        .footer{
            height: 100px;
            background-color: indianred;
        }
        .left{
            width:200px;
            background-color: khaki;
        }
        .right{
            flex:1;
        }
    </style>
</head>
<body>
    <!-- 2.创建DOM元素 -->
    <div id="app">
        <!-- <div class="page">
             头部 
            <div class="header">
                头部
            </div>
             中间 
            <div class="main">
               左侧 
               <div class="left">
                   左侧
               </div>
               内容
               <div class="right">
                   右侧
               </div>
            </div>
             底部  
            <div class="footer">
                底部
            </div>
        </div> -->
        <!-- 组件调用 -->
        <!-- <v-page></v-page> -->
    </div>
    <!-- page组件模板内容 -->
    <template id="page">
        <div class="page">
            <!-- 调用头部 -->
            <v-header></v-header>
            <v-main></v-main>
            <v-footer></v-footer>
        </div>
    </template>

     <!-- header组件模板内容 -->
     <template id="header">
        <div class="header">

        </div>
    </template>

     <!-- main组件模板内容 -->
     <template id="main">
        <div class="main">
            <!-- 调用左侧组件 -->
            <v-left></v-left>
            <v-right></v-right>
        </div>
    </template>

     <!-- footer组件模板内容 -->
     <template id="footer">
        <div class="footer">

        </div>
    </template>

    <!-- left组件模板内容 -->
    <template id="left">
        <div class="left">

        </div>
    </template>

    <!-- right组件模板内容 -->
    <template id="right">
        <div class="right">

        </div>
    </template>

    <script>
        let vLeft  = {
                        template:'#left'
                    }
        let vRight = {
                        template:'#right'
                    }
        let vHeader  = {
                            template:'#header'
                        }
        let vMain = {
                            template:'#main',
                            components:{
                               vLeft,
                               vRight
                            }
                    }
        let vFooter = {
                template:'#footer'
            }
        let vPage = {
                    template:'#page',
                    components:{
                        // 头部组件
                        vHeader,
                        // 中间组件
                        vMain,
                        // 底部组件
                        vFooter
                    }
                }
        

        // 3.实例化vue
        let vm  = new Vue({
            el:'#app',
            components:{
                vPage
            },
            template:`<v-page></v-page>`,
        })
    </script>

 

vue脚手架安装


下载安装脚手架

 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统
Vue CLI: Vue command line interface  vue命令行接口
特点:
    1.一个运行时依赖 (@vue/cli-service),该依赖:
  2.可升级;
  3.基于 webpack 构建,并带有合理的默认配置;
  4.可以通过项目内的配置文件进行配置;
  5.可以通过插件进行扩展。
  6.一个丰富的官方插件集合,集成了前端生态中最好的工具。
  7.一套完全图形化的创建和管理 Vue.js 项目的用户界面。

1.安装webpack工具  

 在安装脚手架之前确保webpack是否安装成功:
1.webpack --version            #如果查看有版本,无需安装以下步骤,如果没有版本,则需要执行以下步骤
2.cnpm i webpack webpack-cli -g   #全局安装webpack打包工具
注意事项: 以上步骤不一定必须执行

 2.安装脚手架

 1.npm i @vue/cli -g  #全局安装脚手架
2.vue -V            #查看版本

通过脚手架创建项目

1.vue create 项目名称   #创建项目
2.cd 项目名称            #进入项目目录
3.npm  run serve        #启动项目
4.项目运行在: http://localhost:8080

图形化创建项目

执行指令

vue ui

 创建

 

 

 cd my-app  
npm run serve

 项目目录介绍

my-app
    node_mopdules            #项目依赖包
  public                        #公共静态资源文件
          1.引入图片
          <!-- 引入public图片, 采用项目绝对路劲, -->
        <img style="width:100px" src="/qkl.jpeg" alt="">
      2.静态资源不参与压缩打包
          index.html            #项目唯一一个页面
  src
          assest                    #静态资源文件
                  1.引入图片
                    <!-- 引入assets图片,采用相对路径 -->
                          <img style="width:100px" src="../assets/img/qkl.jpeg" alt="">
            2.静态资源参与压缩打包
      components            #公共组件 
      App.vue                    #根组件
      main.js                    #唯一入口文件
 .gitignore                        #上传git忽略的文件
 babel.config.js            #babel插件的配置文件
 package-lock.json        #项目基本信息及安装依赖包的锁定版本
 package.json                    #项目的基本信息及启动指令 依赖包信息
 READ.me                            #解读文件