Vue组件基础使用以及脚手架安装

标题组件基础使用以及脚手架安装

1.组件
特点：一组可复用的vue实例

组件化和模块化的区别？

组件化：组件化是指解耦复杂系统时将多个功能模块拆分、重组的过程，有多种属性、状态反映其内部特性

特点：一个具有html+css+js的页面

模块化：侧重的功能的封装，主要是针对Javascript代码，隔离、组织复制的javascript代码，将它封装成一个个具有特定功能的的模块。

<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<script>
    Vue.component('vOne',{
        template:'<div>我是第一个组件</div>'
    });
    let vm = new Vue({
        el:'#app',
        data:{},
        methods:{}
    });
</script>

2.命名规则
1.不能以标签起名，包含大写
2.建议用驼峰起名
3.首字母大写，后面直接写名字。如果后面有大写需要转换为驼峰

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {

        },
        methods: {

        },
        components: {
            vTwo: {
                template: '<div>我是第二个模板对象<div>abc</div></div>'
            },
            vThree: {
                template: `<div>我是第三个模板对象
            <h2>我是标题三</h2>
          </div>`
            }
        }
    });
</script>

3.template模板

<template id="temp1">
    <div>
        <h2>我是标题2</h2>
        <p>我是标签</p>
        <div>我是div</div>
    </div>
</template>
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {

        },
        methods: {

        },
        components: {
            vOne: {
                template: '#temp1'
            },
            vtwo: {
                template: '<div>我是检测命名的</div>'
            },
            Vthree: {
                template: '<div>我是检测命名的three</div>'
            },
            VthreeInfo: {
                template: '<div>我是检测命名的info</div>'
            }
        }
    });
</script>

4、组件嵌套

<template id="temp1">
    <div>
        <h2>我是模板一</h2>
        {{name}}
    </div>
</template>

<template id="temp2">
    <div>
        <h2>我是模板二</h2>
    </div>
</template>

<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<script>
    let vm = new Vue({
        el:'#app',
        data:{
            msg:'hello'
        },
        methods:{

        },
        components:{
            vOne:{
                template:'#temp1',
                components:{
                    vInner:{
                        template:'<div>我是里层嵌套的模板<v-three></v-three></div>',
                        components:{
                            vThree:{
                                template:'#temp2'
                            }
                        }
                    }
                },
                data() {
                    return {
                        name:'张三'
                    }
                }
            }
        }
    });
</script>

5.data使用

重点：组件中定义data为函数，原因是：为了共享数据但是又互相不干扰.

6.后台管理页面实现

注意：1.外层嵌套大盒子（container） 2.划分布局 3.书写组件 4.组件嵌套 5.添加样式

<template id="container">
    <div class="container">
        container
        <v-header></v-header>
        <v-body></v-body>
        <v-footer></v-footer>
    </div>
</template>

<template id="header">
    <div class="header">
        header
    </div>
</template>

<template id="body">
    <div class="body">
        body
        <v-left></v-left>
        <v-right></v-right>
    </div>
</template>

<template id="footer">
    <div class="footer">
        footer
    </div>
</template>

<template id="left">
    <div class="left">
        left
    </div>
</template>

<template id="right">
    <div class="right">
        right
    </div>
</template>

<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<script>
    let vLeft = {
        template: '#left'
    }

    let vRight = {
        template: '#right'
    }

    let vBody = {
        template: '#body',
        components: {
            vLeft,
            vRight
        }
    }

    let vHeader = {
        template: '#header'
    }

    let vFooter = {
        template: '#footer'
    }

    let vContainer = {
        template: '#container',
        components: {
            vHeader,
            vBody,
            vFooter
        }
    }

    let vm = new Vue({
        el: '#app',
        data: {

        },
        methods: {

        },
        components: {
            vContainer
        }
    });
</script>

8.生命周期 --8个钩子函数 mounted 是最常用的

v-if 会引起生命周期的改变

v-show 不会引起

上述案例生命周期的执行过程为：

首先是vm实例的生命周期执行beforeCreate，created，beforeMount，之后是到组件走生命周期beforeCreate，created，beforeMount，mounted，最后是走vm的mounted。

9.脚手架

步骤：

//全局安装webpack
npm i webpack -g

//查看版本
webpack -v

//全局安装vue脚手架 2.x
npm i vue-cli -g

//查看版本
vue -V

以上操作只需要操作一次
//创建项目
vue init webpack demo

//进入项目
cd demo

//启动
npm run dev //localhost:8080

注意： 安装cnpm方法 淘宝镜像
npm i -g cnpm --registry=https://registry.npm.taobao.org

注意：
1.名字：不能带大写
2.全选n
3.在当前文件夹中不能有vue.js这个文件

1.index.html ->页面的入口文件
2.main.js->程序的入口文件
3.App.vue ->组件–>类似上午的containter

总结:

后台项目：

1.划分组件

App.vue->container 整个容器

header,footer，main，left，right 都是单独的组件 需要用谁直接 import导入就行

//点击弹框

局部定义弹框 首先要有弹框组件 alertbtn.vue 哪用在哪里引入

最后

以上就是缓慢大树为你收集整理的Vue组件基础使用以及脚手架安装的全部内容，希望文章能够帮你解决Vue组件基础使用以及脚手架安装所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。