Vue.js框架入门-优快云博客

本文介绍Vue.js框架的基础知识，包括其设计理念、基本使用方法及如何通过简单API实现响应式数据绑定和视图组件。对比了Vue.js与原生JS及jQuery实现相同功能的代码量，展示了Vue.js的简洁性和高效性。

#原创，转载请留言联系

什么是vue.js

Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架。

Vue 只关注视图层，采用自底向上增量开发的设计。

Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

vue.js的github地址

https://github.com/vuejs/vue

开发过程中可以用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>