邂逅Vue3（一）

云牧code
311 阅读5分钟

1.认识Vue

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架

什么是渐进式框架呢？表示我们可以在项目中一点点来引入和使用Vue和Vue的其他功能，而不一定需要全部使用Vue来开发整个项目

image-20220128142118782

2.目前Vue在前端处于什么地位？

目前前端最流行的是三大框架

  • Vue
    • Vue在国内市场占有率是最高的，几乎所有的前端岗位都会对Vue有要求
  • React
    • React在国内外的市场占有率都是非常高的，作为前端工程师也是必须学习的一个框架
  • Angular
    • 入门门槛较高，并且国内市场占率较低;不否认本身非常优秀的框架

3.谁是最好的前端框架

从现实找工作分析

  • 如果去国外找工作，优先推荐React、其次是Vue和Angular
  • 如果在国内找工作，优先推荐Vue，其次是React

image-20220128144724471

4.如何下载Vue呢？

  • Vue的本质，就是一个已经帮我们封装好的JavaScript的库

那么安装和使用Vue这个JavaScript库有哪些方式呢？

  • 方式一：下载Vue的JavaScript文件，并且自己手动引入
  • 方式二：在页面中通过CDN的方式来引入
  • 方式三：通过npm包管理工具安装使用它（webpack时候可以使用）
  • 方式四：直接通过Vue CLI创建项目，并且使用它

方式一：CDN引入

什么是CDN呢？CDN称之为内容分发网络（Content Delivery Network或Content Distribution Network，缩 写：CDN）

  • 它是指通过 相互连接的网络系统，利用最靠近每个用户的服务器
  • 更快、更可靠地将音乐、图片、视频、应用程序及其他文件发送给用户；
  • 来提供高性能、可扩展性及低成本的网络内容传递给用户

常用的CDN服务器可以大致分为两种：

  • 自己购买的CDN服务器,，
    • 目前阿里、腾讯、亚马逊、Google等都可以购买CDN服务器；
  • 开源的CDN服务器：
    • 国际上使用比较多的是unpkg、JSDelivr、cdnjs；

Vue的CDN引入：

<script src="https://unpkg.com/vue@next"></script>

方式二：下载和引入

  • 可以直接打开CDN的链接：复制其中所有的代码到一个新文件中
  • 通过script标签，引入刚才的文件
<script src="../js/vue.js"></script>

5.Hello Vue3案例和counter计数器案例

Hello Vue3

<script src="https://unpkg.com/vue@next"></script>

<div id="app"></div>

<script>
    const app = Vue.createApp({ 
        // template所写内容会成为app标签里面的内容
        template: `Hello Vue3` 
    })
    // app实例接管哪个元素
    app.mount("#app")
</script>

计数器的原生实现

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <h2 class="counter">0</h2>
    <button class="increment">+1</button>
    <button class="decrement">-1</button>

    <script>
      // 1.获取所有的元素
      const counterEl = document.querySelector(".counter");
      const incrementEl = document.querySelector(".increment");
      const decrementEl = document.querySelector(".decrement");

      // 2.定义变量
      let counter = 100;
      counterEl.innerHTML = counter;

      // 3.监听按钮的点击
      incrementEl.addEventListener("click", () => {
        counter += 1;
        counterEl.innerHTML = counter;
      });
      decrementEl.addEventListener("click", () => {
        counter -= 1;
        counterEl.innerHTML = counter;
      });
    </script>
  </body>
</html>

计算器的Vue实现

<script src="https://unpkg.com/vue@next"></script>

<div id="app">
    <h2>{{counter}}</h2>
    <button @click="increment">+1</button>
    <button @click="decrement">-1</button>
</div>

<script>
    // 在里面操作数据 即可更新视图(DOM)
    const app = Vue.createApp({ 
        data() {
            return {
                counter: 0
            }
        },
        methods: {
            increment() {
                this.counter++;
            }, 
            decrement() {
                this.counter--;
            }
        },

        mounted() {
            setInterval(() => {
                this.counter ++;
            }, 1000)
        }

    })
    app.mount("#app")
</script>

6.字符串的显示与隐藏

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>显示隐藏</title>
  </head>
  <body>
    <script src="https://unpkg.com/vue@next"></script>

    <div id="root"></div>

    <script>
      Vue.createApp({
        data() {
          return {
            show:true
          };
        },
        methods: {
          hanleBtnClick() {
            this.show = !this.show;
          },
        },

        template: `
                <div v-if="show">"hello world"</div>
                <button v-on:click="hanleBtnClick">显示/隐藏</button>
               `,
      }).mount("#root");
    </script>
  </body>
</html>

7.MVVM模型

MVC和MVVM都是一种软件的体系结构

  • MVC是Model – View –Controller的简称，是在前期被使用非常框架的架构模式，比如iOS、前端
  • MVVM是Model-View-ViewModel的简称，是目前非常流行的架构模式
    • M：模型(Model) ：data中的数据
    • V：视图(View) ：模板代码
    • VM：视图模型(ViewModel)：Vue实例

data中所有的属性，最后都出现在了vm身上

vm身上所有的属性 及 Vue原型上所有属性，在Vue模板中都可以直接使用。

Vue虽然并没有完全遵守MVVM的模型，但是整个设计是受到它的启发的

8.声明式和命令式

  • 原生和Vue开发有两种不同的编程范式 即Vue使用声明式编程 原生使用的是命令式编程
  • 命令式编程关注的是 “how to do”，声明式编程关注的是 “what to do”，由框架(机器)完成 “how”的过程

声明式

  • 我们每完成一个操作，都需要通过JavaScript编写一条代码，来给浏览器一个指令
  • 在早期的原生JavaScript和jQuery开发的过程中，我们都是通过这种命令式的方式在编写代码的

命令式

  • 我们会在createApp传入的对象中声明需要的内容，模板template、数据data、方法methods
  • 目前Vue、React、Angular的编程模式，我们称之为声明式编程

9.配置对象的属性

在使用createApp的时候，我们传入了一个对象，具体我们来解析一下

template属性

  • 表示的是Vue需要帮助我们渲染的模板信息
  • 里面的HTML标签会替换到我们挂载元素上的(比如id为app的div)的innerHTML
  • 模板中有一些特有的语法，比如 {{}}，比如 @click
  • 我们也可以直接将内容写在挂载元素之上

data属性

  • 传入一个函数，并且该函数需要返回一个对象
    • 在Vue2.x的时候，也可以传入一个对象（虽然官方推荐是一个函数）
    • 在Vue3.x的时候，必须传入一个函数，否则就会直接在浏览器中报错
  • data中返回的对象会被Vue的响应式系统劫持，之后对该对象的修改或者访问都会在劫持中被处理
    • 所以我们在 template中 可以通过 {{counter}} 访问data返回的数据
    • 并且我们修改 counter 数据值时 template中的 {{counter}} 也会更新 即视图更新

methods属性

  • methods属性是一个对象，在里面通常定义各种方法(函数)
    • template 模板可以绑定这些方法
    • 在该方法中，我们可以使用this关键字来直接访问修改data中返回的对象的属性来进行页面的更新

注意: 这里不应该使用箭头函数 会导致原本Vue中this指向的丢失(指向Window) 造成无法访问到对应的数据，原本Vue会对methods里面的所有函数遍历通过bind绑定this

image-20220128195957320

其他属性

这里还可以定义很多其他的属性，比如props、computed、watch、emits、setup，生命周期函数等等，我们会在后续进行讲解

avatar
文章
阅读
粉丝