Vue3基础 | 语法

最新推荐文章于 2024-07-06 17:55:07 发布

-熟

最新推荐文章于 2024-07-06 17:55:07 发布

阅读量467

点赞数 10

分类专栏：杂项-编程文章标签： web3

本文链接：https://blog.csdn.net/liye100866/article/details/139508691

版权

杂项-编程专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Vue3基础知识语法

创建Vue3项目

怎么创建呢

-通过vue_cli创建，底层是基于webpack

## 查看 @vue/cli 版本，确保@vue/cli版本在4.5.0以上
vue --version

## 安装或者升级你的@vue/cli 
npm install -g @vue/cli

## 执行创建命令
vue create vue_test

##  选择3.x
##  Choose a version of Vue.js that you want to start the project with (Use arrow keys)
##  > 3.x
##  > 2.x

## 启动
cd vue_test
npm run serve

-vscode安装官方插件Vue-official

在这里插入图片描述

npm install

-创建名为App的vue文件

在这里插入图片描述

创建后的结构

在这里插入图片描述

示例代码解析

main.ts

import './assets/main.css'

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

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

import { createApp } from 'vue'Vue模块中导入createApp方法，用于创建一个Vue应用程序实例。
import App from './App.vue': 导入名为 App.vue 的 Vue 组件，App.vue相当于根组件。
createApp(App).mount('#app'): 通过调用createApp方法并传入App组件，创建一个Vue应用程序实例
并将其挂载到具有指定 ID (#app) 的DOM元素上，这里是挂载到index.html的文件上。
————————————————————————————————————————————
index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

App.vue

<template>
  <!-- HTML code here -->
  <div class="app">
    <h1>Hello Vue 3</h1>
  </div>
</template>

<script lang="ts">
  // js\ts code here
  export default {
    name: 'App'
  }
</script>

<style>
  /* CSS */
  .app {
    text-align: center;
    background-color: antiquewhite;
  }
</style>

Vue语法

API选项

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

选项式 API (Options API)

-使用选项式 API，我们可以用包含多个选项的对象来描述组件的逻辑，例如 data、methods 和 mounted。选项所定义的属性都会暴露在函数内部的 this 上，它会指向当前的组件实例

<script>
export default {
  // data() 返回的属性将会成为响应式的状态
  // 并且暴露在 `this` 上
  data() {
    return {
      count: 0
    }
  },

  // methods 是一些用来更改状态与触发更新的函数
  // 它们可以在模板中作为事件处理器绑定
  methods: {
    increment() {
      this.count++
    }
  },

  // 生命周期钩子会在组件生命周期的各个不同阶段被调用
  // 例如这个函数就会在组件挂载完成后被调用
  mounted() {
    console.log(`The initial count is ${this.count}.`)
  }
}
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

组合式 API (Composition API)

-通过组合式API，我们可以使用导入的API函数来描述组件逻辑。在单文件组件中，组合式 API 通常会与< script setup> 搭配使用。这个 setup attribute 是一个标识，告诉 Vue 需要在编译时进行一些处理，让我们可以更简洁地使用组合式 API比如，< script setup> 中的导入和顶层变量/函数都能够在模板中直接使用

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

// 响应式状态
const count = ref(0)

// 用来修改状态、触发更新的函数
function increment() {
  count.value++
}

// 生命周期钩子
onMounted(() => {
  console.log(`The initial count is ${count.value}.`)
})
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>