vue入門 vue與react和Angular的關係和區別

時間  2019-11-19
標籤 vue 入門 react angular 關係 區別 欄目 React 简体版
原文   原文鏈接

1、爲何學習vue.jsphp

vue.js兼具angular.js和react的優勢，而且剔除了他們的缺點css

官網：http://cn.vuejs.org/html

手冊：http://cn.vuejs.org/v2/api/vue

2、vue.js是什麼react

Vue是一個"MVVM框架（庫）"，和angular相似，相比angular小巧，比較容易上手jquery

Vue是一個構建用戶界面點的漸進式框架，與其餘重量級框架不一樣的是，vue採用自底向上增量開發的設計ios

vue的核心庫"只關注視圖層"，而且"很是容易學習"，很是容易與其餘庫或者已有的項目整合，另外一方面，vue徹底有能力驅動採用單文件組件和vue生態系統支持的庫開發的複雜單頁面應用git

vue的目標是經過儘量簡單的API實現"響應的數據綁定"和"組合的視圖組件"angularjs

3、MVC/MVP/MVVM的區別github

複雜的軟件必須有清晰合理的架構，不然沒法開發和維護

MVC、MVP和MVVM否是用來解決界面呈現和邏輯代碼分離而出現的模式

通俗的講：就是方便大多數人開發和維護出現的代碼分離模式

課外拓展：http://www.cnblogs.com/lori/p/3501764.html

4、MVC

視圖（view）:用戶界面

控制器（controller）：業務邏輯

模型（Model）:數據處理

5、MVP

MVP 是從經典的模式MVC演變而來，它們的基本思想有相通的地方：Controller/Presenter負責邏輯的處理，Model提供數據，View負 責顯示。做爲一種新的模式，MVP與MVC有着一個重大的區別：在MVP中View並不直接使用Model，它們之間的通訊是經過Presenter (MVC中的Controller)來進行的，全部的交互都發生在Presenter內部，而在MVC中View會從直接Model中讀取數據而不是經過 Controller。

6、MVVM

MVVM在概念上是真正將頁面與數據邏輯分離的模式，在開發方式上，它是真正將前臺代碼開發者（JS+HTML）與後臺代碼開發者分離的模式（asp,asp.net,php,jsp）

雙向綁定：view的變更，自動反映在viewModel,反之亦然

7、vue對比其餘框架

一、vue-angular

1）、vue在設計之初參考了不少angular的思想

2）、vue相比於angular來講更加的簡單

3)、vue至關於angular要變得小巧不少，運行速度比angular快

4）、vue和angular綁定均可以用{{}}

5）、vue指令用v-xxx，angular用ng-xxx

6）、vue中數據放在data對象裏面，angular數據綁定在$scope上面

7）、vue有組件化概念，angular中沒有

二、vue-react

他們都有：

1）、react和vue都是用虛擬DOM Virtual DOM

2)、React和Vue都提供了響應式（Reactive）和組件化（Componsable）的視圖組件

3）、React和vue都將注意力集中保持在覈心庫，伴隨於此，有配套的路由和負責處理全局狀態管理的庫

4）、React使用JSX渲染頁面，Vue使用簡單的模板

5）、Vue比react運行更快

8、初始vuejs

1）、下載vuejs的生產版本

下載地址：http://cn.vuejs.org/v2/guide/installation.html

2）、實例化一個Vue對象

var vm = new Vue({

  // 選項

})

3)、在頁面中div#box

4)、修改配置選項

var vw = new Vue({

el:"#box",//選擇元素

data:{//定義數據

msg:"這裏是Vue",

name："vue"

 

}

})

 

5)、循環數據：傳入數組，對象，使用v-for來進行循環遍歷數據

list:[1,2,4]

<li v-for="item in list">{{item}}</li>

 

list1:[{

name:"張三",

age:30

},

{

name:"李四",

age:30

},{

name:"王五",

age:30

}]

<li v-for="item in list1">

{{item.name}}/{{item.age}}

</li>

 

6）、方法事件

全部的方法都配置於methods選項中

