Vue3.0万字基础篇

补充：

1.过滤器的使用

连续调用

{{值|过滤器2|过滤器3}}

第一个值会传给第二个过滤器里面的第一个参数，第二个过滤器处理完后返回值在第三个过滤器里面也可以拿到进行处理。

传参，接受参数顺序位置

{{message|filter(a,b)}}




接受值

Vue.filter(filter,(message,a,b)=>{
})

单页面应用的缺点

1.路由懒加载

2.代码压缩

3.cdn加速，网络传输压缩

导致首屏加载慢。

不利于SEO(ssr服务器端渲染)

创建单页面应用程序的方式：

1.vite

仅支持vue3.x不基于webpack,运行速度快，小

2.vue-cli

大而全，基于webpack，支持vue2和3

基于vite创建vue项目

创建并初始化项目

npm init vite-app 项目名称

npm init vite-app code1//1

cd code1 //2

npm install //3

4.npm run dev

项目结构

通过main.js把App.vue渲染到index.html的指定区域

App.vue用来编写待渲染的模板结构，index.html预留了id为app的区域用来渲染app.vue

1.在main.js中有和vue2不一样的东西

从vue中按需导入createApp函数，用来创建vue的“单页面应用程序实例”，就是vue实例

import { createApp } from 'vue'

导入App组件并且把组件渲染到vue实例里面，mount('#app')==el:'app',绑定id=app指定vue实例控制的区域，把app.vue渲染到实际控制区域

import App from './App.vue'
createApp(App).mount('#app')

组件化开发：把页面上可重用的部分封装为组件，方便开发和维护

每个vue组件都由template模板结构，script，style样式组成

template是容器不会被渲染到页面，vue3和vue2中template的区别

1.vue2中template只支持单个根节点，但是vue3中支持多个根节点

在vue2中template节点内的元素必须包一层div否则报错，但是vue3中并不需要，也可以包裹

script中的name属性自定义的组件名在使用vue-devtools进行项目调试的时候可以清晰区分每个组件

data节点：组件中的data节点只能以函数形式return不能以对象形式储存数据

组件：通过name属性注册组件，

之前在全局注册的时候都是使用自定义组件名的方式来定义标签名

Vue.component('MyApp',MyApp)

也可以直接使用组件的name属性来注册

Vue.component(MyApp.name,MyApp)

组件样式冲突问题

在style标签上使用scoped属性解决组件样式冲突问题，原理就是scoped属性会给每个便签都添加自定义属性来解决样式冲突问题

/deep/加在有些需要控制子组件某些样式时候可以使用这个属性：

/deep/ .msg{
}

这样就可以突破scoped的封锁线冲出去寻找他的儿子了，vue3里用：deep()来代替/deep/

:deep(.msg){}

props:父传子

子组件中
export default{
name:'MyHellow'
props:{
msg:String
}
}




父组件

<MyHellow msg='我是父组件传过来的值'    />

或者

<MyHellow :msg='daya'    />

data(){
return{
daya:''我是父组件传过来的值'
}
}

prop参数值的命名规则

props:{
pubName:String
}

父组件传值可以以

pubName='' 或者 pub-name=''

props都可以接收到值

Class和Style的绑定

通过v-bind可以绑定class的类名

<template>
  <!-- <MyDream></MyDream> -->
  <h1 :class="isFalse ? 'newClas' : ''">我是class测试组件</h1>
  <button @click="isFalse = !isFalse">点我变身</button>
</template>

<script>
import MyDream from './components/MyDream.vue'
export default {
  name: 'App',
  components: {
    MyDream
  },
  data() {
    return {
      isFalse: false
    }
  }
}
</script>
<style lang="less">
.newClas {
  color: hotpink;
  font-size: 500px;
}
</style>

数组语法绑定多个class类名

<template>
  <!-- <MyDream></MyDream> -->
  <h1 :class="[isFalse ? 'newColor' : '', isBig ? 'big' : '']">
    我是class测试组件
  </h1>
  <button @click="isFalse = !isFalse">点我变颜色</button>
  <button @click="isBig = !isBig">点我变歪</button>
</template>

<script>
import MyDream from './components/MyDream.vue'
export default {
  name: 'App',
  components: {
    MyDream
  },
  data() {
    return {
      isFalse: false,
      isBig: false
    }
  }
}
</script>
<style lang="less" scoped>
.newColor {
  color: hotpink;
}
.big {
  font-style: oblique;
}
</style>

对象语法绑定class,因为以数组形式绑定class会使模板可读性遍地，性能也会受影响

布尔值的名字要和类名一样才可以

<template>
  <!-- <MyDream></MyDream> -->
  <!-- <h1 :class="[isFalse ? 'newColor' : '', isBig ? 'big' : '']">
    我是class测试组件
  </h1>
  <button @click="isFalse = !isFalse">点我变颜色</button>
  <button @click="isBig = !isBig">点我变大</button> -->
  <h1 :class="classObj">我是class测试组件</h1>
  <button @click="classObj.isFalse = !classObj.isFalse">点我变颜色</button>
  <button @click="classObj.isBig = !classObj.isBig">点我变大</button>
