Vue3基础知识总结复习（二） | 青训营笔记这是我参与「第四届青训营」笔记创作活动的第4天四、基于vite的vue

这是我参与「第四届青训营」笔记创作活动的第4天

四、基于vite的vue3项目创建

1.vite的优缺点，和vue-cil对比

	vite	vue-cil
支持的vue版本	仅支持vue3.x	支持3.x和2.x
是否基于webpack	否	是
运行速度	快	较慢
功能完整度	小而巧	大而全
是否建议在企业级开发中使用	目前不建议	建议

2.在vscode中建立vite vue3项目

在vscode中打开终端,安装vue/cli最新稳定版本

npm install -g @vue/cli@next
vue --version

创建项目，并按终端提示操作

npm init vite-app

运行项目，终端处会有运行的指令提示
打开提供的网址

五、组件的定义与使用

vue的核心思想之一就是组件化，建立一个单页面应用，剩余的内容依托一个个的组件来实现，甚至连App.vue也被称为根组件

1.组件的定义

只要定义一个.vue文件，置于components文件夹中，就完成了一个组件的定义，例如：

<!-- MySwiper.vue -->
<template>
    <h3>轮播图组件</h3>
</template>
<script>
    export default {
        name : 'MySwiper'  //帕斯卡命名法命名组件，使用组件时，既可以用MySwiper，也可以用my-swiper
    }
</script>

2.组件的全局注册

对组件进行全局注册后，就只可以在整个项目使用该组件

<template>
    <my-swiper>使用组件</my-swiper>
</template>

//main.js
import Swiper from './components/MySwiper.vue'
app.component(Swiper.name,Swiper)  //相当于 app.component('MySwiper',Swiper)  //前者为组件使用时的名字

3.组件的局部注册

对组件进行局部注册后，就只可以在当前的vue页面使用该组件

<template>
    <my-swiper>使用组件</my-swiper>
</template>

<script>
    import Swiper from './components/MySwiper.vue'
    export default {
        components:{
            'MySwiper': Swiper,
        },
    }
</script>

4.解决样式冲突

当在父组件中使用子组件时，父组件的样式会覆盖子组件的样式，因为所有的组件最终都是基于index.html这一个页面来实现的（样式都写到一起了）
通过添加scoped,为每个样式都添加了一个特定的标识（属性选择器），防止样式混淆。

<style scoped>
<!--添加样式-->
</style>

如果想让某个样式对子组件生效，可以使用:deep( )选择器

//App.vue
<style scoped>
    :deep(.title) {
    color: biue;
}
</style>

5.组件的props

props是组件的自定义属性，父组件通过props向子组件传递要展示的数据
props的好处：提高了组件的复用性
在封装vue组件时，可以把动态的数据声明为props属性，例：

//Article.vue
<template>
    <h3>标题：{{title}}</h3>
    <h5>作者：{{author}}</h5>
</template>

<script>
    export default {
        name:'MyArticle',
        props: ['title','author'],
    }
</script>

接下来可以在父组件注册后，如下使用该组件：

//App.vue
<my-article title="vue复习笔记" author="小雏菊"></my-article>

prop的属性值也可以被动态绑定：

//App.vue
<my-article :title="title" :author="'post by ' + author"></my-article>

如果需要对props进行数据类型校验，则可以定义对象类型的props,如果类型不对则会报错

props:{
    count:Number,              //count需要为数字，否则会报错
    state:[String, Boolean]    //如果可以是多种类型，可以填一个数组
    author:{                 //如果设置为必填项，则如下设置
        type: String,
        required: true       
    }
    title:{                 //如果设置不填后的默认值，则下设置
        type: String,
        default:'标题组件'   
    }
    number:{               //如果props仅能为某些特定值，可以如下自定义验证函数
        vaildator(value){
            return ['success','danger'].indexOf(value) !== -1
        }
    }
    
}

6.`computed`计算属性

计算属性本质上是一个同名函数，它可以监听页面上另一个数值的变化，并根据另一个值实时在DOM元素中更新该值，例子：

  <input type="text" v-model.number="count">
  <p>{{ count }} 乘以2 为：{{ plus }} </p>
  
export default {
  data() {
    return {
      count: 1
   }
  },
  computed: {   
    plus() {    //计算属性，监听count的变化，自动计算plus
     return this.count * 2 
    },
  }
}

其实普通方法也可以监听值的更改，但是计算属性在被调用时会检测数据是否改变，改变才会重新计算，所以效率更高，而方法无论count变不变，如果多次调用则每次都会再计算一遍

Vue3基础知识总结复习（二） | 青训营笔记