VUE3 学习小记(1)

什么是 Vue?

Vue (发音为 /vjuː/,类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建,并提供了一套声明式的、组件化的编程模型,帮助你高效地开发用户界面。无论是简单还是复杂的界面,Vue 都可以胜任。

单文件组件

在大多数启用了构建工具的 Vue 项目中,我们可以使用一种类似 HTML 格式的文件来书写 Vue 组件,它被称为单文件组件 (也被称为 *.vue 文件,英文 Single-File Components,缩写为 SFC )。顾名思义,Vue 的单文件组件会将一个组件的逻辑 (JavaScript),模板 (HTML) 和样式 (CSS) 封装在同一个文件里。下面我们将用单文件组件的格式重写上面的计数器示例:

javascript 复制代码
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

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

<style scoped>
button {
  font-weight: bold;
}
</style>

API 风格

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

选项式 API (Options API)

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

javascript 复制代码
<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> 中的导入和顶层变量/函数都能够在模板中直接使用。

下面是使用了组合式 API 与**<script setup>**改造后和上面的模板完全一样的组件:

javascript 复制代码
<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>

创建第一个VUE应用

npm create vue@latest

这一指令将会安装并执行create-vue,它是 Vue 官方的项目脚手架工具。如果不确定是否要开启某个功能,你可以直接按下回车键选择 No。在项目被创建后,通过以下步骤安装依赖并启动开发服务器:

cd <工程路径>

//安装依赖

npm install

//运行程序

npm run dev

//打包发布,此命令会在 ./dist 文件夹中为你的应用创建一个生产环境的构建版本

npm run build

如果直接在浏览器中打开了上面的 index.html,你会发现它抛出了一个错误,因为 ES 模块不能通过 file:// 协议工作,也即是当你打开一个本地文件时浏览器使用的协议。

由于安全原因,ES 模块只能通过 http:// 协议工作,也即是浏览器在打开网页时使用的协议。为了使 ES 模块在我们的本地机器上工作,我们需要使用本地的 HTTP 服务器,通过 http:// 协议来提供 index.html

**要启动一个本地的 HTTP 服务器,请先安装 Node.js,然后通过命令行在 HTML 文件所在文件夹下运行 npx serve。**你也可以使用其他任何可以基于正确的 MIME 类型服务静态文件的 HTTP 服务器。

//启动HTTP服务

npx serve

创建应用实例

在js文件中创建应用实例

javascript 复制代码
import { createApp } from 'vue'

//从一个单文件组件中导入根组件
import App from './App.vue'

//创建应用实例
const app = createApp(App)

//挂载到DOM元素
app.mount('#app')

在html文件中定义节点

html 复制代码
<div id="app"></div>

应用根组件的内容将会被渲染在容器元素里面。容器元素自己将不会被视为应用的一部分。

.mount() 方法应该始终在整个应用配置和资源注册完成后被调用。同时请注意,不同于其他资源注册方法,它的返回值是根组件实例而非应用实例。

文本插值

最基本的数据绑定形式是文本插值,它使用的是"Mustache"语法 (即双大括号):

html 复制代码
<span>Message: {{ msg }}</span>

msg 属性更改时它也会同步更新。

双大括号会将数据解释为纯文本,而不是 HTML。若想插入 HTML,你需要使用v-html指令:

javascript 复制代码
const rawHtml = '<span style="color: red">This should be red.</span>'
html 复制代码
<p>Using text interpolation: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

Attribute 绑定

想要响应式地绑定一个 attribute,应该使用v-bind 指令:

html 复制代码
<div v-bind:id="dynamicId"></div>
//v-bind:id  简写为 :id
<div :id="dynamicId"></div>

v-bind 指令指示 Vue 将元素的 id attribute 与组件的 dynamicId 属性保持一致。如果绑定的值是 null 或者 undefined,那么该 attribute 将会从渲染的元素上移除。

动态绑定多个值

如果你有像这样的一个包含多个 attribute 的 JavaScript 对象:

javascript 复制代码
const objectOfAttrs = {
  id: 'container',
  class: 'wrapper'
}

通过不带参数的 v-bind,你可以将它们绑定到单个元素上:

html 复制代码
<div v-bind="objectOfAttrs"></div>

总结

1.vue 页面将js, css, html 组合在一个页面中,通过createApp创建的实例调用mount方法挂载到HTML页面的元素上,就可以渲染页面了。

2.组合式API在选项式基础发展出来,相较选项式,组合式代码更加精简,通过<script setup>标志使用组合式API

相关推荐
今天我又学废了2 分钟前
Scala学习记录,List
学习
小阮的学习笔记4 分钟前
Vue3中使用LogicFlow实现简单流程图
javascript·vue.js·流程图
YBN娜5 分钟前
Vue实现登录功能
前端·javascript·vue.js
阳光开朗大男孩 = ̄ω ̄=5 分钟前
CSS——选择器、PxCook软件、盒子模型
前端·javascript·css
杨荧7 分钟前
【JAVA毕业设计】基于Vue和SpringBoot的服装商城系统学科竞赛管理系统
java·开发语言·vue.js·spring boot·spring cloud·java-ee·kafka
minDuck9 分钟前
ruoyi-vue集成tianai-captcha验证码
java·前端·vue.js
王俊山IT26 分钟前
C++学习笔记----10、模块、头文件及各种主题(一)---- 模块(5)
开发语言·c++·笔记·学习
小政爱学习!30 分钟前
封装axios、环境变量、api解耦、解决跨域、全局组件注入
开发语言·前端·javascript
魏大帅。35 分钟前
Axios 的 responseType 属性详解及 Blob 与 ArrayBuffer 解析
前端·javascript·ajax
花花鱼41 分钟前
vue3 基于element-plus进行的一个可拖动改变导航与内容区域大小的简单方法
前端·javascript·elementui