vue组件+脚手架

weiweiweb888

已于 2022-12-15 11:59:36 修改

阅读量780

点赞数

文章标签：中间件前端 ajax

于 2021-11-19 20:07:20 首次发布

本文链接：https://blog.csdn.net/weiweiweb888/article/details/121430085

版权

组件(components)

以前我们讲过模块化，而模块化指的是纯js的部分，也就是纯逻辑部分。

前端包含html、css、js。前端提出了一个组件化思想：

组件化：指把html、css、js通过某种规范把它蹂躏在一起。然后我通过书写标签的方式，那么就复用了某段代码（包含你封装好的html、css、js），那封装好的这个东西就叫组件。

组件化一定是包含模块化的（每个组件都是独立的）、而模块化不等于组件化。

定义

组件(component)在vue是一个很强大的功能,可以对HTML进行扩展,在大型应用中,为了分工明确,可以使用组件对一些抽象的功能进行封装.

作用

提高代码的复用率

组件注册

局部注册组件

1.组件名自定义
2.组件的值是一个Object
3.组件中要展示的模板内容,存放在template 属性中
template当中有且只能有一个根节点。

<div id="app">
    <one></one>
</div>
<script src="vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
        },
        //注册组件/声明组件/创建组件
        components:{
            one:{ //one理解为组件的名称，随意起即可。
               template:`<div><div>我是one组件1</div><div>我是one组件2</div></div>`
              }
        }
    })
</script>

全局注册组件

Vue.component('自定义的组件名',{template:'在模板中展示的内容'})

全局注册组件和局部注册组件的区别

全局注册组件:可以在任何vue实例使用
局部注册组件:只能在当前vue实例使用

<div id="app">
        <one></one>
        <two></two>
    </div>
    <div id="root">
        <one></one>
        <!-- two:报错。因为two即没有定义全局组件，也没有在root实例中定义局部组件-->
        <two></two>
    </div>
    <script src="vue.js"></script>
    <script>
        Vue.component('one',{
            template:'<div>one组件，全局注册的</div>'
        })

        new Vue({
            el: '#app',
            data: {
            },
            components:{
                two:{ 
                    template:`<div>我是two组件1</div>`
                }
            }
        })

        new Vue({
            el:'#root'
        })
    </script>

组件名称

建议组件名称使用小驼峰声明, 在视图中调用时,将首字母大写转为 "-小写"即可
在template模板中.有且只能有一个根节点. 如果内容需要换行时,使用模板字符串

template模板

<div id="app">
    <one></one>
</div>

<template id="a">
<div><div>我是one组件1</div><div>我是one组件2</div></div>
</template>
<script src="vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
        },
        //注册组件/声明组件/创建组件
        components:{
            one:{ //one为组件的名称，随意起即可。
               //template:`<div><div>我是one组件1</div><div>我是one组件2</div></div>`
                template:'#a'//template可以指定 前面定义的template的模板的id属性名称
              }
        }
    })
</script>

根组件与组件

一个根组件是一个Vue实例 ，根组件中有很多选项: el data methods watch computed filters template render components 8个钩子函数.
一个组件是一个VueComponent实例，组件中同样有很多选项: 除了el不可再次挂载，其他都可以写。包括components(即可以再套组件)，但这些属性包括各个属性中的数据或方法都是各个组件所私有的。

<div id="app">
    </div>
    <script src="vue.js"></script>
    <script>
        // new Vue() 是一个特殊组件，是个根组件，所有显示的东西都会落实在#app中。
        new Vue({
            el:'#app',
            components:{
      //除了el，其它都有 data methods filters watch computed template render8个生命周期钩子函数
            },
            template:'',
            //8个生命周期钩子函数
        })
    </script>

组件的嵌套

组件A中定义组件B，那么B只能在A中使用。
只有全局的数据在所有组件中都可以使用。
组件与组件中都是私有的、独立的。

 <div id="app">
        {{username}}
        <v-a></v-a>
    </div>
    <script src="vue.js"></script>

    <template id="a">
        <div class="c-a">
            my is a component
            <v-b></v-b>
        </div>
    </template>

    <template id="b">
        <div>
            my is b component
        </div>
    </template>

    <script>
        new Vue({ // app组件实例
            el: '#app',
            data: {
                username:'vue实例的username'
            },
            components:{
                'vA':{ //A 组件实例，它访问不到上层的data数据，需要自己定义data
                    template:'#a',
                    components:{
                       'vB':{
                    template:'#b'  //b组件是在a组件中定义的，那就意味着只在在a组件中使用b组件
                       }
                    }
                }
            }
        })
    </script>

data的用法

根组件中data是一个对象

在js中对象类型里的属性本身是属于引用类型,不管数据被复用多少次，数据都是处于共享状态,一旦data数据发生改变,那么所有复用的地方都会发生改变。

组件中data为函数

组件可复用vue实例,组件一旦被创建好之后,就有可能被复用在各个地方,不管组件被复用了多少次,他们之间的数据都应该是相互独立,互不影响的.
在组件中，data被声明为函数返回值的形式,利用函数的独立作用域即闭包，保存变量数据，相当于为每一份组件开辟一个独立的空间.这个空间维护着各自的数据，不管组件被复用多少次,组件之间数据都是相互独立的

<body>
    <div id="app">
        <v-one></v-one>
        <v-one></v-one>
    </div>

    <template id="one">
        <div class="box">
            {{num}}
            <button @click="num++">++</button>
        </div>
    </template>

    <script src="vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
            },
            components: {
                vOne: {
                    template: '#one',
                    data: function () { //组件中的data用的是函数，更加保证数据的私有性
                        return {
                            num: 0   //保证这里
                        }
                    }
                },

            }

        })
    </script>

