vue3基础

Vue3 的基础知识：

1. 数据绑定

Vue3 提供了响应式数据的双向绑定特性，通过 v-model 指令、{{ }} 或者 v-bind 指令等来实现。

例如：

<template>
  <div>
    <input type="text" v-model="message" />
    <p>我输入的信息是: {{ message }}</p>
    <div v-bind:title="message">
      鼠标移到我身上显示的是 message 值
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'hello, world!'
    }
  }
}
</script>

**

2. 组件化开发

Vue3 允许开发者将一个大应用拆分成许多小组件，有效地提高了开发效率和代码的可重用性。

例如：

<template>
  <div>
    <TodoList v-bind:todos="todos" />
  </div>
</template>

<script>
import TodoList from './TodoList.vue'

export default {
  data() {
    return {
      todos: [
        { id: 1, text: '学习 Vue', done: false },
        { id: 2, text: '学习 React', done: true },
        { id: 3, text: '学习 Angular', done: false }
      ]
    }
  },
  components: {
    TodoList
  }
}
</script>

**

3. 条件渲染和循环渲染

Vue3 提供了 v-if 和 v-for 等指令，可以帮助开发者实现条件渲染和循环渲染。

例如：

<template>
  <div>
    <div v-if="isShow">显示的内容</div>
    <ul>
      <li v-for="item in list" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: true,
      list: [
        { id: 1, name: 'Vue.js' },
        { id: 2, name: 'React.js' },
        { id: 3, name: 'Angular.js' }
      ]
    }
  }
}
</script>

**

4. 模板语法

Vue3 的模板语法是一种方便开发者描述模板的语言，包括插值、指令和过滤器等。

例如：

<template>
  <div>
    <p>{{ message }}</p>
    <a v-bind:href="url">{{ text }}</a>
    <p>{{ description | limit }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'hello, world!',
      url: 'https://www.example.com',
      text: 'example',
      description: '这是一段需要截断的字符串'
    }
  },
  filters: {
    limit(value) {
      return value.slice(0, 10) + '...'
    }
  }
}
</script>

**

以上是 Vue3 的基础知识，还包括 Vue3 的事件处理、组件之间的通信等等