Vue系列(二)之简单demo

最新推荐文章于 2024-03-05 16:15:50 发布

安妍妍

最新推荐文章于 2024-03-05 16:15:50 发布

阅读量460

点赞数

分类专栏： Vue 文章标签： vue.js

本文链接：https://blog.csdn.net/anyanyan07/article/details/103761577

版权

Vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

简单demo

- 原生JS实现
- Vue实现

今天就写一个极简单的小案例，对比原生JS和Vue两种不同实现方式，让大家来感受一下Vue给开发带来的便捷。

有些代码可能现在的你还看不懂，没关系，后面都会讲到。本篇的目的就是感受

先看效果图：
在这里插入图片描述
很简单，一个头像图片，一个姓名，一个年龄，这三个字段是模拟网络请求得到的数据。

原生JS实现

先看看使用原生JS实现方式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>原生js实现</title>
    <style>
        body{
            font-size: 20px;
        }
        .container {
            background-color: white;
            text-align: center;
        }

        .avatar {
            width: 300px;
            height: 300px;
            border-radius: 50%;
            margin: 30px 0;
        }

        .item {
            padding: 20px;
            font-size: 40px;
            color: #666666;
        }

        .label {
            font-size: 50px;
            color: #333333;
        }

    </style>
</head>
<body>
<div class="container">
    <img src="" class="avatar" id="avatar">
    <div class="item">
        <span class="label">姓名：</span>
        <span id="name"></span>
    </div>
    <div class="item">
        <span class="label">年龄：</span>
        <span id="age"></span>
    </div>
</div>
</body>
<script>
    getData();

    function getData() {
        //模拟网络请求回去数据
        setTimeout(function () {
            const info = {
                name: 'ayy',
                age: 18,
                url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1577680045304&di=88435eeaa6bf261a5ba16c411f7a0a75&imgtype=0&src=http%3A%2F%2Fimage.biaobaiju.com%2Fuploads%2F20180802%2F03%2F1533152912-BmPIzdDxuT.jpg'
            };
            document.getElementById('avatar').src = info.url;
            document.getElementById('name').textContent = info.name;
            document.getElementById('age').textContent = info.age;

        }, 1000);
    }
</script>
</html>

样式和标签可以忽略不看，主要看js这里：
在这里插入图片描述
需要手动操作Dom，给每个元素赋值。更有甚者，我们应该见过这样的代码：

可读性暂且不说，这种代码特别容易出错。

Vue实现

看下Vue的实现方式：

<div class="container">
    <img :src="url" class="avatar" id="avatar">
    <div class="item">
        <span class="label">姓名：</span>
        <span id="name">{{name}}</span>
    </div>
    <div class="item">
        <span class="label">年龄：</span>
        <span id="age">{{age}}</span>
    </div>
</div>

<script>
    var vm = new Vue({
        data:{
            name:'',
            age:0,
            url:''
        },
    }).$mount('.container');

    function getData() {
        //模拟网络请求回去数据
        setTimeout(function () {
            const info = {
                name: 'ayy',
                age: 18,
                url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1577680045304&di=88435eeaa6bf261a5ba16c411f7a0a75&imgtype=0&src=http%3A%2F%2Fimage.biaobaiju.com%2Fuploads%2F20180802%2F03%2F1533152912-BmPIzdDxuT.jpg'
            };
            vm.name = info.name;
            vm.age = info.age;
            vm.url = info.url;
        }, 1000);
    }
    getData();
</script>

没有一行操作Dom的代码，只需要改变data数据，视图会同步变化。代码是不是清爽多了。而且可读性提高，易于维护。

安妍妍

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue系列(二)之简单demo

简单demo今天就写一个极简单的小案例，大家来感受一下Vue给开发带来的便捷。先看效果图：很简单，一个头像图片，一个姓名，一个年龄，这三个字段是模拟从网络请求得到的数据。先看使用原生js怎么实现：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> ...
复制链接

扫一扫