正心全栈编程-文档站

Appearance

为何学 Vue ​

花更少的时间，干更多的活。开发网站速度快，且更方便。

image-20210317180201113

例如：把数组数据 - 循环铺设到 li 中，看看分别如何做的？

1、原生 js 做法

html

<ul id="season"></ul>
<script>
    let arr = ["春天", "夏天", "秋天", "冬天"];
    let season = document.getElementById("season");
    for (let i = 0; i < arr.length; i++) {
        let theLi = document.createElement("li");
        theLi.innerHTML = arr[i];
        season.appendChild(theLi);
    }
</script>

2、jQuery 做法

html

<ul id="season"></ul>
<script>
    let arr = ["春天", "夏天", "秋天", "冬天"];

    let season = $("#season");
    $.each(arr, function (index, item) {
        season.append(`<li>${item}</li>`);
    });
</script>

3、vue 做法

vue

<script setup>
  import {reactive} from "vue";

  const arr = reactive(["春天", "夏天", "秋天", "冬天"]);
</script>

<template>
  <li v-for="item in arr">{{ item }}</li>
</template>

虽然 vue 写起来很爽，但是一定不要忘记，vue 的底层还是原生 js。

开发更加的效率和简洁，易于维护，(甚至测试，Java, Python 工程师都要学点 vue, 方便与前端沟通)。现在很多项目都是用 vue 开发的。例如哔哩哔哩、爱奇艺、饿了吗、掘金、简书、少数派等等。

市场上 90% 前端工作都要求会 vue, 会 vue 拿高薪，很多后端或测试都要学点 vue。

Vue 是什么 ​

官网地址：https://cn.vuejs.org/ (作者：尤雨溪)

Vue

vue 是一个渐进式的 JavaScript 框架

渐进式：逐渐进步，想用什么就用什么，不必全都使用

image-20210314200521109

Vue 渐进式：Vue 从基础开始，会循序渐进向前学习。

什么是库和框架 ​

库：封装的属性或方法 (例 jquery.js)，一般是为了解决某一类问题而开发出来的工具包。

框架：拥有自己的规则和元素，比库强大的多 (例 vue.js )，一般是提供一整套完整的解决方案，选择框架之后就不需要自己去选择其他的工具了。

image-20210111215624065

MVVM 设计模式 ​

目的：转变思维，用数据驱动视图改变，操作 dom 的事，vue 源码内干了

设计模式：是一套被反复使用的、多数人知晓的、经过分类编目的、代码设计经验的总结。

演示：在上个代码基础上，在 devtool 工具改变 M 层的变量，观察 V 层 (视图的自动同步)

  • MVVM，一种软件架构模式，决定了写代码的思想和层次
    • M：model 数据模型 (data 里定义)
    • V：view 视图（html 页面）
    • VM：ViewModel 视图模型 (vue.js 源码)
  • MVVM 通过数据双向绑定让数据自动地双向同步 不再需要操作 DOM
    • V（修改视图） -> M（数据自动同步）
    • M（修改数据） -> V（视图自动同步）

1、在 vue 中，不推荐直接手动操作 DOM！！！

2、在 vue 中，通过数据驱动视图，不要在想着怎么操作 DOM，而是想着如何操作数据！！(思想转变)

总结：vue 源码内采用 MVVM 设计模式思想，大大减少了 DOM 操作，挺高开发效率

vite 单 vue 文件讲解 ​

默认的 vue 项目的 App.vue 里面的内容全部删除，然后填入下面内容。

vue
<!-- js 相关 -->
<script setup>
  import {ref} from "vue";

  const msg = ref("欢迎使用 vue");
</script>

<!-- template, 渲染到页面的标签结构 -->
<template>
  <h1>{{ msg }}</h1>
</template>

<!-- 当前组件的样式，设置 scoped, 可以保证样式只对当前页面有效 -->
<style scoped></style>

重新加载网页之后就可以看到网页上显示 欢迎使用 vue。

Vue 推荐采用 .vue 文件来开发项目

template 里只能有一个根标签

vue 文件 - 独立模块 - 作用域互不影响

style 配合 scoped 属性，保证样式只针对当前 template 内标签生效

最终 Vue 文件配合 vite, 把他们打包起来插入到 index.html, 然后在浏览器运行

3.2 版本之前写法 ​

vue

<template>
  <div>
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
  export default {
    name: "00 插值表达式",
    data() {
      // 格式固定，定义 vue 数据之处
      return {
        // key 相当于变量名
        msg: "欢迎使用 vue",
      };
    },
  };
</script>

<style scoped></style>

3.2 版本写法 ​

vue

<template>
  <div>
    <h1>{{ msg }}</h1>
    <h2>{{ obj.name }}</h2>
    <h3>{{ obj.age > 18 ? "成年" : "未成年" }}</h3>
  </div>
</template>

<script>
  import {defineComponent, ref, reactive} from "vue";

  export default defineComponent({
    name: "App",
    // 是 Vue3.2 之前的 composition API 中 2 个最重要的响应式 API(ref 和 reactive)
    // ref 用来处理基本类型数据，reactive 用来处理对象 (递归深度响应式)
    // 如果用 ref 对象/数组，内部会自动将对象/数组转换为 reactive 的代理对象
    // ref 内部：通过给 value 属性添加 getter/setter 来实现对数据的劫持
    // reactive 内部：通过使用 Proxy 来实现对对象内部所有数据的劫持，并通过 Reflect 操作对象内部数据
    // ref 的数据操作：在 js 中要.value, 在模板中不需要 (内部解析模板时会自动添加.value)

    setup() {
      const msg = ref("hello, vue");
      const obj = reactive({
        name: "小 vue",
        age: 5,
      });

      return {
        msg,
        obj,
      };
    },
  });
</script>

<style scoped></style>