how2j.cn

下载区
文件名 文件大小
vue.min.js 84k

解压rar如果失败,请用5.21版本或者更高版本的winrar

点击下载 winrar5.21
步骤 1 : 什么是 Vue   
步骤 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>
 


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
步骤 3 :

js 方式的问题

edit
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>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
步骤 5 :

vue 的更多用法

edit
当然 vue.js 的内容不仅仅是这一点,接下来会逐渐把 vue.js 的做法都展开,其功能还是很强大的。
本 Vue.js 系列教程用的版本是 :Vue.js v2.5.16


HOW2J公众号,关注后实时获知最新的教程和优惠活动,谢谢。


问答区域    
2022-05-04 能说下vue2跟vue3的区别吗。。
伤感的码农

最近学完vue2 发现vue3教程跟vue2是一样的







回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢
答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到




2022-05-01 怎么看到自己登录的账户?
Javeson

怎么看到自己登录的账户?







回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢
答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到




2021-09-17 用gareen.name就报错,改成message。name才能显示
2021-05-31 message在这里起什么作用呢
2020-10-30 el:element


提问太多,页面渲染太慢,为了加快渲染速度,本页最多只显示几条提问。还有 21 条以前的提问,请 点击查看

提问之前请登陆
提问已经提交成功,正在审核。 请于 我的提问 处查看提问记录,谢谢
关于 前端部分-Vue.js-简介 的提问

尽量提供截图代码异常信息,有助于分析和解决问题。 也可进本站QQ群交流: 578362961
提问尽量提供完整的代码,环境描述,越是有利于问题的重现,您的问题越能更快得到解答。
对教程中代码有疑问,请提供是哪个步骤,哪一行有疑问,这样便于快速定位问题,提高问题得到解答的速度
在已经存在的几千个提问里,有相当大的比例,是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本,可以节约自己大量的学习时间。 站长把教学中用的软件版本整理了,都统一放在了这里, 方便大家下载: https://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图