likes
comments
collection
share

初识 Web 前端框架：Vue.js

作者站长头像
站长
· 阅读数 45

Vue.js（通常简称为 Vue）是一个用于构建用户界面的渐进式JavaScript框架。它被设计为可以从简单的单文件组件开始逐步扩展到驱动复杂单页应用的架构。今天就让我们一起来认识一下Vue吧。

Vue

计数器

在介绍Vue之前，我们可以通过一个小demo来感受一下传统开发方式和Vue的区别；我们要在页面上展示一个计数器，要如何实现呢？

初识 Web 前端框架：Vue.js

传统开发

在传统开发中，我们可以通过js实现这个功能，获取DOM结构并给其绑定点击事件；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2 id="h2">0</h2>
    <button id="minus">-1</button>
    <button id="add">+1</button>

    <script>
        let h2 = document.getElementById('h2');
        let minus = document.getElementById('minus');
        let add = document.getElementById('add');

        let count = 0
        minus.addEventListener('click', () => {
            count--;
            h2.innerText = count;
        });

        add.addEventListener('click', ()=>{
            count++;
            h2.innerText = count;
        })
    </script>
</body>
</html>

如果使用Vue的开发方式，我们可以怎么实现呢？

Vue 实现

在Vue中，我们通常不会直接获取DOM结构进行操作；而是通过响应式去更新页面；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="app"></div>
    
    <script>
        // 使用 createApp 创建 Vue 应用
        const { createApp } = Vue
        createApp({
            // 定义应用的模板，这里使用了一个模板字符串，包含了一个 h2 标题和两个按钮
            template: `
                <h2 id="h2">{{count}}</h2>
                <button id="minus" @click="minus">-1</button>
                <button id="add" @click="add">+1</button>`,
            // 定义应用的数据对象，包含一个响应式属性 count，初始值为 10
            data: function(){
                return {
                    count: 10
                }
            },
            // 定义应用的方法，用于处理用户点击按钮时的逻辑
            methods: {
                // 当用户点击减号按钮时，调用 minus 方法，使 count 值减一
                minus(){
                    this.count--
                },
                // 当用户点击加号按钮时，调用 add 方法，使 count 值加一
                add(){
                    this.count++
                }
            }
        }).mount('#app')
    </script>
</body>
</html>

在上面的代码中；

  1. HTML 结构:

    • <div id="app"></div>: 这是 Vue 应用挂载的根元素。

  2. 引入 Vue.js:

    • <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>: 通过 CDN 引入 Vue 3 的全局版本。

  3. 创建 Vue 应用:

    • 使用 createApp 函数创建一个新的 Vue 应用实例。

    • template: 定义了应用的模板，包含一个 <h2> 元素用于显示计数值，以及两个按钮，分别用于增加和减少计数值。

    • data: 定义了应用的数据对象，包含一个名为 count 的响应式属性，其初始值为 10。

    • methods: 定义了应用的方法对象，其中包含两个方法：

      • minus: 减少计数值。
      • add: 增加计数值。

  4. 挂载应用:

    • 使用 .mount('#app') 将 Vue 应用挂载到 HTML 中的 #app 元素上。

在上面的例子中，我们只是把Vue通过CDN的方式引入到了html文件中使用；那该如何搭建出一个Vue项目框架呢？

搭建 Vue 项目

在官方文档中，我们可以看到如何去创建一个Vue项目；

npm create vue@latest  // 往node中创建一个Vue项目（node 要在18以上的版本）

执行上面命令后，接下来我们可以选择需要的功能；

初识 Web 前端框架：Vue.js

在项目被创建后，我们可以通过以下步骤安装依赖并启动开发服务器：

cd <your-project-name>  // 进入项目目录下
npm install  // 安装依赖
npm run dev  // 运行项目

运行项目后，我们就可以看到基本的Vue页面是如下图所示；

初识 Web 前端框架：Vue.js

这就是使用Vue框架创建项目的初始页面。我们再来看看Vue项目中的文件夹分别用来存放什么文件？

初识 Web 前端框架：Vue.js

简单 Vue 项目实战

搭建好一个Vue项目后，还是以上面计数器为例，接下来让我们一起来实现一下；我们直接在App.vue文件中实现页面功能；

在Vue中，我们可以选择组合式和选项式两种开发方式，接下来我们分别实现一下；

选项式

<template>
  <div>
    <h1>{{count}}</h1>
    <button @click="minus">-1</button>
    <button @click="add">+1</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 1
    }
  },
  methods: {
    minus() {
      this.count--
    },
    add() {
      this.count++
    }
  }
}
</script>

组合式

<template>
  <div>
    <h1>{{count}}</h1>
    <button @click="minus">-1</button>
    <button @click="add">+1</button>
  </div>
</template>

<script setup>
// 组合式开发
import { ref } from 'vue' // 响应式

let count = ref(100)

// ref声明的响应式变量要通过.value的方式访问它的值
const minus = () => {
  count.value--
}

const add = () => {
  count.value++
}
</script>

在代码上，我们可以看到组合式的写法比选项式的要自由很多，选项式开发是Vue2的语法，写起来比较“生硬”；而组合式开发比较偏向于原生的js语法，这也让很多js初学者比较好接受。

小结

今天初识 Vue 我们可以知道，Vue 的开发中并不会对DOM结构直接进行操作，这让其性能大大地得到了优化；而且我们可以通过 Vue 中的响应式变量去动态地更新页面上的值，组合式的开发方式也很契合原生js的语法，让我们学习起来比较简单、高效。

转载自:https://juejin.cn/post/7398150089547874315
评论
请登录