Vue3 基础语法

@[toc]

1.创建Vue项目

1.1创建项目

项目文件下运行 npm init vue@latest

npm init vue@latest

1.2 初始项目

 npm install

2.vue3 语法

2.1 复杂写法

<script>
export default {
   
   
  setup() {
   
   
    const message = "年后";
    const messagehandle = () => {
   
   
      console.log(message);
    };
    return {
   
   
      message,
      messagehandle,
    };
  },
};
</script>

2.2 简易写法

<script setup>
const message = "你好呀";
const logHandle = () => {
   
   
  console.log(message);
};
</script>

响应式api，完成响应式数据

2.3 reactive（对象类型）

<script setup>
//引入响应式对象
import {
   
    reactive } from "vue";
//执行响应式对象
const state = reactive({
   
   
  status: 0,
});
//自定义匿名函数
const addCunt = () => {
   
   
  state.status++;
};
</script>

2.4 ref（简单类型）

ref执行的响应式数据，要用.value接受,

import {
   
    ref } from "vue";

const state = ref(0);

const addCunt = () => {
   
   
  state.value++;
};

2.5 computed(计算属性)

调用computed，返回值用一个常量接受。

<script setup>
import {
   
    ref } from "vue";
import {
   
    computed } from "vue";
const list = ref([1, 2, 3, 4, 5, 6, 7, 8]);

const computedList = computed(() => {
   
   
  return list.value.filter((item) => item > 2);
});
</script>

2.6 watch（监听）

1.监听单个值的变化
2.watch 默认是监听ref浅层监听。

//监听数据的变化
watch(count, (newValue, oldValue) => {
   
   
  console.log(newValue, "+", oldValue);
});

2.监听多个值的变化

//监听数据的变化
watch([count, name], ([newCount, newName], [oldCount, oldName]) => {
   
   
  console.log(newCount, newName, "+", oldCount, oldName);
});

1. immediate在为触发前执行一次

watch(
  count,
  () => {
   
   
    console.log("11");
  },
  {
   
   
    immediate: true,
  }
);

4.深度监听

watch(
  count,
  () => {
   
   
    console.log("111");
  },
  {
   
   
    deep: true,
  }
);

3.vue3 生命周期

vue3的生命周期和vue2类似。

4.vue3 组件通信

4.1 父传子（defineProps）

1.在父组件在vue3中引入子组件，直接使用，不需要注册
2.在子组件通过defineProps接受数据

父

<script setup>
import {
   
    ref } from "vue";
import sonCom from "./components/son.vue";
const number = ref(100);
</script>

<template>
  <div>
    <sonCom message="小明" :number="number"></sonCom>
  </div>
</template>

子

<template>
  <div>{
   
   {
   
    message }}{
   
   {
   
    number }}</div>
</template>

<script setup>
const count = defineProps({
   
   
  message: String,
  number: Number,
});
console.log(count.message);
</script>

<style></style>

4.1 子传父（defineEmits）

<script setup>
import sonCom from "./components/son.vue";
import {
   
    ref } from "vue";
const getMessage = (msg) => {
   
   
  console.log(msg);
};
</script>

<template>
  <div>
    <sonCom @get-message="getMessage"></sonCom>
  </div>
</template>

<template>
  <button @click="sendMsg">按钮</button>
</template>

<script setup>
const emit = defineEmits(["get-message"]);
const sendMsg = () => {
   
   
  emit("get-message", "5555");
};
</script>

<style></style>

5.vue3 跨组件通信

provide 发送消息，inject接受消息

5.1 跨层传递数据

发送消息

provide("data-key", count);

接受消息

const message = inject("data-key");

5.2 跨层传递方法

const count = ref(0);
const addcount = () => {
   
   
  count.value++;
};

provide("methods", addcount);

const methods = inject("methods");

6.vue3 跨组件通信（pinia）

pinia官网

6.1 下载pinia

npm install pinia

6.2 pinia的全局注册

import './assets/main.css'

import {
   
    createApp } from 'vue'
import {
   
    createPinia } from 'pinia'
import App from './App.vue'

const pinia=createPinia()

createApp(App).use(pinia).mount('#app')

6.3 pinia的使用

import {
   
   defineStore} from 'pinia'
import {
   
    ref } from 'vue'
export const useCounterStore=defineStore('counter',()=>{
   
   
    //定义数据
    const count=ref(0)
    //定义方法
    const addCount=()=>{
   
   
        count.value++
    }
    //以对象返回数据
    return{
   
   
        count,
        addCount
    }
})

使用pinia

<script setup>
//导入方法
import {
   
    useCounterStore } from "./stores/counter";
//执行方法得到实例对象
const useCounter = useCounterStore();
console.log(useCounter);
</script>

<template>
  <div>
    <button @click="useCounter.addCount">{
   
   {
   
    useCounter.count }}</button>
  </div>
</template>