vue3 与vue2的区别-cnblog

vue3 与vue2的区别

1. template节点

vue2只允许一个根节点
vue3允许多个根节点

2. 创建工具

vue3：使用vite，也可使用vue-cli
vue2：使用vue-cli
vite创建

3. 调试工具

vue-2：标准版
vue3：bate版本

4. 使用vite的注意点

style节点下的less语法支持

需要安装less的包

项目的组成结构不同

5. vue3在main.js中的配置

6.vue3的全局注册组件

7.样式穿透

8.动态绑定html的class

9.绑定style行内样式

10.自定义属性的验证函数

对父组件传过来的值进行验证

color:{
      type:String,
      default:'white',
      // value为属性值
      // validator为自定义的验证函数，返回值为true时验证正确，false错误
      validator(value){
        return value==='red'
      }
    }

11. 自定义事件的emit节点

Counter组件作为子组件，（this.$emit()）

<template>
  <div class="Counter-container">
    <h3>Counter组件</h3>
    <button @click='change'>+1</button>
  </div>
</template>

<script>
export default {
  // 定义emits节点，存储自定义事件
  emits:['add'],
  methods: {
    change(){
      // 按钮按下触发add事件
      this.$emit('add');
    }
  }
}
</script>

<style>

</style>

app作为父组件（监听自定义事件）

<template>
  <h1>app根组件</h1>

  <Myheader title="黑马图书馆" bgcolor="blue" color="black"></Myheader>

  <Counter @add="fatherAdd"></Counter>

  <hr>

  <!-- 父组件值变化 ---值来自于子组件 -->

  <h3>count的值-----{{count}}</h3>
  


</template>

<script>
import Myheader from './components/myCpment/Myheader.vue'

// 导入Counter组件

import Counter from './components/myCpment/Counter.vue'

export default {
  data(){
    return {
      count:0
    }
  },
  name: 'App',
  components: {
    Myheader,
    Counter
  },

  methods: {
    fatherAdd(){
      this.count++;
    }
  }

  
}
</script>

12. 计算属性于侦听器的区别

13 vue3中生命周期的变化

组件在内存中被创建之后，调用created函数（vue2、3）
组件成功渲染到页面上，调用mounted函数（vue2，3）
但组件销毁完毕，调用unmounted函数（vue3）

vue3生命周期图示

14. vue3使用v-model实现父子组件双向数据绑定

15.使用mitt第三方包实现兄弟组件信息传递

mitt包的安装

npm i mitt -S

创建eventBus .js


// 导入mitt包

import mitt from "mitt";

// 创建bus对象

const bus =mitt()

// 默认到处

export default bus

left组件（数据发送方）

<template>
  <div class="Left-container">
    <h3>left组件------{{count}}</h3>
    <!-- 数据发送方 -->
    <button @click="send"></button>
  </div>
</template>

<script>
// 导入eventBus
import busEvent from './busEvent.js'
export default {
  data(){
    return {
      count:0
    }
  },
  methods: {
    send(){
      this.count++;
      // 触发发送事件
      busEvent.emit('countChange',this.count)
    }
  }
}
</script>

<style lang='less' scoped>
  .Left-container{
  flex: 1;
    height: 200px;
    background-color: pink;
  }
</style>

数据接收方

<template>
  <div class="Left-container">
    <h3>right组件-----{{count}}</h3>
  </div>
</template>

<script>
// 数据接收方
// 导入eventbus

import busEvent from './busEvent.js'
export default {
  data(){
    return{
      count:0
    }
  },
  // 在组件被创建时就监听eventBus事件

  created () {
    busEvent.on('countChange',(count)=>{
      this.count=count
    })
  }
}
</script>

<style lang='less' scoped>
  .Left-container{
  flex: 1;
    height: 200px;
    background-color: skyblue;
  }
</style>

16 vue3中向子孙节点共享数据

父组件使用provide函数来提供要共享的数据

数据如果为响应式（实时更新），需要使用computed函数
子孙节点使用inject节点来接收父组件来的数据

接收响应式数据，需要使用（属性名）.value来获取
爷组件（app.vue）

<template>
  <div class="box">
    <h1>app根组件（爷）---------------{{count}}</h1>
    <button @click="count+=1">+1</button>
    <LeftOne></LeftOne>
  </div>
</template>

<script>
import { provide } from '@vue/runtime-core'

// 导入LeftOne组件

import LeftOne from './components/LeftOne.vue'

// 导入vue中的computed函数

import {computed} from 'vue'

export default {
  name: 'App',
  components: {
    LeftOne
  },
  data(){
    return {
      count:10
    }
  },

  // provide方法用于向子组件传递值
  provide(){
    return {
      countFather:computed(()=>this.count)
    }
  }
}
</script>

