初识Vue

牧..

已于 2023-02-08 17:21:55 修改

阅读量2k

点赞数 7

分类专栏： vue 文章标签： vue.js javascript 前端

于 2023-02-08 16:38:45 首次发布

本文链接：https://blog.csdn.net/mu_tong_/article/details/128938172

版权

vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

Vue是一个渐进式前端框架，注重视图层，易于上手并可与其他库集成。其特点包括组件化开发、声明式编码，允许开发者不直接操作DOM。文章通过对比JS和Vue实现列表渲染，展示了Vue的便捷性，并介绍了Vue的基本安装和HelloWorld程序，强调了容器与Vue实例的一一对应关系。

摘要由CSDN通过智能技术生成

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>