vue

官方 https://v3.cn.vuejs.org/guide/introduction.html

• vue3使用

import { createApp } from 'vue'
import App from './App.vue'
createApp(App).use(router).use(store).mount('#app')

<template>
  <h1 ref="box">{{ name }}09</h1>
  <button type="button" @click="count++">count is: {{ count }}</button>
  <button type="button" @click="prints">函数{{ name }}</button>
  <button type="button" @click="add">函数{{ name1 }}</button>
</template>

import {computed, inject, onMounted, onUnmounted, provide, reactive, readonly, ref, toRef, toRefs} from 'vue'
export default {
  name: "hello",
  props:{//父给子组件传值,响应式,不能用es6解析用torefs
    qq:String,
  },
  setup(props,context){
   /* const props=defineProps({//替代传递props接收
      qq:String
    })*/
   const name="测试";
   const name1=ref(0)//基础类具备响应式
    const count = ref(0);
   let re=reactive({
     a:"12"
   })//引用类型具备响应式
    let ro=readonly({
      a:"12"
    })//只读防止子组件修改数据
    //toRef,toRefs解析readonly reactive
   console.log(toRef(props,"ab"))//不存在设置默认key
    //console.log(toRefs(props))//同上不设置默认值
    console.log(context)
    const {attrs,slots,emit}=context//上下文环境,包含属性插槽自定义事件
   function prints(){
      console.log('函数')
    }
    provide('ro',readonly(ro))//发送数据或函数
    const ro1=inject('ro')//接收数据函数
    console.log(ro1)
    computed(()=>{//计算属性

    })
    const box=ref(null)
    console.log(box.value) //获取真实dom
    onMounted(()=>{

    })
    onUnmounted(()=>{

    })//离开卸载事件
    //beforeCreated,created钩子函数被setup替代,其他加on
    function add(){
     name1.value--
    }
    return {
     name,
      count,
      name1,
    prints,
      add,
    };
  }
}

• 数据绑定
  ~
  双向数据绑定
• {{item.id}}
//列表渲染 动态绑定属性,缩写 :src="url" 动态属性:[key]="url"
@click="fn">绑定v-on事件不传参数省略小括号 @[event]=fn"动态
真 v-else-if
假
显示
隐藏 v-html 渲染html标签 v-once 渲染一次 v-pre 原样输出 v-text 解析文本 @click.stop="doThis"> @click.stop.prevent="doThat"> @click.once="doThis"> @keyup.enter="submit" /> 自动转换为数字 去除首尾空白

~