</body>

脚手架安装(重点)

快速的把我们所需项目结构给搭建好。

下载安装脚手架

一定得先安装node

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

通过脚手架创建项目

方式一

vue create 项目名称

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OzaF9bAq-1637323745932)(C:/Users/Administrator/Desktop/%E8%AF%BE%E5%A0%82%E7%AC%94%E8%AE%B0/%E7%AC%AC%E5%9B%9B%E9%98%B6%E6%AE%B5/bj_803_4/day04/%E7%AC%94%E8%AE%B0/assets/1636447331890.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HVnens2y-1637323745934)(C:/Users/Administrator/Desktop/%E8%AF%BE%E5%A0%82%E7%AC%94%E8%AE%B0/%E7%AC%AC%E5%9B%9B%E9%98%B6%E6%AE%B5/bj_803_4/day04/%E7%AC%94%E8%AE%B0/assets/1636447506433.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gVypWGlP-1637323745936)(C:/Users/Administrator/Desktop/%E8%AF%BE%E5%A0%82%E7%AC%94%E8%AE%B0/%E7%AC%AC%E5%9B%9B%E9%98%B6%E6%AE%B5/bj_803_4/day04/%E7%AC%94%E8%AE%B0/assets/1636447542841.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-d7AYf4q4-1637323745940)(C:/Users/Administrator/Desktop/%E8%AF%BE%E5%A0%82%E7%AC%94%E8%AE%B0/%E7%AC%AC%E5%9B%9B%E9%98%B6%E6%AE%B5/bj_803_4/day04/%E7%AC%94%E8%AE%B0/assets/1636447587511.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-A5JsPMxn-1637323745945)(C:/Users/Administrator/Desktop/%E8%AF%BE%E5%A0%82%E7%AC%94%E8%AE%B0/%E7%AC%AC%E5%9B%9B%E9%98%B6%E6%AE%B5/bj_803_4/day04/%E7%AC%94%E8%AE%B0/assets/1636447697973.png)]

方式二：可视化面板的方式

注意：不要有中文路径。

vue ui

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QZRrpIoE-1637323745950)(C:/Users/Administrator/Desktop/%E8%AF%BE%E5%A0%82%E7%AC%94%E8%AE%B0/%E7%AC%AC%E5%9B%9B%E9%98%B6%E6%AE%B5/bj_803_4/day04/%E7%AC%94%E8%AE%B0/assets/1636447872440.png)]

项目目录

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0hCJ2rKY-1637323745951)(C:/Users/Administrator/Desktop/%E8%AF%BE%E5%A0%82%E7%AC%94%E8%AE%B0/%E7%AC%AC%E5%9B%9B%E9%98%B6%E6%AE%B5/bj_803_4/day04/%E7%AC%94%E8%AE%B0/assets/1636448324693.png)]

- node_modules:  项目所需依赖，不用发给别人
- public : 项目运行的根目录
- src : 项目的源代码文件夹（自己的代码一定是放在src中的）
.gitignore  git上传的忽略配置信息
babel.config.js babel的配置，不用管
package.json  项目的配置信息
readme.md 读我

vuter插件.

脚手架组件注册

关于.vue文件

components:{
    组件名称:{
        template:"具体的模板字符串",
        data,
        methods,
        filters,
        //样式
    }
}

vue是面向组件化编程。
vue为了方便编程，提出了以.vue为后缀的单文件组件。组件由html、css、js组成
每一个.vue文件就是一个独立的组件。
因此暴露时不需要写template属性，直接引入注册即可。

<template>
	<根节点>
    </根节点>
</template>

<script>
    export default {
        //这里不需要使用template属性
    }
</script>

<style>

</style>

局部注册

import vHello from "./components/vHello"; //.vue 后缀可以省略

//局部注册
export default {
  components: {
    vHello,
  },
};

全局注册

在main.js中注册 Vue.componet

//全局注册组件
import vHeader from './components/vHeader'
Vue.component( 'vHeader',vHeader )

v-if与v-show的生命周期影响

v-if符合条件会创建组件的生命周期，不符合条件不会创建生命周期。
v-show不管符合不符合条件都会创建生命周期，但只会创建一遍，之后利用样式控制显示与否。

scoped 样式的问题

每一个.vue的style上加一个 scoped属性，那么样式只会对本页面的组件产生作用。

部注册
export default {
components: {
vHello,
},
};


### 全局注册

在main.js中注册 Vue.componet

```js
//全局注册组件
import vHeader from './components/vHeader'
Vue.component( 'vHeader',vHeader )

v-if与v-show的生命周期影响

v-if符合条件会创建组件的生命周期，不符合条件不会创建生命周期。
v-show不管符合不符合条件都会创建生命周期，但只会创建一遍，之后利用样式控制显示与否。

scoped 样式的问题

每一个.vue的style上加一个 scoped属性，那么样式只会对本页面的组件产生作用。
app.vue一般不加scoped，我们可以当作全局样式。

weiweiweb888

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue组件+脚手架

组件(components)以前我们讲过模块化，而模块化指的是纯js的部分，也就是纯逻辑部分。前端包含html、css、js。前端提出了一个组件化思想：组件化：指把html、css、js通过某种规范把它蹂躏在一起。然后我通过书写标签的方式，那么就复用了某段代码（包含你封装好的html、css、js），那封装好的这个东西就叫组件。组件化一定是包含模块化的（每个组件都是独立的）、而模块化不等于组件化。定义组件(component)在vue是一个很强大的功能,可以对HTML进行扩展,在大型应用中,为
复制链接

扫一扫