vue3 的一些知识点

作者: YM雨蒙 | 来源:发表于2022-12-10 16:24 被阅读0次

    vue3 支持 jsx

    1. 安装依赖
    pnpm add @vitejs/plugin-vue-jsx
    
    1. vite.config.ts 中引用插件
    import { defineConfig } from "vite"
    import vue from "@vitejs/plugin-vue"
    import vueJsx from "@vitejs/plugin-vue-jsx"
    // https://vitejs.dev/config/
    
    export default defineConfig({
      plugins: [
        vue(),
        vueJsx({
          transformOn: true,
          mergeProps: true,
        })
      ],
    })
    
    1. 使用 jsx
    import { defineComponent, ref } from "vue"
    import "./App.scss"
    
    const App = defineComponent({
      setup() {
        const count = ref(0)
        const onClick = () => {
          count.value++
        }
    
        return () => (
          <>
            <div class='page'>
              {count.value}
            </div>
            <button onClick={onClick}>增加</button>
          </>
        )
      },
    })
    
    export default App
    

    CSS Module

    任何以 .module.css 为后缀名的 CSS 文件都被认为是一个 CSS modules 文件

    /* example.module.css */
    .red {
      color: red;
    }
    
    import classes from './example.module.css'
    document.getElementById('foo').className = classes.red
    

    手机调试 H5

    Chrome 远程调试手机页面

    1. 用 usb 连接手机和电脑
    2. 手机开启 usb 调试
    3. 手机打开要调试的页面 (ip地址 => http://192.x.x.1:端口号/)
      1. 手机浏览器输入 http://192.168.3.37:3000 访问我电脑上的网页
    4. 打开 edge://inspect 或者 chrome://inspect/#devices 页面, 等待一会, 找到对应页面

    vue-router 一个路由多个视图

    应用场景: 可以对其中路由做动画

    // routes.ts
    export const routes: RouteRecordRaw[] = [
      { path: "/", redirect: "/welcome" },
      {
        path: "/welcome",
        component: Welcome,
        children: [
          { path: "", redirect: "/welcome/one" },
          // components 可以用对象的方式
          { path: "one", components: { main: First, footer: FirstActions } },
          { path: "two", components: { main: Second, footer: SecondActions } },
          { path: "three", components: { main: Third, footer: ThirdActions } },
          { path: "four", components: { main: Forth, footer: ForthActions } },
        ],
      }
    ]
    
    // 视图使用
    import { defineComponent, h, Transition, VNode } from 'vue';
    import { RouteLocationNormalizedLoaded, RouterView } from 'vue-router';
    import s from './Welcome.module.scss'
    export const Welcome = defineComponent({
      setup: (props, context) => {
        return () => <div class={s.wrapper}>
          <header>
            <h1>xx记账</h1>
          </header>
          <main class={s.main}>
            // 使用对应的 name
            <RouterView name="main">
            </RouterView>
          </main>
          <footer>
            <RouterView name="footer" />
          </footer>
        </div>
      }
    })
    

    SvgSprite svg 雪碧图

    useSwipe 滑动 hooks

    import { computed, onMounted, onUnmounted, ref, Ref } from "vue"
    type Point = { x: number; y: number }
    export const useSwipe = (element: Ref<HTMLElement | null>) => {
      const start = ref<Point | null>(null)
      const end = ref<Point | null>(null)
      const swiping = ref(false)
    
      // 可以设置距离多少再移动
      const distance = computed(() => {
        if (!end.value || !start.value) return null
        return {
          x: end.value?.x - start.value?.x,
          y: end.value?.y - start.value?.y,
        }
      })
      const direction = computed(() => {
        if (!swiping) return null
        if (!distance.value) return null
        const { x, y } = distance.value
        if (Math.abs(x) > Math.abs(y)) {
          return x > 0 ? "right" : "left"
        } else {
          return y > 0 ? "down" : "up"
        }
      })
    
      const onStart = (e: TouchEvent) => {
        const { clientX, clientY } = e.touches[0]
        start.value = {
          x: clientX,
          y: clientY,
        }
        end.value = null
        swiping.value = true
      }
    
      const onMove = (e: TouchEvent) => {
        const { clientX, clientY } = e.touches[0]
        if (swiping.value) {
          end.value = {
            x: clientX,
            y: clientY,
          }
        }
      }
    
      const onEnd = (e: TouchEvent) => {
        swiping.value = false
        start.value = null
        end.value = null
      }
    
      onMounted(() => {
        if (!element.value) return null
        element.value.addEventListener("touchstart", onStart)
        element.value.addEventListener("touchmove", onMove)
        element.value.addEventListener("touchend", onEnd)
      })
    
      onUnmounted(() => {
        if (!element.value) return null
        element.value.removeEventListener("touchstart", onStart)
        element.value.removeEventListener("touchmove", onMove)
        element.value.removeEventListener("touchend", onEnd)
      })
    
      return {
        swiping,
        distance,
        direction,
      }
    }
    

    组件使用插槽(slots) 和 属性 props

    // slots 使用
    import { defineComponent } from "vue"
    import s from "./button.module.scss"
    
    interface ButtonProps {
      onClick: (e: MouseEvent) => void
    }
    
    export const Button = defineComponent<ButtonProps>({
      inheritAttrs: false, // 不让 vue 帮我自动继承属性
      // 插槽 context.slots
      setup: (props, context) => {
        return () => <button class={s.button}>{context.slots.default?.()}</button>
      },
    })
    
    // 具名插槽
    import { defineComponent, PropType } from "vue"
    import s from "NavBar.module.scss"
      
    export const NavBar = defineComponent({
      setup: (props, context) => {
        const { slots } = context
        return () => (
          <div class={s.navbar}>
            <span class={s.icon_wrapper}>{slots.icon?.()}</span>
            <span class={s.title_wrapper}>{slots.default?.()}</span>
          </div>
        )
      },
    })
    
    // props 使用
    import { defineComponent, PropType } from "vue"
    import s from "./Icon.module.scss"
    
    export type IconNames = "add" | "chart" | "clock" | "cloud"
    
    export const Icon = defineComponent({
      // inheritAttrs: false,
      props: {
        name: {
          type: String as PropType<IconNames>,
          required: true,
        }
      },
      setup: (props) => {
        const { name } = props
        return () => (
          <svg class={s.icon}>
            <use xlinkHref={"#" + name}></use>
          </svg>
        )
      },
    })
    

    表情 搜索 emoji full list

    reactive & toRaw

    // 创建响应式数据
    const formData = reactive({
      name: '',
      sign: ''
    })
    const onSubmit = (e: Event) => {
      e.preventDefault()
      console.log("proxy", formData) // proxy
      console.log("proxy", toRaw(formData)) // json
    }
    
    // v-model 使用
    <input v-model={formData.name} class={[s.formItem, s.input, s.error]}></input>
    

    相关文章

      网友评论

        本文标题:vue3 的一些知识点

        本文链接:https://www.haomeiwen.com/subject/jbwzfdtx.html