Vue.js——理解與建立使用

Vue.js

　　概念：是一個輕巧、高性能、可組件化的MVVM庫，同時擁有很是容易上手的API，做者是尤雨溪是中國人。

　　優勢：

　　1）易用
　　　已經會了HTML,CSS,JavaScript？即刻閱讀指南開始構建應用！
　　2）靈活
　　　簡單小巧的核心，漸進式技術棧，足以應付任何規模的應用。
　　3）性能
　　　17kb min+gzip 運行大小
　　　超快虛擬 DOM 
　　　最省心的優化

 

建立與使用的步驟：

　　一、 新建web項目

　　二、新建一個jsp文件

　　三、把vue.js放到Web的js目錄下

　　四、在jsp中引入vue.js

<script src="${pageContext.request.contextPath}/js/vue.js"></script>

　　五、建立一個view對象（DOM組件）

　　注意：此view對象，能夠包含n個數據，數據使用{{xxx}}來描述

　　六、定義一個javascript的model

　　　　var myModel = {userName:'張三三'，age：20};

　　七、建立一個Vue對象（ViewModel對象）

　　　　參數爲一個json對象（包含2個參數el,data）

 

<div id="MyDiv1">
    <p>{{userName}}</p>
    <p>{{age}}</p>
</div>

 

 

　

<script type="text/javascript">
    var myModel = {userName:'李四四',age:19};    
    var myViewModel = new Vue({
        el:'#MyDiv1',//指的是：DOM
    /*data:{//指的是：model
        userName:'張三三'    ,
        age:20
    }*/
        data:myModel //調用前面聲明的數據
        
    });
    console.log(myViewModel.age);//在控制檯輸出結果
</script>                                

 

 

總結：　

　　一、拋開手動操做DOM的思惟，Vue.js是數據驅動，你無需手動操做DOM。

　　二、將DOM和數據綁定起來，DOM將和數據保持同步，每當變動了數據，DOM也會相應地更新。

　　三、MVVM模式（Model-View——ViewModel）

　　　　ViewModel是如何和View以及Model進行交互的。

　　　　model放在data（可能多項）

　　　　View放在el（view裏面的{{  }}可能多項，跟model對應）

　　四、ViewModel是Vue.js的核心，它是一個Vue實例。

　　　　Vue實例是做用域某一個HTML元素上的，

　　　　這個元素能夠是HTML的body元素，

　　　　也能夠是指定了id的某個元素。

　　五、全部的元素都是響應式的。