首页 > 其他分享 >vue3 与vue2的区别-cnblog

vue3 与vue2的区别-cnblog

时间：2023-02-04 11:34:23浏览次数：39  
标签：count axios vue vue2 vue3 组件 import 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代理不存在跨域的问题

QQ截图20220402220312

  • 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>

标签：count,axios,vue,vue2,vue3,组件,import,cnblog
From： https://www.cnblogs.com/lingxin1123/p/17091157.html

相关文章

  • vue入门（二）-cnblog
    vue入门（二）1.过滤器一个函数在插值表达式中使用，对插值的值进行再处理{{username|toUpCase}}示例<!DOCTYPEhtml><htmllang="en"><head><metacharset......
  • vue入门（一）-cnblog
    vue入门（一）1.什么是vue一个框架（现有的解决方案）构造用户界面（操作html页面的内容）2.vue的特性数据驱动视图页面所依赖的数据发生变化时，vue会监听数据的变化，重新......
  • VUE学习笔记DAY01-cnblog
    webpack的使用（配合ppt）1.webpack前端工程化的具体解决方案作用代码压缩混淆处理浏览器端的JavaScript兼容性性能优化1.1基于webpack实现隔行变色npmij......
  • Vue（四）-cnblog
    Vue（四）1.生命周期一个组件从（创建->运行->销毁的整个阶段）生命周期函数：vue框架的内置函数，会随着组件的生命周期，自动按次序执行注意点生命周期强调整个时间段......
  • Vue（三） （Vue-cli）-cnblog
    Vue（三）（Vue-cli）1.单页面应用程序（SPA）一个web网站只有唯一的html页面2.vue-cli简化了webpack创建工程化Vue项目的全过程不需要自己去配置webpack，只需专心写页面2.......
  • Node.js学习第四天-cnblog
    Node.js学习第四天1.基本使用安装[email protected]创建最基本的web服务器constexpress=require('express')constapp=express()app.listen(80,()=>{......
  • vite + vue3 + js + xlsx 导出excel
    安装依赖 1npminstallxlsx--save 使用版本  封装js/*导出excel文件*//***导出excel文件实现思路分析**1.通过XLSX插件的XLSX.utils.book_new......
  • Vue3 Vite 打包后页面报错 Unknown option default
    问题目测这次问题出在axios上UncaughtError:Unknownoptiondefault解决参考这位朋友的文章解决了：vite打包axios的时候报错解决方案以前遇到过，时间一长忘了（）......
  • html+css部分复习-cnblog
    HTML+CSS部分复习(蓝桥杯参考)0.考前准备插件安装设置：文件自动格式化1.web标准结构(HTML)表现(CSS)行为(js)2.前端插件安装3.img的border属性属性值：数......
  • Vue3 Vite 打包后页面报错 Function has non-object prototype 'undefined' in instan
    问题原本可以正常打包部署运行，前两天加了些新功能，再打包就遇到这个问题，其意为：函数在instanceofcheck中具有非对象原型“undefined”TypeError:Functionhasnon-object......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99