</template>

<script>
import MyDream from './components/MyDream.vue'
export default {
  name: 'App',
  components: {
    MyDream
  },
  data() {
    return {
      classObj: { isFalse: false, isBig: false }
    }
  }
}
</script>
<style lang="less" scoped>
.isFalse {
  color: hotpink;
}
.isBig {
  font-style: oblique;
}
</style>

动态绑定style

 <h1 :style="{ color: active, 'font-size': font + 'px' }">我是一对象</h1>
  <button @click="font++">+1</button>
  <button @click="font--">-1</button>
</template>

<script>
import MyDream from './components/MyDream.vue'
export default {
  name: 'App',
  components: {
    MyDream
  },
  data() {
    return {
      font: 24,
      active: 'red'
    }
  }
}

props验证

在子组件接受值的时候进行验证

props:{
    msg:String
    num:[Number,String,Boolean,Array,Object,Date,Function,Symbol]
    num1:{
type:[Number,String,Boolean,Array,Object,Date,Function,Symbol],
require:true //必填项
default:123 //默认值
}



}

自定义验证函数 

props:{

num:{
validator(value){//成功返回true,失败返回false
验证num是不是等于数组中的任何一个值，
return ['Number','String','Array'].indexOf(value)!=-1
}
}
}

还可以使用instandOf来验证数据类型

计算属性·1

实时监听data中的数据变化，并return返会一个计算后的新值。

计算属性相对于方法来说，计算属性会缓存计算的结果，只有依赖项数据发生变化时才会重新计算

自定义事件 

1.声明自定义事件

emits:['numChange']

创建button设置单击事件add

add(){
this.count++
this.$emit('numChange')
}

 在父组件监听事件触发

@numChage='getCount'







getCount(){



cl(触发了numchange)
}

传参在$emit()中第二个参数可以传参

this.$emit('numChange',count)

组件上使用v-model:子组件值发生改变同步到父组件，父组件值发生改变同步到子组件

父向子同步数据

1.父组件通过v-bind向子组件传递数据，子组件通过props接收父组件传过来的值

<myDream  :msg='counts'></myDream>



props:{
    counts:{
    type:[string,num]
}
}

2.子向父同步数据

1.在父组件v-bind前添加v-model

  <MyDream v-model:counter="font"></MyDream>

2.在子组件添加$emit('update:counter',this.counter+1)

3.父组件v-bind前加v-model这样就双向绑定了counter和font

watch 监听器 

watch:{
username(newVal,oldVal){

}
}


watch:{
username:{
handler(newVal,oldVal){

}
immediate:true//立即执行
deep:true//深度监听用于监听数组、object的变化
}
}

//对象中单个属性的变化
watch:{
'username.name':{
handler(newVal,oldVal){

}
immediate:true//立即执行
deep:true//深度监听用于监听数组、object的变化
}
}

计算属性和监听器侧重不同，计算属性侧重监听多个值的变化，计算并返回最终的值，

watch侧重于单个数据的变化，最终执行特定的任务去执行，不需要返回值

组件的生命周期 

运行：import导入component注册标签使用，在内存实例中创建对象，把创建的实例渲染到页面，组件切换时销毁需要被隐藏的组件

主要生命周期

created:组件在内存中创建完毕，一个生命周期只执行一次，可以在这里发起ajax请求初始化

mounted:组件在页面被渲染后，执行一次，可以操作Dom元素

update:组件在页面中被重新渲染后，0或多次

unmounted：组件被销毁（页面和内存）后，一次

组件之间的数据共享

1.父--->子

<父组件里面的子组件标签 :name='username'>


子

props:{
    name:String
}

2.子-->父

子组件

emits:['numAdd']


add()
{
this.$emit('numAdd',this.num)
}

<父组件中的子组件 @numAdd='addNew'>





addNew(val){

//val==num

}

3.父<->子

<父组件中的子组件   v-model:num='count'>







子组件
emits:['update:num']
props:{
    num:Number
}



this.$emit('update:num',this.number+1)

4.EventBus全局事件总线

第三方包mitt,

创建EventBus.js

import mitt from'mitt'

const bus=mitt()



export default bus

在两个兄弟组件中引入

import bus from'./EventBus'

发送数据方

methods:


addNum(){

bus.emit('countChange',this.count)
}

接受方在created中接受

created:

bus.on('countChange',(count)=>{
this.num=count

cl(count)

})

后代数据共享

父：

data(){
num:1
},
provide(){
return{
num:this.num
}
}

后代：

inject:['num']

接收后就可以直接使用，

共享响应式数据父组件数据改变后代组件也改变

import { computed } from 'vue'//按需导入computed函数

provide() {
    return {
      username: computed(() => this.username)
    }
  },

同时取数据也要.value形式

vuex更高效的数据维护

Vue3.x中的axios全局配置

在main.js中通过app.config.globalProperties全局挂载axios

导入
import axios from 'axios'

axios.default.baseUrl='http://127.0.0.1'



const app=createApp(App)

app.config.globalProperties.$http=axios

app.mount('#app')

使用

this.$http.get('/post',参数)