总结vue3常用的基础语法

 前言

vue3常用的基础语法包括：列表的渲染、条件判断、样式绑定、vue指令、表单事件处理、响应式数据、生命周期、watch监听、计算属性computed()、组件的基础

1、创建vue3项目

npm create vue@latest

2、vue指令

指令主要包括渲染指令（v-if v-show v-html v-for v-text ）、属性指令（v-bind）、事件指令(v-on)、表单指令（v-model）。

以下是渲染指令demo 

<template>
  <div>
    <button @click="handleClick">Click me</button>
    <div v-if="show">
      <p v-text="message"></p>
      <div v-html="html"></div>
      <ul v-for="item in list" :key="item.id">
        <li>{{ item.name }}</li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const show = ref(false)
const message = ref('Hello, Vue 3!')
const html = ref('<p>This is an HTML paragraph.</p>')
const list = ref([
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' },
  { id: 3, name: 'Item 3' }
])

const handleClick = () => {
  show.value = !show.value
}
</script>

 以下是属性指令

3、响应式数据

响应式数据主要用到了ref() reactive() 函数

<template>
  <div>
    <h1>{{ message }}</h1>
    <p>Count: {{ count }}</p>
    <hr />
    <button @click="handleChange">Click me</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const message = ref('Hello, Vue 3!')
const count = ref(0)
function handleChange() {
  message.value = 'New Hello, World!'
  count.value++
}

4、计算属性conputed()

计算属性可以处理复杂的逻辑，同时计算属性具有缓存性，当插值表达式多次用到这个计算属性时，这个计算属性内部只执行了一次，只有响应式数据变了，才会再次执行。下面用了官方demo,主要计算属性不是函数，插值表达式调用的时候不需要括号。

<script setup>
import { reactive, computed } from 'vue'

const author = reactive({
  name: 'John Doe',
  books: [
    'Vue 2 - Advanced Guide',
    'Vue 3 - Basic Guide',
    'Vue 4 - The Mystery'
  ]
})

// 一个计算属性 ref
const publishedBooksMessage = computed(() => {
  return author.books.length > 0 ? 'Yes' : 'No'
})
</script>

<template>
  <p>Has published books:</p>
  <span>{{ publishedBooksMessage }}</span>
</template>

5、修饰符

这块知识，可以看下面一篇文章

vue3 修饰符大全（近万字长文）_vue3 事件修饰符-CSDN博客

6、侦听器watch()

监听的数据必须是响应式数据，当监听到响应式数据发生变化时才会执行。下面代码是官方demo，当监听到question数据发生变化时，才会执行里面的代码

<script setup>
import { ref, watch } from 'vue'

const question = ref('')
const answer = ref('Questions usually contain a question mark. ;-)')
const loading = ref(false)

// 可以直接侦听一个 ref
watch(question, async (newQuestion, oldQuestion) => {
  if (newQuestion.includes('?')) {
    loading.value = true
    answer.value = 'Thinking...'
    try {
      const res = await fetch('https://yesno.wtf/api')
      answer.value = (await res.json()).answer
    } catch (error) {
      answer.value = 'Error! Could not reach the API. ' + error
    } finally {
      loading.value = false
    }
  }
})
</script>

<template>
  <p>
    Ask a yes/no question:
    <input v-model="question" :disabled="loading" />
  </p>
  <p>answer:{{ answer }}</p>
</template>

7、生命周期

vue3组件生命周期有8个阶段，befooreCreate create beforeMount mounted  beforeUpdate update beforeUnmount umounted ,每个阶段所做的事如下图。

<script setup>
import { onMounted } from 'vue'

onMounted(() => {
  console.log(`the component is now mounted.`)
})
</script>

8、style样式绑定

vue3样式支持行内样式和class样式，class 和style可以可以看成dom的一个属性，用v-bind进行绑定设置，绑定属性的值可以是字符串或表达式值、数组、对象。

<div
  class="static"
  :class="{ active: isActive, 'text-danger': hasError }"
></div>

<div :class="classObject"></div>

<div :class="[activeClass, errorClass]"></div>


<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

<div :style="styleObject"></div>

<div :style="[baseStyles, overridingStyles]"></div>

9、 组件基础

一个页面可以由很多组件组成，一个组件又可以包含很多组件。关于组件这块需要了解一个组件是怎样定义的，如何去调用一个组件，组件之间如何通信，也就是组件之间如何传值。

1、可以看下面案例，子组件为了拿到父组件传递过来的参数，需要用defineProps来定义参数，这是必不可少的。

2、子组件为了传递参数给父组件，需要用$emit()函数，第一参数是一个方法，后面是参数。

3、父组件给子组件传递参数，可以用属性方式传递。

4、父组件接收子组件参数时，需要在调用子组件的绑定一个事件，这个事件名字就是子组件emit传递的事件

son.vue

<script setup>
const props = defineProps({
  title: String,
  name: String
})
const message = '父组件传递的title属性是：' + props.title + '父组件传递的name属性是：' + props.name
</script>

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="$emit('changeTitle', { name: 'jjjj', age: 12 })">修改标题</button>
  </div>
</template>

father.vue

<template>
  <SonNe title="11111" @changeTitle="changeTitle" />
  <h1>子组件传递的值</h1>
  <button @changeTitle="changeTitle">按钮</button>
</template>

<script setup>
import SonNe from './SonNe.vue'
const changeTitle = (e) => {
  console.log('子组件传值过来了', e)
}
</script>