|
|
|
步骤 2 : JS 的方式 步骤 3 : js 方式的问题 步骤 4 : VUE 的方式 步骤 5 : vue 的更多用法 步骤 6 : 版本
什么是 Vue？
考虑这个需求： 我们要把一个 json对象的数据，显示到一个元素上去。 如果不使用 Vue, 那么就会用到 JS 或者 JQuery，通过操作 HTML DOM 的方式，把数据显示上去。 如果使用Vue, 那么仅仅需要提供数据，以及数据要绑定到的元素的id,就行了,不需要显式地操作HTML DOM。 以下就用代码来表示这两种方式，通过比较，就知道Vue 是做什么的了。
1. 首先准备一个div元素，它其实就是视图
2. 然后在js代码中准备一个json数据。 对json 不了解的同学，请学习 json教程 3. 接着通过 原生的js 获取 div 对应的 html dom 对html dom 不了解的同学，请学习 html dom教程4 4. 最后把 json 数据赋给 html dom，就导致 div 里显示 英雄的名称了 <div id="div1">
</div>
<script>
//准备数据
var gareen = {"name":"盖伦","hp":616};
//获取 html dom
var div1 = document.getElementById("div1");
//显示数据
div1.innerHTML= gareen.name;
</script>
<div id="div1">
</div>
<script>
//准备数据
var gareen = {"name":"盖伦","hp":616};
//获取 html dom
var div1 = document.getElementById("div1");
//显示数据
div1.innerHTML= gareen.name;
</script>
js 方式有问题吗？ 没问题。 不过敏锐的同学会意识到， html dom其实只是手段，我们真正想要的，就是数据，显示在元素上。
而vue.js 就是用来解决这个问题的。 下面请看vue.js 的做法。
1. 首先导入 vue.js 要用到的库： vue.min.js. 这里这个库我是放在网站上的，自己练习的同学，可以从右上角下载一个，方便自己本地用。
<script src="http://how2j.cn/study/vue.min.js"></script> 2. 同样准备一个div元素，其id是div1. 3. 在js中准备json数据 gareen 4. 创建一个Vue对象。 这个Vue对象就把数据 gareen和 视图 div1 关联起来了 new Vue({ el: '#div1', data: { message: gareen } }) 5. 在视图div中，就可以通过如下方式把数据取出来了。 {{gareen.name}} 这种方式 html dom对开发人员就是透明的了。 <script src="https://how2j.cn/study/vue.min.js"></script>
<div id="div1">
{{gareen.name}}
</div>
<script>
//准备数据
var gareen = {"name":"盖伦","hp":616};
//通过vue.js 把数据和对应的视图关联起来
new Vue({
el: '#div1',
data: {
message: gareen
}
})
</script>
当然 vue.js 的内容不仅仅是这一点，接下来会逐渐把 vue.js 的做法都展开，其功能还是很强大的。
本 Vue.js 系列教程用的版本是 ：Vue.js v2.5.16
HOW2J公众号，关注后实时获知最新的教程和优惠活动，谢谢。
问答区域
2022-05-04
能说下vue2跟vue3的区别吗。。
2022-05-01
怎么看到自己登录的账户？
2021-09-17
用gareen.name就报错，改成message。name才能显示
2021-05-31
message在这里起什么作用呢
2020-10-30
el：element
提问太多，页面渲染太慢，为了加快渲染速度，本页最多只显示几条提问。还有 21 条以前的提问，请 点击查看
提问之前请登陆
提问已经提交成功，正在审核。 请于 我的提问 处查看提问记录，谢谢
|
|||||||||||||
