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

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

回顾

Q:1.动画的使用方法以及动画库的使用方式

2.vue中的指令有哪些?

3.vue中生命周期钩子函数有哪些?分别代表什么含义?

4.filter的语法是什么?

5.computed的特点是什么?

6.watch与computed的区别?

7.vue中的配置项有哪些?

8.页面中新增加属性后页面不渲染问题怎么解决?

9.数组中的forEach,some,every是如何使用的?

10.格式化时间时的补零操作两种方法?

padStart(位数,‘a’)头部补零(用a补)

padEnd(位数,‘a’)尾部补零

一、组件的基础使用

1.组件

特点:一组可复用的vue实例

组件化和模块化的区别?

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

特点:一个具有html+css+js的页面(单页面组件)

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

2.命名规则

<1>.不能以标签起名,包含大写

<2>.建议使用驼峰方式 需要把大写字母变为小写同时加上连字符:vOne——>v-one

<3>.首字母大写,后面直接写名字。如果后面有大写需要转换为驼峰 OneInfo——>One-info

3.用法:全局定义,局部定义

Vue.component(‘组件名’,{模板对象})

components:{组件名:{模板对象}}

4.template模板:要往页面上渲染的模板

特点:template 有且只能有一个根元素 通常是div

<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
</head>

<body>
    <div id='app'>
        <v-one></v-one>
        <v-two></v-two>
        <v-three></v-three>
    </div>
</body>
<!-- 开发环境 -->
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<script>
    // 组件:一组可复用的vue实例
    // 用法:全局定义,局部定义

    // Vue.component('组件名',模板对象)
    // components:{组件名:{模板对象}}

//必须要写在实例对象之前
Vue.component('vOne',{
    // template:要往页面上渲染的模板
    template:'<div>我是第一个组件</div>'
})


    let vm = new Vue({
        el: '#app',
        data: {},
        methods: {
        },
        components:{
          vTwo:{
              template:'<div>我是第二个模板对象<div>abc</div></div>'
          },
          vThree:{
              template:`<div>我是第二个模板对象
                <h2>我是标题2</h2>
              </div>`
          }   
        }
    })
    // 特点:template 有且只能有一个根元素 通常是div
</script>

</html>

5.组件嵌套

总结:

组件中关系:只有父子和非父子关系

嵌套:子组件只能在父组件中使用

组件中的data :定义为方法,必须有返回值,同时返回值的类型为对象

data 中的数据只能供自己使用 如果其他组件需要使用需要传值 比如data,methods,filter,cmpputed,watch…

<body>
    <div id='app'>

        {{msg}}

        <v-one></v-one>
    </div>
    <template id="temp1">
        <div>
            <h2>我是模板一</h2>
            {{name}}
            <!-- {{msg}} -->
            <!-- <v-inner></v-inner> -->
        </div>
    </template>
    <template id="temp2">
        <div>
            <h2>我是模板二</h2>
          
        </div>
    </template>
</body>
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<script>
    // 组件:一个可复用的vue实例
    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'
                            }
                        }
                    },
                    vOuter:{

                    }
                },
                data(){
                    return {
                        name:'张三'
                    }
                }
            }
        }
    })
    // 总结:组件中关系:只有父子和非父子关系
    //        嵌套:子组件只能在父组件中使用
    //      组件中的data :定义为方法,必须有返回值,同时返回值的类型为对象 
    //       data 中的数据只能供自己使用 如果其他组件需要使用需要传值 比如:data,methods,filter,cmpputed,watch...
</script>

6.data使用

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

<body>
    <div id='app'>
        <div>{{msg}}</div>
        <p>{{msg}}</p>
        <button @click = 'change'>点击修改msg</button>

        <hr>

        <v-one></v-one>
        <v-one></v-one>
    </div>
    <template id="temp1">
        <div>
            <p>{{content}}</p>
            <button @click='changeOne'>修改内容</button>
        </div>
    </template>
