angularjs和vue.js实际运用对比

1.angularjs和vue.js在初始化防止代码闪烁的指令

1.1.angularjs

在页面最外层div写上v-cloak，并且增加一个class——“ng-cloak”

<div class="ng-cloak" ng-cloak ng-app="app" ng-controller="AppCtrl">


</div>

.ng-cloak {
    display: none !important;
}

1.2.vue.js

在页面最外层div写上v-cloak

<div id="app" v-cloak>
    
</div>

2.基础数据绑定

2.1.vue.js

<div id="app" v-cloak>
    {{title}}
</div>

new Vue({
  el: '#app',
  data: {
    title: '标题'
  }
})

2.1.angular.js

<div class="ng-cloak" ng-cloak ng-app="app" ng-controller="AppCtrl">
    {{title}}
</div>

var myApp = angular.module('app', []);

myApp.controller('AppCtrl', ['$scope', function($scope) {
    $scope.title = "标题";
}]);

3.双向绑定

3.1.vue.js

<div id="app" v-cloak>
    <input type="text" v-model="inputText">
    <p>{{inputText}}</p>
</div>

new Vue({
    el: '#app',
    data: {
        inputText: "请输入"
    }
})

3.2.angularjs

<div class="ng-cloak" ng-cloak ng-app="app" ng-controller="AppCtrl">
    <input type="text" ng-model="inputText">
    <p>{{inputText}}</p>
</div>

var myApp = angular.module('app', []);

myApp.controller('AppCtrl', ['$scope', function($scope) {
    $scope.inputText = "请输入";
}]);

4.点击事件

4.1.vue.js

<div id="app" v-cloak>
    <button type="button" v-on:click="fun(123)">点我</button>
    <button type="button" @click="fun(123)">点我</button>
</div>

new Vue({
    el: '#app',
    data: {
        
    },
    methods: {
        fun: function(e) {
            console.log(e);
        }
    }
})

4.2.angularjs

<div class="ng-cloak" ng-cloak ng-app="app" ng-controller="AppCtrl">
    <button type="button" ng-click="fun(123)">点我</button>
</div>

var myApp = angular.module('app', []);

myApp.controller('AppCtrl', ['$scope', function($scope) {
    $scope.fun = function(e) {
        console.log(e);
    }
}]);

5.循环

5.1.vue.js

<div id="app" v-cloak>
    <ul>
        <li v-for="item in tabList">{{item.name}}
            <ul>
                <li v-for="item0 in item.list">{{item0.name}}
                    <input type="checkbox" v-model="item0.checked" v-on:click="CheckItem(item)" name="meat" />
                    <img v-bind:src="item0.imgUrl" />
                    <a v-bind:href="item0.linkUrl">链接</a>
                    <img :src="item0.imgUrl" />
                    <a :href="item0.linkUrl">链接</a>
                </li>
            </ul>
        </li>
    </ul>
</div>

new Vue({
    el: '#app',
    data: {
        tabList: [{
            name: "item0",
            value: "0",
            checked: true,
            list: [{
                name: "item0",
                value: "0",
                linkUrl: "https://www.baidu.com/",
                imgUrl: "https://www.baidu.com/img/bd_logo1.png",
                checked: true
            }, {
                name: "item1",
                value: "1",
                linkUrl: "https://www.baidu.com/",
                imgUrl: "https://www.baidu.com/img/bd_logo1.png",
                checked: false
            }, {
                name: "item2",
                value: "2",
                linkUrl: "https://www.baidu.com/",
                imgUrl: "https://www.baidu.com/img/bd_logo1.png",
                checked: false
            }]
        }, {
            name: "item1",
            value: "1",
            checked: false
        }]
    },
    methods: {
        CheckItem: function(item) { //改变checkbox状态 
            item.state = !item.state;      
            console.log(this.tabList[0]);
        }
    }
})

5.2.angularjs

<div class="ng-cloak" ng-cloak ng-app="app" ng-controller="AppCtrl">
    <ul>
        <li ng-repeat="item in tabList" ng-init="parentIndex=item.value">{{item.name}}
            <ul>
                <li ng-repeat="item0 in item.list track by item0.value">{{item.name}}
                    <input type="checkbox" ng-checked="{{item0.checked}}" ng-click="CheckItem(item0.value,parentIndex)" name="meat" />
                    <img ng-src="{{item0.imgUrl}}" />
                    <a ng-href="{{item0.linkUrl}}">链接</a>
                </li>
            </ul>
        </li>
    </ul>
</div>

var myApp = angular.module('app', []);

myApp.controller('AppCtrl', ['$scope', function($scope) {
    $scope.tabList = [{
        name: "item",
        value: "0",
        checked: true,
        list: [{
            name: "item",
            value: "0",
            linkUrl: "https://www.baidu.com/",
            imgUrl: "https://www.baidu.com/img/bd_logo1.png",
            checked: true
        }, {
            name: "item0",
            value: "1",
            linkUrl: "https://www.baidu.com/",
            imgUrl: "https://www.baidu.com/img/bd_logo1.png",
            checked: false
        }, {
            name: "item2",
            value: "2",
            linkUrl: "https://www.baidu.com/",
            imgUrl: "https://www.baidu.com/img/bd_logo1.png",
            checked: false
        }]
    }, {
        name: "item0",
        value: "1",
        checked: false
    }];
    $scope.CheckItem = function(index, parentIndex) {
        let datas = this.tabList;
        for (let i = 0; i < datas.length; i++) {
            if (datas[i].value == parentIndex) {
                for (let j = 0; j < datas[i].list.length; j++) {
                    if (datas[i].list[j].value == index) {
                        let status = datas[i].list[j].checked;
                        datas[i].list[j].checked = !status;
                    }
                }
            }
        }
        console.log(this.tabList[0]);
    }
}]);