#原创，转载请留言联系
-
什么是vue.js
Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。
Vue 只关注视图层， 采用自底向上增量开发的设计。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
-
vue.js的github地址
开发过程中可以用vue.js，但是项目正式上线，请用vue.min.js。
-
vue.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对象可以操作数据的范围,注意不要把vue对象绑定到body中，因为这样，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行：设置事件。格式是@事件名=“方法名”
-
用js实现vue.js框架实现的内容
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实现vue.js框架实现的内容
顺便看一下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>
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
-
输出数据时，vue的模板语法支持调用js提供的系统函数。
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="js/vue.js"></script> <script>m window.onload=function(){ var vm = new Vue({ el:'#box', data:{ message:'vue.js' status:1, }, }); } </script> </head> <body> <div id="box"> <h1>{{message}}</h1> <!-- 把message的内容转换为大写 --> <h1>{{message.toUpperCase()}}</h1> <!-- 反转message字符串 --> <h1>{{message.split('').reverse().join('')}}</h1> <!-- 三元表达式 条件？True的值:False的值 --> <h1>{{status==1?"Yes":"No"}}</h1> </div> </body> </html>