Vue 3的官网/文档

• Vue.js – 渐进式 JavaScript 框架 | Vue.js (vuejs.org)(中文)
• Vue.js – 渐进式 JavaScript 框架 |Vue.js (vuejs.org)（English）

Vue 2/3的API的风格

Vue 的组件可以按两种不同的风格书写：选项式 API 和 组合式 API

import { createApp } from 'vue'

createApp({
  data() {
    return {
      count: 0
    }
  }
}).mount('#app')

<div id="app">
  <button @click="count++">
    Count is: {{ count }}
  </button>
</div>

import { createApp, ref } from 'vue'

createApp({
  setup() {
    return {
      count: ref(0)
    }
  }
}).mount('#app')

<div id="app">
  <button @click="count++">
    Count is: {{ count }}
  </button>
</div>

当然我们本篇文章主要介绍Vue 3

Vue 3 创建/启动！

下面是Vue 3创建项目的命令行

注意请在实际应用时去除 $ 只是为了辨别行数

我这里使用的是npm下面是输出命令符

按自己的需求填写（现在这个页面是中文的） 然后再来 初始化/开启 这个Vue 3的项目（必须运行）

注意请在实际应用时去除 @ 只是为了辨别行数

然后命令行会出现一个内网端口号为 5170 的内网网址 进去了后如上图

Vue 3文件项目结构

模板语法

基本语法

<template>
<h3>how are world ?</h3>
<p>{{ msg }}</p>
<p>{{ number + 1 }}</p>
<p>{{ meiruyun ?'true':'false'}}</p>
</template>

<script>
export default {
  data(){
    return {
      msg: 'world is good',
      number: 10,
      meiruyun: true
    }
  }
}
</script>

运行结果

标准格式

<template>
//内容
</template>

<script>
//内容
</script>

结尾（一）

感谢您的观看 让我们一起加油学习Vue 3 吧！ 我是 Quick Code 下期博文见