子组件

<template>
  <div class="LeftOne-container">
    <h3>leftone组件----------</h3>

    <!-- 使用LeftTwo组件 -->

    <LeftTwo></LeftTwo>
  </div>
</template>

<script>
// 导入lefttwo组件

import LeftTwo from './LeftTwo.vue'
export default {
  name:'LeftOne',
  components:{
    LeftTwo
  }
}
</script>

<style>

</style>

孙组件

<template>
  <div class="LeftOne-container">
    <h3>lefttwo组件(孙子)----------{{countFather.value}}</h3>
  </div>
</template>

<script>
export default {
  name:'LeftOne',
  data(){
    return {
      count:0
    }
  },

  //使用inject节点来接收爷发过来的值 
  inject:['countFather']
}
</script>

<style>

</style>

17.vue3.0挂载全局axios

18 解决powershell窗口不识别vue命令的问题

19 axios拦截器

1. 配置请求拦截器

axios.interceptors.request.use(成功的回调函数，失败的回调函数)

2. 配置响应拦截器

axios.interceptors.response.use(成功的回调函数，失败的回调函数)

3.一个示例

import Vue from 'vue'
import App from './App.vue'
import router from './router'

// 导入element-ui
import ElementUI, { Loading } from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

// 导入axios

import axios from 'axios'
Vue.config.productionTip = false
// 请求的根地址
axios.defaults.baseURL = 'https://www.escook.cn'

// element的加载效果实例
let loadingInstance = null

// axios请求拦截器

axios.interceptors.request.use(config => {
  // 配置token字段
  config.headers.Authorization = 'barere xxx'
  console.log(config)
  // 加载效果
  loadingInstance = Loading.service({ fullscreen: true })
  // 在发起请求时加载element-ui的加载效果
  return config
})

// axios响应拦截器
axios.interceptors.response.use(response => {
  // 关闭loading加载效果
  loadingInstance.close()
  return response
})

Vue.prototype.$http = axios

// 挂载element-ui
Vue.use(ElementUI)
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

20 proxy跨域代理

原理

proxy代理不存在跨域的问题

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'

// 导入element-ui
import ElementUI, { Loading } from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

// 导入axios

import axios from 'axios'
Vue.config.productionTip = false
// 请求的根地址

// 配置跨域代理

axios.defaults.baseURL = 'http://localhost:8080/'
// axios.defaults.baseURL = 'https://www.escook.cn'

// element的加载效果实例
let loadingInstance = null

// axios请求拦截器

axios.interceptors.request.use(config => {
  // 配置token字段
  config.headers.Authorization = 'barere xxx'
  console.log(config)
  // 加载效果
  loadingInstance = Loading.service({ fullscreen: true })
  // 在发起请求时加载element-ui的加载效果
  return config
})

// axios响应拦截器
axios.interceptors.response.use(response => {
  // 关闭loading加载效果
  loadingInstance.close()
  return response
})

Vue.prototype.$http = axios

// 挂载element-ui
Vue.use(ElementUI)
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    // 配置跨域代理
    proxy: 'https://www.escook.cn'
  }
})

app.vue发起请求

<template>
  <div id="app">
    <h1>app组件</h1>

    <hr />

    <el-row>
      <el-button>默认按钮</el-button>
      <el-button type="primary" @click='getinfo'>主要按钮</el-button>
      <el-button type="success" @click='getUser'>成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    async getinfo () {
      const { data: res } = await this.$http.get('/api/get', {
        params: {
          name: 'zs',
          age: 18
        }

      })

      console.log(res)
    },

    async getUser () {
      const { data: res } = await this.$http.get('/api/users')

      console.log(res)
    }
  }
}
</script>

<style lang="less"></style>

posted @ 2023-02-04 11:19 凌歆阅读(147) 评论(0) 收藏举报

刷新页面返回顶部

vue3 与vue2的区别-cnblog

vue3 与vue2的区别

1. template节点

2. 创建工具

3. 调试工具

4. 使用vite的注意点

5. vue3在main.js中的配置

6.vue3的全局注册组件

7.样式穿透

8.动态绑定html的class

9.绑定style行内样式

10.自定义属性的验证函数

11. 自定义事件的emit节点

12. 计算属性于侦听器的区别

13 vue3中生命周期的变化

vue3生命周期图示

14. vue3使用v-model实现父子组件双向数据绑定

15.使用mitt第三方包实现兄弟组件信息传递

16 vue3中向子孙节点共享数据

17.vue3.0挂载全局axios

18 解决powershell窗口不识别vue命令的问题

19 axios拦截器

1. 配置请求拦截器

2. 配置响应拦截器

3.一个示例

20 proxy跨域代理

公告