VUE（试水篇）

Prerequisite

学习目的：① 实现一个简约版 B 站前端 ② 完成毕设前端

前置知识点

拥有 HTML、CSS、JavaScript、TypeScript（此处放简书的 Js 和 Ts 链接）的基础
关于 Node.js 和 Vue 的关系【Vue 是前端框架，Node.js 是服务端语言。前者是前端，主要和 HTML 和 JavaScript 打交道；后者是后端，主要用 JavaScript 作为开发语言】

配置环境

VSCode 插件
Vue 3 组件库：Naive UI
HTML 启动方式（第一种常用于静态加载，第二种常用于动态加载）
- Show Preview【点击右上角，直接在 VScode 显示网页内容】
- Open with Live Server【Live Preview 插件，以伪部署的方式显示网页内容，默认端口为 5500】
Vue 启动方式
- 快速构建 Vue 项目：vue create hello【在目标文件夹中执行命令】
- 运行 Vue 项目：npm run serve【前提是进入项目中】

Reference

基本用法

快速运行 Vue

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Vue</title>
    <!-- 导入 Vue.js -->
    <script src="https://unpkg.com/vue@3"></script>
  </head>
  <body>
    <!-- 声明要被 Vue 所控制的 DOM 区域 -->
    <div id="app">{{message}}</div>

    <!-- 创建 Vue 的实例对象 -->
    <script>
      const hello = {
        // 指定数据源，即 MVVM 中的 Model
        data: function () {
          return {
            message: "Hello Vue!",
          };
        },
      };
      const app = Vue.createApp(hello);
      app.mount("#app");
    </script>
  </body>
</html>

内容渲染指令

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Vue</title>
    <script src="https://unpkg.com/vue@3"></script>
  </head>
  <body>
    <div id="app">
      <p>姓名：{{name}}</p>
      <p>年龄：{{age}}</p>
      <!-- 下面不可渲染 -->
      <p>网站1：{{desc}}</p>
      <!-- 下面可渲染 -->
      <p v-html="desc"></p>
    </div>

    <!-- 创建 Vue 的实例对象 -->
    <script>
      const hello = {
        data: function () {
          return {
            name: "筱团",
            age: "20",
            desc: '<a href="https://www.baidu.com">百度</a>',
          };
        },
      };
      const app = Vue.createApp(hello);
      app.mount("#app");
    </script>
  </body>
</html>

属性绑定指令

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Vue</title>
    <script src="https://unpkg.com/vue@3"></script>
  </head>
  <body>
    <div id="app">
      <!-- : 实际上是 v-bind: 的缩写 -->
      <a :href="link">百度</a>
      <input type="text" :placeholder="inputValue" />
      <img :src="imgSrc" :style="{w}" alt="" />
    </div>

    <!-- 创建 Vue 的实例对象 -->
    <script>
      const hello = {
        data: function () {
          return {
            link: "https://www.baidu.com",
            // 文本框的占位符内容
            inputValue: "请输入内容",
            // 图片的 src 地址
            imgSrc: "./assets/images/socks_blue.jpg",
            w: "50px",
          };
        },
      };
      const app = Vue.createApp(hello);
      app.mount("#app");
    </script>
  </body>
</html>

使用 JavaScript 表达式

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Vue</title>
    <script src="https://unpkg.com/vue@3"></script>
  </head>
  <body>
    <div id="app">
      <p>{{number+1}}</p>
      <p>{{ok ? 'True' : 'False'}}</p>
      <p>{{message.split('').reverse().join('')}}</p>
      <p :id="'list-' + id">xxx</p>
      <p>{{user.name}}</p>
      <p></p>
    </div>

    <!-- 创建 Vue 的实例对象 -->
    <script>
      const hello = {
        data: function () {
          return {
            number: 9,
            ok: false,
            message: "  ABC  ",
            id: 3,
            user: {
              name: "筱团",
            },
          };
        },
      };
      const app = Vue.createApp(hello);
      app.mount("#app");
    </script>
  </body>
</html>

事件绑定指令

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Vue</title>
    <script src="https://unpkg.com/vue@3"></script>
  </head>
  <body>
    <div id="app">
      <h3>count 的值为：{{count}}</h3>
      <!-- 下面两种方法都能使 count + 1 -->
      <button v-on:click="addCount">+1</button>
      <button @click="count+=1">+1</button>
    </div>

    <!-- 创建 Vue 的实例对象 -->
    <script>
      const hello = {
        // 存储数据
        data: function () {
          return {
            count: 0,
          };
        },
        // 储存方法（函数）
        methods: {
          addCount() {
            this.count += 1;
          },
        },
      };
      const app = Vue.createApp(hello);
      app.mount("#app");
    </script>
  </body>
</html>

条件渲染指令

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Vue</title>
    <script src="https://unpkg.com/vue@3"></script>
  </head>
  <body>
    <div id="app">
      <button @click="flag = !flag">Toggle Flag</button>
      <!--
        下面两个为 true 时都显示，为 false 时都不显示
        但 v-if 标签内容在 false 时不显示，v-show 却显示
      -->
      <p v-if="flag">请求成功 --- 被 v-if 控制</p>
      <p v-show="flag">请求成功 --- 被 v-show 控制</p>
    </div>

    <!-- 创建 Vue 的实例对象 -->
    <script>
      const hello = {
        // 存储数据
        data: function () {
          return {
            flag: false,
          };
        },
      };
      const app = Vue.createApp(hello);
      app.mount("#app");
    </script>
  </body>
