• VUE3 学习小记（1）

    什么是 Vue？

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

    单文件组件​

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

    2.  
    3. <template>
    4.   <button @click="count++">Count is: {{ count }}button>
    5. template>
    6.  
    7. <style scoped>
    8. button {
    9.   font-weight: bold;
    10. }
    11. style>

    API 风格​

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

    选项式 API (Options API)​

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

    2.  
    3. <template>
    4.   <button @click="increment">Count is: {{ count }}button>
    5. template>

    组合式 API (Composition API)​

    通过组合式 API，我们可以使用导入的 API 函数来描述组件逻辑。在单文件组件中，组合式 API 通常会与

  • <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文件中创建应用实例

    1. import { createApp } from 'vue'
    2.  
    3. //从一个单文件组件中导入根组件
    4. import App from './App.vue'
    5.  
    6. //创建应用实例
    7. const app = createApp(App)
    8.  
    9. //挂载到DOM元素
    10. app.mount('#app')

    在html文件中定义节点

    <div id="app">div>

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

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

    文本插值

    最基本的数据绑定形式是文本插值，它使用的是“Mustache”语法 (即双大括号)：

    <span>Message: {{ msg }}span>

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

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

    const rawHtml = 'This should be red.'
    1. <p>Using text interpolation: {{ rawHtml }}p>
    2. <p>Using v-html directive: <span v-html="rawHtml">span>p>

    Attribute 绑定

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

    1. <div v-bind:id="dynamicId">div>
    2. //v-bind:id  简写为 :id
    3. <div :id="dynamicId">div>

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

    动态绑定多个值​

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

    1. const objectOfAttrs = {
    2.   id: 'container',
    3.   class: 'wrapper'
    4. }

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

    <div v-bind="objectOfAttrs">div>

    总结

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

    2.组合式API在选项式基础发展出来，相较选项式，组合式代码更加精简，通过