how2j.cn

相关下载
文件名 文件大小
vue.min.js 84k
步骤 1 : 什么是 Vue   
步骤 2 : JS 的方式   
步骤 3 : js 方式的问题   
步骤 4 : VUE 的方式   
步骤 5 : vue 的更多用法   
步骤 6 : 版本   

步骤 1 :

什么是 Vue

什么是 Vue?
考虑这个需求: 我们要把一个 json对象的数据,显示到一个元素上去。
如果不使用 Vue, 那么就会用到 JS 或者 JQuery,通过操作 HTML DOM 的方式,把数据显示上去。
如果使用Vue, 那么仅仅需要提供数据,以及数据要绑定到的元素的id,就行了,不需要显式地操作HTML DOM。
以下就用代码来表示这两种方式,通过比较,就知道Vue 是做什么的了。
步骤 2 :

JS 的方式

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 方式的问题

js 方式有问题吗? 没问题。 不过敏锐的同学会意识到, html dom其实只是手段,我们真正想要的,就是数据,显示在元素上。
而vue.js 就是用来解决这个问题的。
下面请看vue.js 的做法。
步骤 4 :

VUE 的方式

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="http://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 的更多用法

当然 vue.js 的内容不仅仅是这一点,接下来会逐渐把 vue.js 的做法都展开,其功能还是很强大的。
步骤 6 :

版本

本 Vue.js 系列教程用的版本是 :Vue.js v2.5.16


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


问答区域    
2018-09-21 为什么我运行出来的是乱码。。。
大宝儿
用js运行出来是乱码








答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到




2018-09-06 啥时候能出个Bulma.css的教程啊,这个css不带任何js,搭配vue或Jquery感觉很不错
袅残烟
啥时候能出个Bulma.css的教程啊,这个css不带任何js,搭配vue或Jquery感觉很不错








答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到




2018-08-28 {{gareen.name}}打印不出来啊
2018-08-17 以java为后台的,用vue的框架多吗?
2018-08-09 站长,啥时候装修一下 how2j 那
2018-08-08 vue可以和jquery混着用吗
2018-08-06 这是多少版本的vue
2018-07-25 复制代码没问题,但是这样为啥不行?
2018-07-17 催更
2018-07-17 为站长大打call
2018-07-16 想什么来什么啊
2018-07-16 终于来了




提问之前请登陆
关于 前端部分-Vue.js-简介 的提问

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

上传截图