angularjs和vue.js实际运用对比

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

1.1.angularjs

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

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

1.2.vue.js

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

2.基础数据绑定

2.1.vue.js

    {{title}}

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

2.1.angular.js

    {{title}}

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

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

3.双向绑定

3.1.vue.js

    
    
{{inputText}}

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

3.2.angularjs

    
    
{{inputText}}

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

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

4.点击事件

4.1.vue.js

    点我
    点我

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

4.2.angularjs

    点我

 

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

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

5.循环

5.1.vue.js

    

        
{{item.name}}
            

                
{{item0.name}}
                    
                    
                    链接
                    
                    链接
                
            
        
    

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

    

        
{{item.name}}
            

                
{{item.name}}
                    
                    
                    链接
                
            
        
    

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]);
    }
}]);

6.给对象新增属性

Vue.set(this.object, key, value)

Vue.set(this.paging, "addData1", "123");

this.$set(this.object, key, value)

this.$set(this.paging, "addData2", "234");

this.object= Object.assign({}, this.object, { a: 1, b: 2,c:3 })

var vum = new Vue({
    el: "#demo",
    data: {
        paging: {}
    },
    methods: {
        addData() {
            this.paging = Object.assign({}, this.paging, {
                PageIndex: 1,
                PageSize: 10,
                loadingMessage: "上拉加载更多~"
            })
        }
    }
})