vue学习之初步认识vue

最新推荐文章于 2024-08-05 19:23:36 发布

收破烂的小熊猫~

最新推荐文章于 2024-08-05 19:23:36 发布

阅读量185

点赞数

分类专栏：前端文章标签：初识vue

本文链接：https://blog.csdn.net/qq_36654629/article/details/86487203

版权

前端同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

vue

1 篇文章 0 订阅

订阅专栏

首先，介绍一下Vue。Vue是一套构建用户界面的渐进性框架。那么vue有什么作用呢?
考虑到这个需求：我们要把一个json对象的数据，显示到一个元素上去。

如果不使用Vue,那么就会用到JS或JQuery,通过操作HTML DOM的方式，把数据加载到元素上去显示。
如果使用Vue,那么仅仅提供数据，以及数据需要绑定的元素的id。就不需要显示的操作HTML DOM。

下面分别两种情况，举例说明。

1.JS的方式

//1.准备一个div元素
<div id="div1">
</div>
<script>
// 2.准备JSON数据
var gareen = {"name":"盖伦","hp":616};
 
// 3.获取 html dom
var div1 = document.getElementById("div1");
// 4.显示数据
div1.innerHTML= gareen.name;
</script>

运行结果
在这里插入图片描述

2.Vue的方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue初次使用</title>
</head>
<body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="div1">
    {{message}}
</div>
<script>
    //准备数据
    var gareen = {"name":"铁头","hp":616};
    //通过vue.js 把数据和对应的视图关联起来
    new Vue({
        el: '#div1',
        data: {
            message: gareen.name
        }
    })

</script>
</body>
</html>

在这里插入图片描述