</html>

v-else 和 v-else-if 指令

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Vue</title>
    <script src="https://unpkg.com/vue@3"></script>
  </head>
  <body>
    <div id="app">
      <div v-if="type === 'A'">A</div>
      <div v-else-if="type === 'B'">B</div>
      <div v-else-if="type === 'C'">C</div>
      <div v-else>Not A/B/C</div>
    </div>

    <!-- 创建 Vue 的实例对象 -->
    <script>
      const hello = {
        // 存储数据
        data: function () {
          return {
            type: "B",
          };
        },
      };
      const app = Vue.createApp(hello);
      app.mount("#app");
    </script>
  </body>
</html>

列表渲染指令

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Vue</title>
    <script src="https://unpkg.com/vue@3"></script>
  </head>
  <body>
    <div id="app">
      <!-- 如果只写 item 而不是括号，那么只会返回值 -->
      <li v-for="(item, index) in items">
        {{ parentMessage }} - {{ index }} - {{ item.message }}
      </li>
    </div>

    <!-- 创建 Vue 的实例对象 -->
    <script>
      const hello = {
        // 存储数据
        data: function () {
          return {
            parentMessage: "Parent",
            items: [{ message: "Foo" }, { message: "Bar" }],
          };
        },
      };
      const app = Vue.createApp(hello);
      app.mount("#app");
    </script>
  </body>
</html>

v-for 中的 key

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Vue</title>
    <script src="https://unpkg.com/vue@3"></script>
  </head>
  <body>
    <div id="app">
      <!-- 新添加用户的区域 -->
      <div>
        <!-- v-model 使得 name 双向绑定 -->
        <input type="text" v-model="name" />
        <button @click="addNewUser">添加</button>
      </div>

      <!-- 用户列表区域 -->
      <ul>
        <!-- key 绑定了 user.id，这样勾选的内容不会动态变化 -->
        <li v-for="(user, index) in userlist" :key="user.id">
          <input type="checkbox" />
          姓名：{{user.name}}
        </li>
      </ul>
    </div>

    <!-- 创建 Vue 的实例对象 -->
    <script>
      const hello = {
        data: function () {
          return {
            // 用户列表
            userlist: [
              { id: 1, name: "xiao" },
              { id: 2, name: "tuan" },
            ],
            // 输入的用户名
            name: "",
            // 下一个可用的 id 值
            nextId: 3,
          };
        },
        methods: {
          addNewUser() {
            this.userlist.unshift({ id: this.nextId, name: this.name });
            this.name = "";
            this.nextId++;
          },
        },
      };
      const app = Vue.createApp(hello);
      app.mount("#app");
    </script>
  </body>
</html>

NPM

NPM (Node Package Manager）是一个 NodeJS 包管理和分发工具，最常见的用法就是用于安装和更新依赖，但它只是 Node.js 中的一个工具
Node.js 官方下载地址：https://nodejs.org/en/ 【下载过程最后的选项，打个勾】

换源：

npm i nrm -g【安装 nrm】
nrm ls【查看可用镜像源】
nrm use taobao【换淘宝源】
npm config get registry【查看是否换源成功】

VUE CLI

Vue CLI 是 Vue 官方提供的构建工具，通常称为脚手架，用于快速搭建一个带有热重载及构建生产版本等功能的单页面应用
Vue CLI 基于 webpack构建，也可以通过项目内的配置文件进行配置
安装方法：npm install -g @vue/cli

常用指令：

快速构建 Vue 项目：vue create hello【在目标文件夹中执行命令】
运行 Vue 项目：npm run serve【前提是进入项目中】

Vue 组件化开发

Vue 中规定组件的后缀为 .vue，每个组件都由三部分组成，分别是:

template，组件的模板结构，可以包含 HTML 标签及其他的组件
script，组件的 JavaScript 代码
style，组件的样式

Vue 2 和 Vue 3 的差异：

Vue 2 和 Vue 3 的构造方式不同（体现在 main.js 中）
Vue 2 的 template 必须由一个 div 包着

关于怎么实现的
main.js
APP.vue
Movie.vue

https://www.bilibili.com/video/BV1dt4y1K7BF/?vd_source=3796e5fb474fd9dc44fdec1da44336f6
https://www.bilibili.com/video/BV1nV4y1s7ZN/?p=10&vd_source=3796e5fb474fd9dc44fdec1da44336f6

相关阅读:
Android之网络数据存储
 Android之ContentProvider数据存储
 类CL_ABAP_TYPEDESCR,动态取得运行时类型
 创建采购订单批到程序用的BAPI
关于时间的函数
 去非数字字符串的前导零
 abap四舍五入的函数
 读取域的文本表
 PP屏幕增强点
 时间戳计算
原文地址：https://www.cnblogs.com/CourserLi/p/16653694.html