#原创，转载请留言联系
Vue.js（读音 /vju?/, 类似于 view） 是一套构建用户界面的渐进式框架。
Vue 只关注视图层， 采用自底向上增量开发的设计。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
开发过程中可以用vue.js，但是项目正式上线，请用vue.min.js。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script src="js/vue.js"></script> 7 <script> 8 window.onload=function(){ 9 var vm=new Vue({ 10 el:‘#list‘, //设置当前vue对象可以操作数据的范围 11 data:{ 12 "item1":"第一个列表", 13 "item2":"第二个列表", 14 "item3":"第三个列表", 15 }, 16 methods:{ 17 change_value:function(){ 18 this.item3="我变我变我变变变" 19 } 20 } 21 }) 22 } 23 </script> 24 </head> 25 <body> 26 <ul id="list"> 27 <li>{{item1}}</li> 28 <li>{{item2}}</li> 29 <li @click="change_value">{{item3}}</li> 30 </ul> 31 </body> 32 </html>
解析：
第8行：预加载，等待浏览器把<body></body>里的代码全部加载完成以后才执行vue.js的代码。
第9行：创建vue对象（必须的）
第10行：设置当前vue对象可以操作数据的范围
第11-15行：设置数据，下面用双花括号{{ }}接收
第16行：设置方法，一般用于触发事件的方法
第29行：设置事件。格式是@事件名=“方法名”
vue.js可以尽可能简单的完成js完成的任务，可以对比一下。(因为网页不够复杂，复杂的时候会直观一点...)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script> window.onload=function(){ var three=document.getElementById(‘three‘); three.onclick=function(){ three.innerHTML=‘我变我变我变变变‘; } } </script> </head> <body> <ul> <li>第一个列表</li> <li>第二个列表</li> <li id="three">第三个列表</li> </ul> </body> </html>
顺便看一下jq的写法：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="js/jquery-1.12.4.min.js"></script> <script> $(function(){ $(‘#three‘).on(‘click‘,function(){ $(‘#three‘).html("我变我变我变变变"); }) }) </script> </head> <body> <ul> <li>第一个列表</li> <li>第二个列表</li> <li id="three">第三个列表</li> </ul> </body> </html>
原文：https://www.cnblogs.com/chichung/p/9724721.html