01-初识Vue

最新推荐文章于 2022-11-09 22:10:28 发布

点康慕

最新推荐文章于 2022-11-09 22:10:28 发布

阅读量192

点赞数

分类专栏： Vue 文章标签： python

本文链接：https://blog.csdn.net/MOOG007/article/details/120300741

版权

Vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在这里插入图片描述

文章目录

一、Vue是什么?
二、Vue特点
三、命令式编码与声明式编码
- 3.1 命令式编码
- 3.2 声明式编码
四、学习Vue的前置知识

一、Vue是什么?

在这里插入图片描述

Vue是一套用于构建用户界面的渐进式JavaScript框架
构建用户界面：前端拿到数据 → 通过Vue框架 → 渲染到界面上
渐进式：Vue可以自底向上逐层的应用：针对不同的应用引入合适的Vue库
- 简单应用：只需要一个轻量小巧的核心库
- 复杂应用：可以引入各式各样的Vue插件
Vue是后起之秀，生态完善，已然成为国内前端工程师必备技能

二、Vue特点

采用组件化模式，提高代码复用率，且让代码更好维护
声明式编码，让编码人员无需直接操作DOM，提供开发效率
使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点

采用组件化模式，提高代码复用率，且让代码更好维护
声明式编码，让编码人员无需直接操作DOM，提供开发效率
使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点
- 原始JavaScript实现
- Vue实现

三、命令式编码与声明式编码

在这里插入图片描述

3.1 命令式编码

<!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>命令式编码与声明式编码</title>
</head>

<body>
    <ul id="list"></ul>
    <script>
        // 准备数据
        let persons = [
            { id: "001", name: "张三", age: 18 },
            { id: "002", name: "李四", age: 19 },
            { id: "003", name: "王五", age: 20 }
        ];
        // 准备HTML字符串
        let htmlStr = "";
        // 遍历数据拼接HTML字符串
        persons.forEach(person => {
            console.log(person);
            // `符号是在~按键上的符号
            htmlStr += `<li>${person.id} - ${person.name} - ${person.age}</li>`;
        });
        // 获取list元素
        let list = document.getElementById("list");
        list.innerHTML = htmlStr;
    </script>
</body>
</html>

3.2 声明式编码

<!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>命令式编码与声明式编码</title>
    <script src="../vue.js"></script>
</head>

<body>
    <ul id="list">
        <li v-for="person in persons">
            {{person.id}} -- {{person.name}} -- {{person.age}}
        </li>
    </ul>
    <script>
        // 实例化Vue对象
        let vue = new Vue({
            el: "#list",
            data: {
                persons: [
                    { id: "001", name: "张三", age: 18 },
                    { id: "002", name: "李四", age: 19 },
                    { id: "003", name: "王五", age: 20 }
                ]
            }
        });
    </script>
</body>
</html>

四、学习Vue的前置知识

ES6语法规范
ES6模块化
包管理器
原型、原型链
数组常用的方法
axios
promise

点康慕

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
01-初识Vue

文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结前言提示：这里可以添加本文要记录的大概内容：例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。提示：以下是本篇文章正文内容，下面案例可供参考一、pandas是什么？示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。二、使用步骤1.引入库代码如下（示例）：import numpy as npimport.
复制链接

扫一扫