Vue.js 系列教程 | 基于实例代码分步讲解一站式学习Java

相关下载
文件名	文件大小
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 里显示英雄的名称了

"); window.frames["iframe_show7779"].document.write(decodeHtml($("textarea#stepcodeTextarea7779").val())); window.frames["iframe_show7779"].document.close(); $(window.frames["iframe_show7779"]).load(function(){ $("#iframe_show7779").height($("#iframe_show7779").contents().find("body").height()+showittryitheight); }); $("#iframe_show7779").height($("#iframe_show7779").contents().find("body").height()+showittryitheight); setTimeout(function(){ },500); });

运行效果

<div id="div1">
  
</div>
 
<script>
 
//准备数据
var gareen = {"name":"盖伦","hp":616};

//获取 html dom
var div1 = document.getElementById("div1");

//显示数据
div1.innerHTML= gareen.name;
 
</script>

"); window.frames["iframe7779"].document.write(decodeHtml(code7779)); window.frames["iframe7779"].document.close(); //load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式 $(window.frames["iframe7779"]).load(function(){ $("#iframe7779").height($("#iframe7779").contents().find("body").height()+showittryitheight); }); $("#iframe7779").height($("#iframe7779").contents().find("body").height()+showittryitheight); alreadyWriteCode7779 = code7779; $("#rendering7779").hide(); $("#rendered7779").show(); } var tRereshRetry2DemoPanel7779 = setInterval(rereshRetry2DemoPanel7779,1000); var binded7779 = false; $("textarea#stepcodeTextarea7779").keyup(function(){ if(!binded7779){ $(window).bind('beforeunload',function(){ binded7779 = true; return "xxxx"; }); } var newCode = $(this).val() code7779 = newCode; /*below code is replaced by function rereshRetry2DemoPanel()*/ // if(code7779!=newCode){ // window.frames["iframe7779"].document.write("

"); // window.frames["iframe7779"].document.write(decodeHtml($("textarea#stepcodeTextarea7779").val())); // window.frames["iframe7779"].document.close(); // $(window.frames["iframe7779"]).load(function(){ // $("#iframe7779").height($("#iframe7779").contents().find("body").height()+showittryitheight); // }); // code7779 = newCode; // } }); $(".tryButton7779").click(function(){ $("#tryDiv7779").show(); $("#stepcodeTextarea7779").focus(); $("#stepcodeTextarea7779").height(200); $("#iframe7779").height(0); window.frames["iframe7779"].document.write("

"); window.frames["iframe7779"].document.write(decodeHtml($("textarea#stepcodeTextarea7779").val())); window.frames["iframe7779"].document.close(); //load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式 $(window.frames["iframe7779"]).load(function(){ $("#iframe7779").height($("#iframe7779").contents().find("body").height()+showittryitheight); }); $("#iframe7779").height($("#iframe7779").contents().find("body").height()+showittryitheight); this.scrollIntoView(true); editor7779.focus(); editor7779.setSize(null, "250"); $("#rendering7779").hide(); $("#rendered7779").hide(); }); var mixedMode = { name: "htmlmixed", scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i, mode: null}, {matches: /(text|application)\/(x-)?vb(a|script)/i, mode: "vbscript"}] }; var editor7779 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea7779"), { lineNumbers: true, styleActiveLine: true, matchBrackets: true, mode:"text/html", theme:"eclipse", selectionPointer: true, lineWrapping: true, extraKeys: { "Alt-/": "autocomplete", "Ctrl-F": "findPersistent", "F8": function(cm) { cm.setOption("fullScreen", !cm.getOption("fullScreen")); }, "Esc": function(cm) { if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false); } } }); editor7779.on("change",function(doc){ if(!binded7779){ $(window).bind('beforeunload',function(){ binded7779 = true; return "xxxx"; }); } var newCode = doc.getValue(); code7779 = newCode; $("textarea#stepcodeTextarea7779").val(newCode); if(alreadyWriteCode7779!=code7779){ lastModifedTime7779 = new Date().getTime(); $("#rendering7779").show(); $("#rendered7779").hide(); } // alert(doc.getValue()); }); $(".CodeMirror").addClass("form-control"); // var editor7779 = CodeMirror.fromTextArea(, { // lineNumbers: true, // styleActiveLine: true, // matchBrackets: true, // theme:"eclipse", // }); editor7779.on("change",function(doc){ // alert(doc.getValue()); }); $("#tryDiv7779").hide(); }); $("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

步骤 3 :

js 方式的问题

顶折

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

步骤 4 :

VUE 的方式

顶折

1. 首先导入 vue.js 要用到的库： vue.min.js. 这里这个库我是放在网站上的，自己练习的同学，可以从右上角下载一个，方便自己本地用。

2. 同样准备一个div元素，其id是div1.

