Vue

Vue基础篇（五）

2019-06-16  本文已影响19人  缺月楼

本教程分为三部分 ： 基础 进阶 实战 ，深入浅出Vue.js
基础篇持续 更新中

------ 列表渲染指令v-­for

用法: 当需要将一个数组遍历或枚举一个对象属性的时候循环显示时，就会用到列表
渲染指令 v-­for。
两种使用场景：

 <div id="app">
        v-for的用法： v-for一定是写在要遍历的元素上，v-for后接等号，类似于item in items<br>
        <br> (1)遍历多个对象：一定是遍历的数组
        <br> 学好Vuejs的方法是：
        <ul>
            <li v-for="vueMth in VueMethods">{{vueMth.name}}</li>
        </ul>
        <!-- 带索引的写法  -->
        <hr> 带索引的写法 :括号的第一个变量是item ，第二个代表index
        <ul>
            <li v-for="(vueMth,index) in VueMethods ">{{index}}------{{vueMth.name}}</li>
        </ul>
        <hr><br> (2).遍历一个对象的多个属性 ：<br>
        <span v-for='value in nvshen'> {{value}} </span>
        <hr> 拿到 value ，key index 的写法 v-k-i ----外开 <br>
        <div v-for="(value ,key,index) in nvshen">
            第{{index}}个女神：----键是{{key}}-----{{value}}
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                //每个对象对应一个li 数组
                VueMethods: [{
                    name: '多思考'
                }, {
                    name: '多练习'
                }, {
                    name: '听张季邪吹牛逼'
                }],
                nvshen: {
                    girll: '林青霞',
                    girl2: '马伊琍',
                    girl3: '老崔'
                }
            }
        })
    </script>

------- 数组更新，过滤与排序

改变数组的一系列方法：
• push() 在末尾添加元素
• pop() 将数组的最后一个元素移除
• shift() 删除数组的第一个元素
• unshift（）：在数组的第一个元素位置添加一个元素

• splice() ：可以添加或者删除函数—返回删除的元素
三个参数：
* 第一个参数 表示开始操作的位置
* 第二个参数表示：要操作的长度
* 第三个为可选参数：

image.png

• sort（）：排序
• reverse() 翻转数组
栗子：

 <div id="app">
        <div v-for="state in arr">{{state}}</div>
        <button @click="stoArr">点我排序</button>
        <button @click="reserveArr">点我翻转</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                arr: ['bookaaaaaa', 'shenss', 'laocuia']
            },
            methods: {
                // 利用sort方法排序
                stoArr: function() {
                    this.arr.sort(function(a, b) {
                        //数组的长度从小到大排序
                        return a.length - b.length;
                    })
                },
                   //直接调用翻转数组
                reserveArr: function() {
                    this.arr.reverse()
                }
            },
        })
    </script>

注意：两个数组变动vue检测不到:

  1. 改变数组的指定项
  2. 改变数组长度过滤
    ：filter

改变指定项：

 <div id="app">
        <button @click="changeone">改变数组的指定项</button>
        <hr><br>
        <button @click="changeArrlength">改变数组的长度</button>
        <hr><br>
        <!-- 过滤 -->需求 返回字符串中含有 oo 的项：<br> {{matChoo}}

    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                arr: ['bookaaaaaa', 'shenss', 'laoocuia']
            },
            computed: {
                matChoo: function() {
                    // 参数代表过滤的每一项
                    return this.arr.filter(function(book) {
                        return book.match(/oo/);
                    })
                }
            },
       // 改变数组的指定项
                changeone: function() {
                    this.arr[0] = 'call'
                },
// 改变数组的长度
                changeArrlength: function() {
                    this.arr.length = 1
                }
            },
        })
    </script>

------- 方法和事件

[object MouseEvent]

基本用法

v­-on绑定的事件类似于原生 的onclick等写法

 <div id="app">
        点击次数： {{count}}
        <br>
        <!-- 如果方法中带有参数，但是你没有加括号， ------handel+()--------默认传原生事件对象event-->
        <button @click="handel()">点我加1</button>
        <button @click="handel(10)">点我加10</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                count: 0
            },
            methods: {
                handel: function(count) {
                    // console.log(count)
                    count = count || 1;
                    this.count += count;
                }
            },

        })
    </script>

如果方法中带有参数，但是你没有加括号，默认传原生事件对象event

修饰符

在vue中传入event对象用 $event
向上冒泡
stop:阻止单击事件向上冒泡
prevent::提交事件并且不重载页面
self:只是作用在元素本身而非子元素的时候调用
once: 只执行一次的方法
可以监听键盘事件：

<input @keyup.13 ="submitMe"> ——­指定的keyCode
vueJS为我们提供了：已下简写方式.......
.enter
.tab
.delete

栗子：

   <div id="app">
        stop用法：阻止单击事件向上冒泡
        <div @click='divClick' style='height:100px;width:100px;background-color: aquamarine;'>
            <button @click.stop="butClick">点我</button>
        </div>
        <hr><br> self用法：只是作用在元素本身而非子元素的时候调用
        <div @click.self='divClick' style='height:100px;width:100px;background-color: aquamarine;'>
            <button @click="butClick">点我</button>
        </div>
        <hr><br> prevent用法：提交事件并且不重载页面
        <form action="" @submit.prevent='hangle'>
            <button type="submit">提交表单</button>
        </form>
        once用法：只执行一次的方法
        <hr><br>
        <button @click='onceMethod'>执行多次</button>
        <button @click.once='onceMethod'>执行1次</button>
        <hr><br> 可以监听键盘事件：
        <input @keyup.13='submitMe'><br><br> 也可以@keyup.enter: <br>
        <input @keyup.enter='submitMe'>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {},
            methods: {
                divClick: function() {
                    alert('div被人点击l')
                },
                butClick: function() {
                    alert('btn被人点击l')
                },
                hangle: function() {
                    alert('我不重载了，页面也不刷新了')
                },
                onceMethod: function() {
                    alert('执行多少次了')
                },
                submitMe() {
                    alert('您按下了enter键')
                }
            },

        })
    </script>
上一篇下一篇

猜你喜欢

热点阅读