跟着大佬技术胖学vue系列

每天学一点，自己总结一下。记录一个萌新的爬坑之路，如果有错欢迎各位大佬指正O(∩_∩)O

创建一个vue

单页面直接引入vue.js文件， 之后创建vue实例。

 <script type="text/javascript" src="./../js/vue.js"></script>
 
 <script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            isLogin: 'true',
            isShow: false
        }
    })
</script>
复制代码

之后在div中绑定

<div id="app">
    <!--自己的内容-->
</div>
复制代码

完成

vue的v-if，v-show，v-for指令

v-if，v-show

v-if和v-show用法相同，绑定值判断是否显示区别在于v-if是判断是否加载模块，v-show是改变css（display：none）。

<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            isLogin: 'true',
            isShow: false
        }
    })
</script>
复制代码

<div id="app">
    <h1 v-if="isLogin">if显示</h1>
    <h1 v-else="!isLogin">if不显示</h1>
    <h1 v-show="isShow">if不显示</h1>
</div>
复制代码

v-for

v-for用于循环输出，格式为

v-for="item in items"

基础用法：

 <script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            arrayitem: [1, 85, 25, 12, 6, 18, 0.5, , 1, ],
        },
        computed: {
            sortArrayItem: function() {
                return this.arrayitem.sort(sortNum)
            }
              
        }
    })
    // 数组排序
    function sortNum(a, b) {
        return (a - b)
    }
</script>
复制代码

<ol>
    <li v-for="item in arrayitem">{{item}}</li>
</ol>
<ul>
    <li v-for="(newitem,index) in sortArrayItem">{{index+1}}-{{newitem}}</li>
</ul>
复制代码

首先sort()函数，方法用于对数组的元素进行排序，并返回数组。默认排序顺序是根据字符串UniCode码。因为排序是按照字符串UniCode码的顺序进行排序的，所以首先应该把数组元素都转化成字符串（如有必要），以便进行比较。 function sortNum(a, b) { return (a - b) } ，a-b升序，b-a降序。

另外备注一点，

<li v-for="(newitem,index) in sortArrayItem">{{index+1}}-{{newitem}}</li>
复制代码

for循环，这里的sortArrayItem不直接用arrayitem因为在data里面声明的数据源不能被污染，有保护机制。

对象排序：

    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                students: [{
                    name: 'xiaoqiang',
                    age: '15'
                }, {
                    name: 'zhangsan',
                    age: '19'
                }, {
                    name: 'xiag',
                    age: '24'
                }, {
                    name: 'abc',
                    age: '5'
                }, {
                    name: 'yinzi',
                    age: '66'
                }, ]
            },
            computed: {
                sortStudent: function() {
                    return (sortStudentAge(this.students, 'age'))
                        // return (sortStudentAge(this.students, this.students.age))
                },
                sortStudentAgeArr: function() {
                    return this.students.sort(sortStudentAgeB(this.students.age))
                        // return students.sort(sortStudentAgeB('age'))    
                }
            }

        })
        // 对象排序
        // function sortStudentAge(arr, key) {
        function sortStudentAge(studentsArr, age) {
            console.log(studentsArr)
            console.log(studentsArr[0].age)
            return studentsArr.sort(function(a, b) {
                let x = a.age;
                let y = b.age;
                return (x - y < 0 ? -1 : 1)
            })
        }
        function sortStudentAgeB(params) {
            return function(a, b) {
                let x = a.params;
                let y = b.params;
                return x - y
            }
        }
    </script>
复制代码

<ul>
    <li v-for="studentitem in sortStudent">
        {{studentitem.name}}-{{studentitem.age}}
    </li>
</ul>
<hr>
<ul>
    <h2>age</h2>
    <li v-for="item in sortStudentAgeArr">
        {{item.name}}-{{item.age}}
    </li>
</ul>
复制代码

结语

每天记录一下学了什么，希望有所进步。萌新有说不清楚或者说错的地方欢迎大佬们吊打。😂