Vue3

详细介绍了vue3的语法和常用扩展插件，方便学习和查询，干货满满，感兴趣的小伙伴可以参考使用！

Vue3

• 创建项目
  • vue create A
• 模板语法
  • 文本
    • {{ msg }}
      • 任意位置
      • 相当于JS中的$A.text()
    • 一般配合js中的data()设置数据
      • 旧版
        • export default { name: '123', data(){ return{ msg: "消息提示" } } }
      • 新版
        • ref定义变量，可以用.value属性重新赋值。 ref是reactive的再封装
        • reactive定义对象，不能定义基本数据类型，不可重新赋值
  • 原始HTML
    • 用变量动态表示HTML时，双大括号会将数据解释为普通文本，而不是HTML
    • v-html=""
      • 相当于JS中的$A.html()
  • 属性
    • 用变量动态表示attr
    • v-bind:id=""
      • 相当于JS中的$('div').attr('id', 'ID')
    • v-bind:id可以简写成:id
    • 当我们希望A="B"的B是一个变量的时候，在A前面加:就可以了
  • 在模板中可以支持简单的js表达式
    • 可以
      • {{ number + 1 }}
      • {{ ok ? 'YES' : 'NO’}}
      • {{ message.split( ' ').reverse().join( ' ')}}
    • 不行
      • {{ var a = 1 }}
        • 这是语句，不是表达式
      • {{ if (ok) {return message} }}
        • 流程控制也不会生效，请使用三元表达式
• 条件渲染
  • v-if
    • 只有值为true才会渲染
  • v-else
  • v-show
    • 会渲染，但不会显示
• 列表渲染
  • v-for
    • (x,index) in items
      • 这个指令会循环len(items)次，每次里面的x以此取items里面的值
  • :key="item.id"
    • 就地更新，提高效率
• 事件处理
  • 添加事件
    • 直接写
      • @click="counter += 1"
    • 调用函数
      • @click="clickHandle(123)"
      • 旧版
        • methods: { clickHandle(data){ console.log(data); } }
        • 在methods中改变data的值，可以通过this.A来获取
      • 新版
      • 可以加一个参数event，是原生js的事件
    • 注意
      • click可以对任何被点击的对象触发，比如<li>
• 双向绑定
  • v-model
    • 可以对<input>、<textarea>、<select>双向绑定
    • 改变data中的值可以改变<input>中的值， 改变<input>中的值也可以改变data中的值
    • 把一个属性转化成model类型
      • v-model:current-page="nowpage"
  • v-model.lazy
    • 在<input>失去聚焦的时候才会改变
  • v-model.trim
    • 在获取的时候去掉前后空白符
• 组件
  • 后缀
    • .vue
  • 内容
    • template
    • script
      • export default对象的属性
        • name：组件的名称
        • data：传递数据
        • methods：写函数
        • components：存储<template>中用到的所有组件
        • props：存储父组件传递给子组件的数据
        • watch()：当某个数据发生变化时触发
        • computed：动态计算某个数据
        • setup(props, context)：初始化变量、函数
          • ref定义变量，可以用.value属性重新赋值
          • reactive定义对象，不可重新赋值
          • context.emit()：触发父组件绑定的函数
          • return 可以传递数据给子组件
    • style
      • scoped
        • 如果有这个属性，那么这个样式只在当前组件中生效
  • 加载
    • 引入组件
      • import A from ./components/A.vue
    • 挂在组件
      • components:{A}
    • 显示组件
      • <A/>
• 组件交互
  • 父组件传递到子组件
    • 传递html
      • <el-main>列表</el-main>
    • 传递变量
      • 传递的方法
        • 通过script中的export default中的props
      • 传递的步骤
        • 父组件
          • 在template中的子组件的标签中写
            • :A=B :C=D
            • 如果要传一些复杂的参数B，可以在setup()中写
              • 此处B就是user
        • 子组件
          • script
            • export default { name : "MyComponent", props: { A:{ type : String, default: "" }, }, }
              • 一般required:true和default:""二选一
            • 注意
              • 数组和对象的默认值必须是函数
                • default:function(){ return []; }
                • default:function(){ return {}; }
            • 在setup中可以通过props.引用父组件的信息
          • template
            • {{}}引用
      • 传递的类型
        • String
        • Number
        • Boolean
        • Array
        • Object
        • Function
  • 子组件传递到父组件
    • 传递的方法
      • 通过自定义事件来传递数据
    • 传递的步骤
      • 子组件
        • 在template中写一个事件A
          • 事件源
        • 在methods中实现这个事件A
          • 旧版
            • this.$emit("B",this.message)
          • 新版
            • context.emit("B")：触发父组件绑定的函数
      • 父组件
        • 在template中的子组件的标签中写
          • @B="C"
        • 在methods中实现这个事件C，事件会有一个参数，这个参数就是传过来的值
          • C(data){}
• 组件的生命周期
  • 创建时: beforeCreate 、created 渲染时: beforeMount 、mounted 更新时:beforeUpdate 、updated 卸载时: beforeUnmount 、unmounted
  • 八个周期函数和data是同一级别的
• 引入第三方
  • Swiper
    • 轮播图
  • Axios
    • 网络请求
    • 封装
      • 在src中创建utils文件夹，在其中创建request.js文件
      • 具体用法
        • https://www.bilibili.com/video/BV1Y84y1B7Tz?p=14&vd_source=048c7bdfe54313b8b3ee1483d9d07e38
        • 10:16
    • 网络请求跨域解决方案
  • querystring
    • 转换成string
• 路由
  • 页面跳转
  • 在router中的routes中写需要跳转的网址
  • <router-view>
    • 显示
  • <router-link to="...">
    • 跳转
  • 携带参数
    • path:"/list/:A/:B"
    • to="/list/百度/1"
    • const route = useRoute(); {{route.params.userID}}
  • 嵌套路由
  • 重定向
    • { path: '/:catchAll(.*)/', redirect: "/404", }
  • 刷新
    • 默认是由name判定是否刷新
    • 可以通过重写key值自定义判断方式
• vuex
  • 组成
    • state:使用vuex中的内容
    • getter:对Vuex中的数据进行过滤和计算
    • Mutation:修改 Vuex 的 store 中的状态
      • 旧版
      • 新版
        • import { useStore } from "vuex";
        • const store = useStore();
        • setup(){ store.dispatch("login", {paras}) }
          • commit是提交执行mutations中的方法，Mutations是修改数据的，必须同步。
          • dispatch是提交执行actions中的方法，action提交的是Mutations,可以是异步操作。
    • action:类似Mutation，支持异步操作，但不能修改store
    • modules:定义state的子模块
  • 调用
    • 外部
      • state
        • store.state.user.access
      • action
        • store.dispatch("函数名",参数)
      • mutation
        • store.commit("函数名",参数)
    • 内部
      • mutations调state
        • state.id
      • 调函数
        • 把store改成context
• JWT
  • 密码+公钥 ->新字符串 如果你拥有公钥可以用来验证密码是否正确 但是你想通过这个新字符串得到密码 则需要私钥+新字符串 反推回去
  • npm i jwt-decode
  • import jwt_decode from 'jwt-decode';
  • • 注意：Bearer后面有空格
• ajax
  • 如果要在vue页面使用ajax，可以直接写在setup里面，会在页面生成的时候直接调用。当然也可以写在函数当中
  • 如果要在vuex中使用，需要放到函数里面才触发
• 其他
  • setup()
  • 没有根节点的碎片
• 安装element
  • npm install element-plus --save
  • npm install -D unplugin-vue-components unplugin-auto-import
  • vue.config.js
    • const { defineConfig } = require('@vue/cli-service') const AutoImport = require('unplugin-auto-import/webpack') const Components = require('unplugin-vue-components/webpack') const { ElementPlusResolver } = require('unplugin-vue-components/resolvers') module.exports = defineConfig({ transpileDependencies: true, configureWebpack: { plugins: [ AutoImport({ resolvers: [ElementPlusResolver()] }), Components({ resolvers: [ElementPlusResolver()] }) ] } })