methods:{//放置方法，訪問data中的數據，能夠直接使用this訪問，執行經過v-on來訪問,也可使用簡寫的形式@click來執行方法

getName:function(){

alert(this.name)

},

run:function(){

alert("這是run方法");

}

}

<div v-on:click="getName()">執行getName方法</div>

<br />

<div  @click="run()">執行run方法</div>

 

7）、雙向的數據綁定

<input type="text" v-model="name" />

{{name}}

 

8)、使用jquery實現todolist

a)引入bootstrap

b)綁定事件

添加數據使用append

刪除事件使用remove

9）、使用vue實現todolist

a)引入bootstrap.css,編輯界面

b)實例化vue.js

data:{

info:""//輸入框的值

list:[]//數據列表，循環數據使用v-for，由於須要涉及到刪除功能，因此須要遍歷的時候將索引值也傳遞進去(item,key) in list

}，

methods:{

addData:function(){//能夠傳值

this.list.push(this.info)

console.log(this.info)

},

deleteData:function(key){

this.list.splice(key,1)

}

}

<tr v-for="(item,key) in list">

            <td>{{item}}</td>

            <td><button type="button" class="btn btn-danger " @click="deleteData(key)">刪除</button></td>

        </tr>

 

九

1）文本綁定

v-text指令

<span v-text="name"></span>   至關於angularjs中的ng-bind

給data中添加：test:"<strong>你會解析嗎</strong>",

若是使用{{test}}則會直接顯示出全部的代碼，不會解析

若是使用<span v-text="test"></span> 則會直接顯示出全部的代碼，不會解析

咱們可使用v-html來解析代碼

<span v-html="test"></span>

2）綁定屬性

data中添加一個id:"這是一個id"

<div v-bind:id="id">添加屬性</div>

這裏須要注意不要加{{}}  跟angular中的ng-src等屬性同樣

簡寫形式

<div :id="id">添加屬性</div>

 

url:"https://www.baidu.com/img/bd_logo1.png"

<img :src="url"/>

 

3）事件

複習todolist

事件對象,注意將$event傳入方法中

<button data-id="1638" data-user="wxx" @click="requestData($event)">事件對象</button>

requestData:function(event){

console.log(event)

}

 

數據在srcElement中的dataset中

4）表達式

data:{number:200}

{{number+200}}

data:{ok:true}

{{ok:"是"："否"}}

data:{msg:"倒序輸出該字段"}

{{msg.split("").reverse().join("")}}

 

5)、計算屬性--輸入提示---autocomplete(表單屬性)

computed:{

c:function(){

return this.a + 6;

},

reverseMsg:function(){

return this.message.split("").reverse().join("");

}

}

c={{c}}

<br />

msg={{reverseMsg}}

 

注意，當message改變以後，會從新計算而且改變視圖，寫一個按鈕來執行改變message爲"改變了message"

 

 

案例

data中

search:"",

searchList:["appale","pear","banner","orange"],

cumputed

 

<input type="text"  v-model="search"/>

<p v-for="item in searchList">{{item}}</p>

 

添加計算屬性

listSearch:function(){

var arr = [];

var that = this;

this.searchList.forEach(function(val){

if(val.indexOf(that.search)!=-1){

arr.push(val);

}

})

return arr;

}

 

更改循環條件爲

<p v-for="item in listSearch">{{item}}</p>

 

6）監聽數據變化  watch

// vm.$watch(vm)    vm.msg 拿到 vue上面data綁定的數據

        /*注意監聽文本框改變的時候 這裏直接寫data上面綁定的值*/

         <input type="text" v-model='msg'>

          data:{

                msg:'我是一個數據'

            }

            

         vm.$watch('msg',function(newValue,oldValue){

 

            console.log(newValue+'-------'+oldValue);

 

 

        })

        

                       第二種寫法

             data:{

               msg:'我是一個數據'

            },

            watch:{

 

                msg:function(newValue,oldValue){

 

                    console.log(newValue+'-------'+oldValue);

                }

            }

 

7）計算屬性和方法的對比

案例：翻轉字符串----屢次調用

