vue 2.0 知识点

组件内部的v-on事件与组件上定义的v-on事件

当在组件内部的元素上定义了v-on事件，如：给button元素添加v-on:click，这样点击按钮时是会执行click事件函数的。但是如果把这个组件导入其他组件里时，在组件上定义的如：v-on:click是不会生效的。解决方法：增加修饰符native。

引用button的组件代码

<template>
    <div>
        <div>
            <!--注意这里：通过native修饰符，让定义在test-button组件上的 click事件生效-->
            <test-button @click.native="output()"></test-button>
        </div>
    </div>
</template>
<script>
    import testButton from "./button.vue";
    export default {
        data:()=>{
            return {
               
            }
        },
        components:{
            testButton
        },
        methods:{
            log:(params)=>{
                console.log(params);
            },
            output(){
                console.log('点击了组件外部');
            }
        }
    }
</script>

button组件代码

<template>
    <div>
        <button type="button" @click="clickLog()">点击打印something</button>
    </div>
</template>
<script>
    export default{
        methods:{
            clickLog(){
                console.log('点击了组件内部');
            }
        }
    }
</script>

点击结果:

点击button结果显示

阻止onmousemove事件

有时候当页面出现了一层蒙版在最上面时，如果下面的内容区域是可以滚动的，那么当你在蒙版上上下滚动时，下面的内容区域也会跟着滚动，要解决这个问题，可以使用修饰符 prevent 解决。

<template>
    <div>
        <div>
            <div @touchmove.prevent="log(1)" class="backdrop"></div>
        </div>
    </div>
</template>

过滤器的使用

和其他框架类似，你可以自定义过滤器。过滤器可以用在bind指令（在vue2.1以后开始支持）和mustache插值（即{{}}双大括号里）。

<template>
     <div>
         <a v-for='(url,index) in urlList' :href='url.url | getquery(url.name,url.age)'>{{url.url}}</a>
     </div>
</template>

<script>
export default {
     data () {
         return {
             urlList : [
                 {url : 'http://www.baidu.com',name :'ziksang',age : 20},
                 {url : 'http://www.google.com',name :'ziksang2',age : 30}
             ]
         }
     },
     filters : {
         getquery (value,name,age) {
             if(!value) return ""
             return `${value}?name=${name}&age=${age}`
         }
     }
}
</script>

注意点：使用过滤器时传的第一个参数是定义过滤器时的第二个参数。因为默认使用过滤器时，已经把过滤的内容当作第一个参数了。