当前位置：首页 > news >正文

初识Vue

news 2025/7/8 19:03:05

文章目录

1. 前言
2. Vue 的特点
3. 安装 Vue
4. HelloWord

1. 前言

vue是什么？

引用： vue.js 文档

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只

关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单

页应用提供驱动。

可以看到上面说 vue 是一套用于构建用户界面的渐进式框架 啥意思呢？

构建用户界面 : 将我们拿到的数据通过某些方法，变成用户所能看到的界面。

渐进式： Vue 可以自底向上逐层的应用 .

简单来说 : 如果我们自己写的应用非常简单就可以引入一个轻量小巧的核心库。如果应用比较复杂就可以引入各式各样的Vue 插件。

2. Vue 的特点

1.采用组件化模式，提高代码复用率，且让代码更好维护。

在这里插入图片描述

2. 声明式编码 , 让编码人员无需直接操作 DOM ，提高开发效率 .

假设有一组数据

[{id = '001', name :"张三" , age :18}{id = '002', name :"李四" , age :18}{id = '003', name :"王五" , age :18}
]

在提供一个容器： <ul id = "list" ></ul>

想要实现下面这样的效果：

在这里插入图片描述

这里先使用 js 写 , 命令式编码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><ul id="list"></ul></ul><script>// 数据let persons = [{id: '001', name: "张三", age: 18},{id: '002', name: "李四", age: 18},{id: '003', name: "王五", age: 18}]// 准备 html 字符串let htmlStr = ''persons.forEach(p => {htmlStr += `<li>${p.id} - ${p.name} - ${p.age}</li>`})// 获取 list 内容let list = document.getElementById('list');// 修改内容 (亲自操作 DOM )list.innerHTML = htmlStr;</script>
</body></html>

使用 vue 完成：声明式编码


<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="../js/vue.js"></script>
</head><body><div id="root"><ul><li v-for="(person,index) in persons" :key="index">{{person.id}} - {{person.name}} - {{person.age}}</li></ul></div><script>new Vue({el: "#root",data: {persons: [{id: '001', name: "张三", age: 18},{id: '002', name: "李四", age: 18},{id: '003', name: "王五", age: 18}]}})</script>
</body></html>