Vue和angular的似曾相識

時間 2019-12-08

標籤 vue angular 似曾相識欄目 AngularJS 简体版

原文原文鏈接

1、項目結構

Vue & Angularhtml

由於我目前是作微信公衆號開發和維護的，因此angular的目錄結構可能不夠完整，僅供參考。vue

tips:vue項目用的是node.js包管理器打包項目的。angular項目是用nginx環境運行。

2、語法

1.v-if，v-show & ng-if，ng-shownode

v-if:條件判斷，不知足條件的話則不會生成DOM;
v-show:判斷是否顯示，無論條件滿不知足都會生成DOM中，不知足時樣式會被設置爲display:none;
ng-if:根據表達式的值在DOM中生成或移除元素,注意：DOM被移除時，同它關聯的做用域也會被銷燬。
    當它從新加入DOM中時，會經過原型繼承從它的父做用域生成一個新的做用域。
    也就是說ng-if會新建做用域，而ng-show和ng-hide則不會;
ng-show:經過表達式的值判斷是否顯示，值爲false時會被隱藏，經過display控制;複製代碼

2.v-bind，v-model & ng-bind，ng-modelnginx

v-bind:綁定屬性和數據，縮寫是:  ;
v-model:綁定數據，使用在表單控件上實現數據的雙向綁定;
ng-bind:view的單向綁定，至關於{{object.xxx}}，是用於展現數據的;
ng-model:view的雙向綁定;複製代碼

3.v-for & ng-repeat編程

v-for:循環數組和對象，有兩個參數key,index;其中數組是沒有key值的，對象是能夠獲得key值
    例如：
    <ul> <!--循環對象-->
        <li v-for="(item,index,key) in Obj">
            <div>key:{{key}}</div>
            <div>index:{{index}}</div>
        </li> 
    </ul>
    <ul> <!--循環數組-->
        <li v-for="(temp,index) in Arr">
            <div @click="showDiv(temp,index)">{{temp.name}}</div>
        </li>
    </ul>
    tips：循環時，不能使用this綁定組件，只能在函數中傳入Index或其餘特徵值進行判斷選中的div
ng-repeat:循環輸出指定次數的html元素,$index是循環時自帶的索引
    例如：
    <ul>
        <li ng-repeat="data in Arr track by $index">
            <div>data.name</div>
            <div ng-show="data.id==$index">data.age</div>
        </li>
    </ul>
複製代碼

3、組件

vue:公共組件放在components中，是否顯示經過父組件傳參控制，調用時是在頁面中引用此組件，以此爲標籤顯示

<template>
  <div class="mainConent">
    <popList v-show = 'showListFlag' :data = 'tableData' :sureFun = 'sureFun'></popList>
  </div>
</template>

<script>
  import popList from './../components/popList'
  export default {
    data () {
      return {
          showListFlag:false //控制列表是否顯示
      }
    },
    components:{poplist},//引用組件
    methods:{
      sureFun(){//傳入的肯定方法，顯示組件
        this.showListFlag = true;
      }
    }
 }
</script>複製代碼

angular: 使用自定義指令實現模塊化開發

設置項restrict：EACM，每一個字母表示一種使用自定義指令的方式。
restrict:E:標籤使用
restrict:A:屬性使用
restrict:C:類名使用
restrict:M,需同步設replace:true:註釋使用

<!--在對應的Js中或者公共的js中定義一個registerDirective-->
"use strict";
define(['xcyapp', 'angular'], function(xcyapp, angular) {
    xcyapp.registerDirective('datalist',["$timeout",function($timeout){
        return {
            restrict:'E',//值能夠根據需求換成EACM
            replace:true,
            scope:{
                data:'='//指令中要傳入的數據
            },
            template:'<ul>'+
                        '<li>自定義指令</li>'+
                      '</ul>',
            link:function(scope,element,attrs){

            }
        }
    }]);
});
<!--頁面上-->
<datalist data="data"></datalist>複製代碼

4、跳轉

Vue:

使用<router-view></router-view>用來經過路由渲染的組件，當路徑更改時router-view的內容也會更改
tag表示跳轉後成爲的標籤，to爲跳轉的連接和參數。
router-link映射路由，適合只須要跳轉頁面不須要驗證方法的狀況
tips:編譯後router-link會被渲染爲a標籤，to變爲href
<router-link tag = 'p':to="{name:'index',params:{code:1}}"></router-link>
編程式導航：
<button @click="changePage"></button>

methods:{
    changePage(){
        this.$router.push({path:'/home/index'});//對象模式
        //this.$router.push({path:'/home/index',params:{code:1}});
    }  
}複製代碼