//計算屬性只有在它的相關依賴發生改變時纔會從新取值。這就意味着只要 message 沒有發生改變，屢次訪問 reversedMessage 計算屬性會當即返回以前的計算結果，而沒必要再次執行函數。

    //總結:計算屬性比方法的效率更高

    8）計算屬性和watch對比

    Vue.js 提供了一個方法 $watch ，它用於觀察 Vue 實例上的數據變更。當一些數據須要根據其它數據變化時， $watch 很誘人 —— 特別是若是你來自 AngularJS 。不過，一般更好的辦法是使用計算屬性而不是一個命令式的 $watch 回調。思考下面例子：

<input type="text" v-model="firstName">

        <input type="text" v-model="lastName">

       {{fullName}}

       watch: {

          firstName:function(val){

              this.fullName=val+this.lastName;

          },

          lastName:function(val){

              this.fullName=this.firstName+val;

          }

      }

 

          9）計算屬性實現

      

computed: {

        fullName: function () {

            return this.firstName + ' ' + this.lastName

        }

      }

10）class語法

.static{

            width: 200px;

            height: 200px;

        }

        .class-a{

            width: 200px;

            height: 200px;

            background: orange;

        }

        .class-b{

            background: blue;

        }

<div class="static" :class="{ 'class-a': isA, 'class-b': isB }">

            v-bind-class111

        </div>

        <br>

        <div :class="classObject">classObject</div>

 

//    能夠傳給 v-bind:class 一個對象，以動態地切換class。注意 v-bind:class 指令能夠與普通的 class 特性共存。

var vm = new Vue({

    el: '#demo',    //div   .class

    data: {

        isA: true,

        isB: false,

        classObject: {

            active: true,

            'class-a': true

        }

 

    }

})

 

11)style語法

//v-bind:style的對象語法十分直觀——看着很是像 CSS，其實它是一個JavaScript對象。CSS屬性名能夠用駝峯式（camelCase）或短橫分隔命名（kebab-case）

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">Style 對象語法</div>

  data: {

            activeColor: 'red',

            fontSize: 30

        }

 

    12）style數組

   

 <div v-bind:style="[styleObjectA, styleObjectB]">Style 數組語法</div>

     data: {

            styleObjectA: {

                color: 'red'

            },

            styleObjectB: {

                fontSize: '30px'

            }

        }

 

    13）v-if---dom操做

   

 v-else

    v-show--顯示隱藏

    <h1 v-if="ok">這是一個h1</h1>

      <h1 v-show="ok">這是一個h1</h1>

       <div v-if="Math.random()>0.5">

                    大於0.5

        </div>

        <div v-else>

                  小於0.5

        </div>

     data: {

            ok:true

        }

 

    1四、循環的使用

    多層循環

    可使用in  也可使用of

    1五、   過濾器

            

Vue.filter('reverseMsg',function(value){

                return value.split('').reverse().join('');

            });

            Vue.filter('toDou',function(value,n1,n2){

               console.log(value+'--'+n1+'--'+n2);

                if(n1>n2){

                    return 123;

                }else{

                    return 456;

                }

            })

data:{

                msg:'我是代碼搬磚工',

                num:'123'

            }

         {{msg}}

        {{msg | reverseMsg}}

        {{num}}

        {{num | toDou(12,14)}}

 

    16）、ajax請求

    axios：http://blog.csdn.net/liaoxiaojuan233/article/details/54176798

    fetch:https://segmentfault.com/a/1190000003810652

    

// 1.  應用fetch或axios 獲取數據

     <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

     axios.get(url)

           .then(function (response) {

               console.log(response.data.result);

 

               _that.list=response.data.result;

           })

           .catch(function (error) {

               console.log(error);

           });

        //2. https://github.com/pagekit/vue-resource

         <script src="https://cdn.jsdelivr.net/vue.resource/1.0.3/vue-resource.min.js"></script>

         //第二個參數若是返回數據爲callback時能夠不設置

          this.$http.jsonp(api,{

             jsonp:'cb'//若是接口爲不爲callback,爲cb時，修改此參數，例如https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=php

         }).then(function(data){

             console.log(data.body);

             that.list=data.body.s;

          },function(){

          })
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程