数组过滤 filter || 方法和事件|| 修饰符

数组过滤 filter

-- 返回字符串中含有 aa 的字符串案例

<div id="app">
    {{matchName}}
</div>

new Vue({
    el:'#app',
    data:{
        name: 'haah'
    },
    // 方法实现
    computed:{
        matchName(){
            return this.name.filter(function(value)){
                return value.match(/aa/) // match() 正则查找
            }
        }
    }
})
 

方法和事件

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

<button @click="handle">+</button>
// 绑定事件如果有参数，但是没有加括号，默认传原生事件 event
<button @click="handle()">+</button>

new Vue({
    el:'#app',
    data:{
        count: 0
    },   
    methods:{
        handle(count){
            count = count || 1;
            this.count += count
    }
}
})
 

修饰符

.stop ：阻止单击事件向上冒泡

当子盒子被父盒子包裹住，点击子盒子add2，父盒子add1也相当于被点击,
给button添加 stop阻止向上冒泡

<div class="parent" @click="add1" >
   <button @click.stop="add2">
</div>
//
 

prevent: 提交事件并且不重载页面

<form action="" @submit.prevent="handle">
      <input type="submit">
</form>
// 页面表单不会重新加载
 

.self: 只作用于元素本身，而非子元素的时候调用

 <div @click.self="add1">
     <button @click="add2"></button>
 </div>
 

btn 没有给自身添加阻止冒泡事件，应当点击btn, div也有响应，但是给div元素设置了self，即当点击btn不会影响到Div

once: 只执行一次的方法

<button @click.once="add">点击+1</button>
 

由于设置了@click.once 只会被点击一次 +1

监听键盘事件 @keyup

<input @keyup.13 ="submitMe">
// 按下回车事件
 

vue.js 提供了 许多监听事件 如 .enter .tab .delete