3. 在js中准备json数据 gareen

4. 创建一个Vue对象。这个Vue对象就把数据 gareen和视图 div1 关联起来了

new Vue({
el: '#div1',
data: {
message: gareen
}
})

5. 在视图div中，就可以通过如下方式把数据取出来了。

这种方式 html dom对开发人员就是透明的了。

"); window.frames["iframe_show7784"].document.write(decodeHtml($("textarea#stepcodeTextarea7784").val())); window.frames["iframe_show7784"].document.close(); $(window.frames["iframe_show7784"]).load(function(){ $("#iframe_show7784").height($("#iframe_show7784").contents().find("body").height()+showittryitheight); }); $("#iframe_show7784").height($("#iframe_show7784").contents().find("body").height()+showittryitheight); setTimeout(function(){ },500); });

运行效果

代码行数较多，请点击查看

<script src="http://127.0.0.1/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>

"); window.frames["iframe7784"].document.write(decodeHtml(code7784)); window.frames["iframe7784"].document.close(); //load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式 $(window.frames["iframe7784"]).load(function(){ $("#iframe7784").height($("#iframe7784").contents().find("body").height()+showittryitheight); }); $("#iframe7784").height($("#iframe7784").contents().find("body").height()+showittryitheight); alreadyWriteCode7784 = code7784; $("#rendering7784").hide(); $("#rendered7784").show(); } var tRereshRetry2DemoPanel7784 = setInterval(rereshRetry2DemoPanel7784,1000); var binded7784 = false; $("textarea#stepcodeTextarea7784").keyup(function(){ if(!binded7784){ $(window).bind('beforeunload',function(){ binded7784 = true; return "xxxx"; }); } var newCode = $(this).val() code7784 = newCode; /*below code is replaced by function rereshRetry2DemoPanel()*/ // if(code7784!=newCode){ // window.frames["iframe7784"].document.write("

"); // window.frames["iframe7784"].document.write(decodeHtml($("textarea#stepcodeTextarea7784").val())); // window.frames["iframe7784"].document.close(); // $(window.frames["iframe7784"]).load(function(){ // $("#iframe7784").height($("#iframe7784").contents().find("body").height()+showittryitheight); // }); // code7784 = newCode; // } }); $(".tryButton7784").click(function(){ $("#tryDiv7784").show(); $("#stepcodeTextarea7784").focus(); $("#stepcodeTextarea7784").height(200); $("#iframe7784").height(0); window.frames["iframe7784"].document.write("

"); window.frames["iframe7784"].document.write(decodeHtml($("textarea#stepcodeTextarea7784").val())); window.frames["iframe7784"].document.close(); //load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式 $(window.frames["iframe7784"]).load(function(){ $("#iframe7784").height($("#iframe7784").contents().find("body").height()+showittryitheight); }); $("#iframe7784").height($("#iframe7784").contents().find("body").height()+showittryitheight); this.scrollIntoView(true); editor7784.focus(); editor7784.setSize(null, "250"); $("#rendering7784").hide(); $("#rendered7784").hide(); }); var mixedMode = { name: "htmlmixed", scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i, mode: null}, {matches: /(text|application)\/(x-)?vb(a|script)/i, mode: "vbscript"}] }; var editor7784 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea7784"), { lineNumbers: true, styleActiveLine: true, matchBrackets: true, mode:"text/html", theme:"eclipse", selectionPointer: true, lineWrapping: true, extraKeys: { "Alt-/": "autocomplete", "Ctrl-F": "findPersistent", "F8": function(cm) { cm.setOption("fullScreen", !cm.getOption("fullScreen")); }, "Esc": function(cm) { if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false); } } }); editor7784.on("change",function(doc){ if(!binded7784){ $(window).bind('beforeunload',function(){ binded7784 = true; return "xxxx"; }); } var newCode = doc.getValue(); code7784 = newCode; $("textarea#stepcodeTextarea7784").val(newCode); if(alreadyWriteCode7784!=code7784){ lastModifedTime7784 = new Date().getTime(); $("#rendering7784").show(); $("#rendered7784").hide(); } // alert(doc.getValue()); }); $(".CodeMirror").addClass("form-control"); // var editor7784 = CodeMirror.fromTextArea(, { // lineNumbers: true, // styleActiveLine: true, // matchBrackets: true, // theme:"eclipse", // }); editor7784.on("change",function(doc){ // alert(doc.getValue()); }); $("#tryDiv7784").hide(); }); $("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

步骤 5 :

vue 的更多用法

顶折

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

步骤 6 :

版本

顶折

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

监听事件

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

关于前端部分-Vue.js-简介的提问

尽量提供截图、代码和异常信息，有助于分析和解决问题。也可进本站QQ群交流: 620943819

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

上传截图