Vue3的使用--002

Vue3包含vue2的语法，学习vue3就行。

前提要求， 安装大于node.js15.0。

创建Vue  项目  ：

npm init Vue@lastest  : 这一执行将会安装并执行create-vue, 他是Vue 官方的脚手架工具。你将会看到一些Typescript 和测试支持之类的可选功能提示：

 第一个是项目名称：名字不要有大写。

npm install 创建的是node_modules文件 

Vue 3 是一款现代化的 JavaScript 框架，提供了非常灵活的组件化开发方式，其核心的响应式系统更是让开发者可以轻松地实现数据的双向绑定。下面是一些 Vue3 的基础笔记：

1. 创建 Vue 3 项目：

 

    npm install -g @vue/cli
    vue create my-project
    cd my-project
    npm run serve

2. 创建 Vue 3 实例：

 

    const app = Vue.createApp({
        // options
    });

3. 组件语法：
 

    app.component('component-name', {
        // options
    });

 

4. 属性绑定：

v-bind ==:

 

5. 事件绑定：
 

6. 条件渲染：
 

7. 循环渲染：
 

Vue3 是一个灵活且易学的框架，它提供了一系列的工具和方法来帮助开发者快速实现高效的 Web 应用。使用 Vue3，你可以在短时间内构建出一个优秀的应用，并享受到 Vue 带来的高开发效率、强大的数据绑定和灵活的组件化开发方式。

8，文本插值

Vue3 的模板语法与 Vue2 有些许不同，下面介绍 Vue3 的模板语法：变量和表达式
Vue3 的模板语法使用单花括号（{{}}）表示变量和表达式，具体例如：

可以求具体的值  {{ num1+num2 }} 结果为：30；

指令
Vue3 的指令使用 v- 前缀形式，可以绑定到 HTML 元素、组件或者指令。
v-if：根据表达式的值条件地渲染元素。

v-for：循环渲染元素。

v-for of == v-for in   :功能一样

v-bind：动态地绑定一个或多个属性。

v-on：监听 DOM 事件并执行 JavaScript 代码或者调用 Vue3 方法。

v-model：创建双向绑定。

插槽
Vue3 还引入了新的插槽语法，用于在组件之间分发内容。具体如下：

在 Sidebar 组件内使用 来插入具名插槽，使用