vue3_base

 

 

cli创建
npm install -g @vue/cli
vue create vue_test

vite创建
npm create vue@latest


vite项目中,index.html是项目的入口文件，在项目的最外层。
加载index.html后，vite解析<script type="module" src="xxx">指向的javascript。
vue3中通过createApp函数创建一个应用实例。

setup中的this是undefined
setup可以和data和methods一起共享，data可以读取setup中的数据，setup不可以读取data中的数据。

npm install vite-plugin-vue-setup-extend -D

import VueSetupExtend from 'vite-plugin-vue-setup-extend'
  plugins: [
    vue(),
    vueDevTools(),
    VueSetupExtend(),


ref用来定义：基本类型数据，对象类型数据
reactive用来定义：对象类型数据。
ref创建的变量必须使用.value(volar插件自动添加.value)。
reactive重新分配一个新的对象，会失去响应式(可以使用Object.assign去整体替换)
使用原则：
若需要一个基本类型的响应式数据，必须使用ref。
若需要一个响应式对象，层次不深，ref,reactive都可以。
若需要一个响应对象，且层次较深，推荐使用reactive。

watch
作用：监视数据的变化(和vu2中的watch作用一致)
特点：vue3中的watch只能监视以下四种数据：
1：ref定义的数据
2：reactive定义的数据
3：函数返回一个值。
4.一个包含上述内容的数组。

情况1：监视ref定义的基本类型数据，直接写数据名即可，监视的是其value值的改变。

情况2：监视【ref】定义的【对象类型】数据,监视的是对象的地址值，若想监视内部属性变化，要手动开启深度监视。
注意：若修改的是ref定义的对象中的属性，newValue和oldValue都是新值，因为它们是同一个对象。
     若修改是整个ref定义的对象，newValue是新值，oldValue是旧值，因为不是同一个对象了。

情况3：监视【reactive】定义的【对象类型】数据，默认开启深度监视的。

情况4：监视ref或者reactive定义的对象类型数据中的某个属性
注意：1若该属性值不是对象类型，需要写成函数形式
     2若该属性值依然是对象类型，可直接编，也可以写成函数，不过建议写成函数。
结论：监视的对象的属性，最好写成函数式，注意点，若对象监视的是地址值，需要关注对象内部，需要手动开启深度监视。


情况5：数组
https://dog.ceo/api/breed/pembroke/images/random
https://cdn.seovx.com/?mom=302
https://api.btstu.cn/sjbz/api.php

location / {
  root /root/gshop;
  index index.html;
  try_files $uri $uri/ /index.html
}

//..................................................................
npm install nanoid
npm install pinia

//--------------------------------------------------------------------------

defineProps父传子

<Child :car="car" />
let car = ref('奔驰')

<h4>父给的车：{{ car }}</h4>
    // 声明接收props
    defineProps(['car'])


//--------------------------------------------------------------------------
//event自定义事件 （子传父）

        <h4 v-show="toy">子给的玩具：{{ toy }}</h4>
        <!-- 给子组件Child绑定事件 -->
    <Child @send-toy="saveToy"/>
    // 数据
    let toy = ref('')
    // 用于保存传递过来的玩具
    function saveToy(value:string){
        console.log('saveToy',value)
        toy.value = value
    }

        <h4>玩具：{{ toy }}</h4>
        <button @click="emit('send-toy',toy)">测试</button>
    // 数据
    let toy = ref('奥特曼')
    // 声明事件
    const emit =  defineEmits(['send-toy'])



//--------------------------------------------------------------------------
//mitt
npm i mitt

//发送
import emitter from '@/utils/emitter';
<h4>玩具：{{ toy }}</h4>
<button @click="emitter.emit('send-toy',toy)">玩具给弟弟</button>
    let toy = ref('奥特曼')


//接收
import emitter from '@/utils/emitter';
<h4>哥哥给的玩具：{{ toy }}</h4>
let toy = ref('')
    // 给emitter绑定send-toy事件
    emitter.on('send-toy',(value:any)=>{
        toy.value = value
    })
    // 在组件卸载时解绑send-toy事件
    onUnmounted(()=>{
        emitter.off('send-toy')
    })


//--------------------------------------------------------------------------
//v-model

    <!-- <AtguiguInput 
      :modelValue="username" 
      @update:modelValue="username = $event"
    /> -->
<AtguiguInput v-model="username"/>
  import AtguiguInput from './AtguiguInput.vue'
  let username = ref('zhansgan')


  <input type="text" :value="modelValue"
  @input="emit('update:modelValue',(<HTMLInputElement>$event.target).value)">
  defineProps(['modelValue'])
  const emit = defineEmits(['update:modelValue'])


//--------------------------------------------------------------------------
//attrs

祖
<Child :a="a" :b="b" :c="c" :d="d" v-bind="{x:100,y:200}" :updateA="updateA"/>
    let a = ref(1)
    let b = ref(2)
    let c = ref(3)
    let d = ref(4)
    function updateA(value:number){
        a.value += value
    }

子
<GrandChild v-bind="$attrs"/>

孙
        <h3>孙组件</h3>
        <h4>a：{{ a }}</h4>
        <h4>b：{{ b }}</h4>
        <h4>c：{{ c }}</h4>
        <h4>d：{{ d }}</h4>
        <h4>x：{{ x }}</h4>
        <h4>y：{{ y }}</h4>
        <button @click="updateA(6)">点我将爷爷那的a更新</button>

defineProps(['a','b','c','d','x','y','updateA'])



//--------------------------------------------------------------------------
//_$refs-$parent
父传子
        <button @click="changeToy">修改Child1的玩具</button>
        <button @click="changeComputer">修改Child2的电脑</button>
        <button @click="getAllChild($refs)">让所有孩子的书变多</button>
        <Child1 ref="c1"/>
        <Child2 ref="c2"/>
    import Child1 from './Child1.vue'
    import Child2 from './Child2.vue'
    import { ref,reactive } from "vue";
    let c1 = ref()
    let c2 = ref()
    // 方法
    function changeToy(){
        c1.value.toy = '小猪佩奇'
    }
    function changeComputer(){
        c2.value.computer = '华为'
    }
    function getAllChild(refs:{[key:string]:any}){
        console.log(refs)
        for (let key in refs){
            refs[key].book += 3
        }
    }

    // 把数据交给外部
    defineExpose({toy,book})
        // 把数据交给外部
        defineExpose({computer,book})

子传父
<button @click="minusHouse($parent)">干掉父亲的一套房产</button>
    // 方法
    function minusHouse(parent:any){
        parent.house -= 1
    }
    // 向外部提供数据
    defineExpose({house})


//--------------------------------------------------------------------------
//provide-inject

  import {ref,reactive,provide} from 'vue'
  let money = ref(100)
  let car = reactive({
    brand:'奔驰',
    price:100
  })
  function updateMoney(value:number){
    money.value += value
  }
  // 向后代提供数据
  provide('moneyContext',{money,updateMoney})
  provide('car',car)


    <h3>我是孙组件</h3>
    <h4>银子：{{ money }}</h4>
    <h4>车子：一辆{{car.brand}}车，价值{{car.price}}万元</h4>
    <button @click="updateMoney(6)">花爷爷的钱</button>
  import { inject } from "vue";
  let {money,updateMoney} = inject('moneyContext',{money:0,updateMoney:(param:number)=>{}})
  let car = inject('car',{brand:'未知',price:0})



//--------------------------------------------------------------------------
//pinia
//--------------------------------------------------------------------------
//slot
https://z1.ax1x.com/2023/11/19/piNxLo4.jpg
http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4
http://vjs.zencdn.net/v/oceans.mp4


默认插槽
      <Category title="热闹游戏列表">
         <ul>
            <li v-for="game in games " :key="game.id" >{{ game.name }}</li>
         </ul>
      </Category>
      <Category title="今日美食推荐" >
          <img :src="imgUrl"/>
      </Category>
      <Category title="今日影视推荐" >
          <video :src="videoUrl" controls></video>
      </Category>
import {ref,reactive} from "vue";
let games = reactive([
  {id:"asgtdfats01",name:'英雄联盟'},
  {id:"asgtdfats02",name:'王者农药'},
  {id:"asgtdfats03",name:'红色警戒'},
  {id:"asgtdfats04",name:'斗罗大陆'},
])
let imgUrl = ref('https://z1.ax1x.com/2023/11/19/piNxLo4.jpg');
let videoUrl = ref('https://media.w3.org/2010/05/sintel/trailer.mp4');

<template>
  <div class="category">
        <h2>{{title}}</h2>
        <slot>默认内容</slot>
  </div>
</template>

具名插槽
      <Category >
        <!-- 默认插槽写法 -->
         <!-- <ul>
            <li v-for="game in games " :key="game.id" >{{ game.name }}</li>
         </ul> -->
         <!-- 具名插槽写法 -->
          <template v-slot:s2>
            <ul>
              <li v-for="game in games " :key="game.id" >{{ game.name }}</li>
            </ul>
         </template>
          <template v-slot:s1>
            <h2>热闹游戏列表</h2>
              
          </template>

      </Category>

         <slot name="s1">默认内容</slot>
         <slot name="s2">默认内容</slot>
简写形式
          <template #s1>
            <h2>今日影视推荐</h2>
        </template>
        <template #s2>
            <video :src="videoUrl" controls></video>
        </template>




作用域插槽
       <Game>
        <template v-slot="params">
          <ul>
            <li v-for="y in params.youxi" :key="y.id">
              {{ y.name }}
            </li>
          </ul>
        </template>
      </Game>

      <Game>
        <template v-slot="params">
          <ol>
            <li v-for="item in params.youxi" :key="item.id">
              {{ item.name }}
            </li>
          </ol>
        </template>
      </Game>

      <Game>
        <template #default="{youxi}">
          <h3 v-for="g in youxi" :key="g.id">{{ g.name }}</h3>
        </template>
      </Game> 


  <div class="game">
    <h2>游戏列表</h2>
    <slot :youxi="games" x="哈哈" y="你好"></slot>
  </div>

  let games = reactive([
    {id:'asgytdfats01',name:'英雄联盟'},
    {id:'asgytdfats02',name:'王者农药'},
    {id:'asgytdfats03',name:'红色警戒'},
    {id:'asgytdfats04',name:'斗罗大陆'}
  ])



//--------------------------------------------------------------------------