</body>
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            msg:'abc'
        },
        methods: {
            change(){
                this.msg='123'
            }
        },
        components:{
            vOne:{
                template:'#temp1',
                data(){
                    return {
                        content:'我要被修改了'
                    }
                },
                methods: {
                    changeOne(){
                        this.content = '我被修改了'
                    }
                },
            }
        }
    })

    // 总结:data定义为函数的原因:由于需要共享数据,但是又要互不干扰,所以定义为函数。
</script>

7.后台管理页面实现

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

vw 视口宽度 viewWidth vh 视口高度

<style>
        .container {
            /* vw  视口宽度  viewWidth    vh 视口高度 */
            width: 100vw;
            height: 100vh;
            background-color: red;
            display: flex;
            flex-direction: column;
        }

        .header {
            width: 100vw;
            height: 100px;
            /* flex:1; */
            background-color: gold;
        }

        .footer {
            width: 100vw;
            height: 60px;
            /* flex:2; */
            background-color: teal;
        }

        .main {
            flex: 1;
            background-color: pink;
            display: flex;
        }

        .left {
            width: 150px;
            background-color: purple;
        }

        .right {
            flex: 1;
            background-color: hotpink;
        }
    </style>
</head>

<body>
    <div id='app'>
        <App></App>
    </div>


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

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

    <template id="main">
        <div class="main">
            <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>
</body>
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<script>

    let vRight = {
        template: '#right'
    }
    let vLeft = {
        template: '#left'
    }

    let vMain = {
        template: '#main',
        components: {
            vLeft,
            vRight,
        }
    }
    let vFooter = {
        template: '#footer'
    }

    let vHeader = {
        template: '#header'
    }

    let App = {
        template: '#container',
        components: {
            vHeader,
            vMain,
            vFooter,
        }
    }
    // 可复用的vue实例
    let vm = new Vue({
        el: '#app',
        data: {},
        methods: {
        },
        components: {
            App,
        },
        template:'<div>我是vm的模板</div>'
    })
</script>

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

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

v-show 不会引起

<body>
    <div id='app'>
        <div v-html='msg' v-if='isShow'></div>
        <button @click='change'>点击</button>
        <hr>
        <v-one v-show='isShow'></v-one>
    </div>


    <template id="temp1">
        <div>
            <div v-if='show'>{{con}}</div>
            <button @click='changeC'>点击切换内容</button>
        </div>
    </template>
</body>
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            msg: 'hello world!',
            isShow: true
        },
        methods: {
            change() {
                this.isShow = !this.isShow
            }
        },
        components: {
            vOne: {
                template: '#temp1',
                data() {
                    return {
                        con: '我是组件模板',
                        show: true
                    }
                },
                methods: {
                    changeC() {
                       this.con = '我被修改了!!!!!!!'
                    }
                },
                mounted() {
                    console.log('组件内容挂载完成')
                },
                destroyed() {
                    console.log('销毁执行了')
                },
            }
        },
        mounted() {
            console.log('vm内容挂载完成')
        },
        destroyed() {
            console.log('vm销毁执行了')
        },
    })
</script>

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

首先是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 哪里用在哪里引入

<template>
  <div class="left">
      left
      <v-alert></v-alert>
  </div>
</template>
<script>
import vAlert from './aletrBtn'
export default {
  components: {
      vAlert
  },
  data() {
    return {};
  },
  methods: {},
  mounted() {},
};
</script>
<style>
.left{
    width: 200px;
    background: orange;
}
</style>
//全局引入弹框  需要在main.js中定义

// 引入弹框的组件
import vAlert from './components/aletrBtn.vue'

Vue.component('vAlert',vAlert)

<template>
    <div class="header">
        header
        <v-alert></v-alert>//在其他页面只需要调用组件名即可 (v-alert)
    </div>
</template>

<script>
export default {
}
</script>

<style>
    .header{
        width: 100vw;
        height: 100px;
        background: red;
    }
</style>
上一篇:Vue如何优化组件注册


下一篇:Yii2 之 frontend 子模块实践之二:构建子模块的独立配置