Vue2.0修饰符

一、修饰符

修饰符有五种类型：

二、表单修饰符

1.trim

trim:去除数据头尾的空格

<input type="text" v-model.trim="value">

2.lazy

lazy:光标离开标签的时候，会赋值给变量，也就是在change事件之后再进行信息同步

<input type="text" v-model.lazy="name">

3.number

number：将数据转化成数字类型，当无法被parseFloat解析时返回原值（即字符串中的首个字符为数字时即可返回数字，否则返回原值）

例：

• 输入1323dsdhd,返回1323；
• 输入 asdd414,返回 asdd414

<input type="text" v-model.number="num">

 

三、事件修饰符

1.stop

stop：阻止冒泡，相当于调用event.stopPropagation()

<div @click="shout(2)">
   <button @click.stop="shout(1)">按钮</button>
</div>

此例中不加stop会执行1,2，加上stop阻止冒泡，只执行1，不会执行2

 

2.prevent

prevent:阻止默认事件，相当于调用event.preventDefault()

<a href="https://www.baidu.com" @click.prevent="shout(3)">百度</a>

此例中点击a标签不会跳转到百度，而是执行shout(3)

 

3.self 

self:当event.target为自身元素时触发

<div @click.self="shout(2)">
   <button @click="shout(1)">按钮</button>
</div>

此例中只执行shout(1),不执行shout(2)

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。

<div @click="shout(3)">
  <div @click.self.stop="shout(2)">
    <button @click="shout(1)">按钮</button>
  </div>
</div>
此代码执行1，执行3，因为阻止了2自身的执行

<div @click="shout(3)">
  <div @click.stop.self="shout(2)">
    <button @click="shout(1)">按钮</button>
  </div>
</div>
此代码只执行1，因为阻止了全部冒泡

 

4.once

once:绑定了事件以后只能触发一次，第二次就不会触发，但仍然有冒泡

<div @click="shout(3)">
      <div @click="shout(2)">
        <button @click.once="shout(1)">按钮</button>
      </div>
</div>

第一次点击按钮时，执行1,2,3；第2次及以后点击时执行2,3，不再执行1了。

 

5.capture

capture：使事件触发从包含这个元素的顶层开始往下触发

<div @click.capture="shout(3)">
      <div @click="shout(2)">
        <button @click="shout(1)">按钮</button>
      </div>
</div>
点击按钮，先执行3，再执行1，再执行2

<div @click.capture="shout(3)">
      <div @click.capture="shout(2)">
        <button @click="shout(1)">按钮</button>
      </div>
</div>
点击按钮，先执行3，再执行2，再执行1

6.passive

passive:passive 会告诉浏览器你不想阻止事件的默认行为，可以不用去查询程序有没有阻止默认事件，提早告诉，提高性能。

<div class="div_wrapper" @scroll.passive="shout(5)"></div>

注意：不要把 .passive 和 .prevent 一起使用,因为.prevent 将会被忽略，同时浏览器可能会向你展示一个警告。passive 会告诉浏览器你不想阻止事件的默认行为。

 

 7.native

native:就是在父组件中给子组件绑定一个原生的事件，就将子组件变成了普通的HTML标签，不加 native事件是无法触发的。

<my-component v-on:click.native="doSomething"></my-component>

 

四、鼠标键盘按钮修饰符

1.鼠标按钮修饰符

针对的就是左键、右键、中键点击，对应的鼠标键点击才会触发函数

• left 左键点击

• right 右键点击

• middle 中键点击

<button @click.left="shout(1)">ok</button>
<button @click.right="shout(1)">ok</button>
<button @click.middle="shout(1)">ok</button>

2.键盘按钮修饰符

• 普通键（enter、tab、delete、space、esc、up...）

• 系统修饰键（ctrl、alt、meta、shift...）

// 只有按键为keyCode的时候才触发
<input type="text" @keyup.keyCode="shout(1)">

还可以通过以下方式自定义一些全局的键盘码别名：

Vue.config.keyCodes.f2 = 113

 

五、v-bind修饰符

1.sync

作用：sync修饰符是一个语法糖，类似v-model，它主要是解决了父子组件的双向绑定问题。因为vue提倡的是单向数据流动，因此不能直接在子组件里面修改父组件传过来的数据，我们一般$emit。

sync修饰符其实是做了两步动作：
1、声明传的数据visible
2、声明@update:visible事件

注意：

• 使用sync的时候，子组件传递的事件名格式必须为update:value，其中value必须与子组件中props中声明的名称完全一致

• 注意带有 .sync 修饰符的 v-bind 不能和表达式一起使用

• 将 v-bind.sync 用在一个字面量的对象上，例如 v-bind.sync=”{ title: doc.title }”，是无法正常工作的

原始写法$emit：

<!-- 父组件 -->
<template>
  <div id="app">
    <button @click="visible=true">显示</button>
    <my-alert :visible="visible" @close="closeAlert"></my-alert>
  </div>
</template>

<script>
import myalert from './components/myalert'
export default {
  name: 'App',
  components:{'my-alert': myalert},
  data(){
    return {
      visible:false
    }
  },
  methods:{
    closeAlert(value){
      this.visible = value
    }
  }

}
</script>


<!-- 子组件 -->
<template>
    <div class="cont" v-show="visible">
        <h2>这是一个对话框</h2>
        <button @click="closeAlert">关闭</button>
    </div>
</template>

<script>
    export default {
        name: "myalert",
        props:{
            visible:{
                type:Boolean,
                default:false
            }
        },
        methods:{
            closeAlert(){
                this.$emit('close',false)
            }
        }
    }
</script>

一个数据就要带一个自定义事件才能实现双向绑定，为了避免乱起名引起的混乱，事件名我们最好约定一下规则。
因为是修改visible这个数据，因此事件我们统一就叫@update:visible

<!-- 父组件 -->
<template>
  <div id="app">
    <button @click="visible=true">点击</button>
    <my-alert :visible="visible" @update:visible="value => visible=value"></my-alert>
  </div>
</template>

<script>
import myalert from './components/myalert'
export default {
  name: 'App',
  components:{'my-alert': myalert},
  data(){
    return {
      visible:false
    }
  }

}
</script>

<!-- 子组件 -->
<template>
    <div class="cont" v-show="visible">
        <h2>这是一个对话框</h2>
        <button @click="closeAlert">关闭</button>
    </div>
</template>

<script>
    export default {
        name: "myalert",
        props:{
            visible:{
                type:Boolean,
                default:false
            }
        },
        methods:{
            closeAlert(){
                this.$emit('update:visible',false)
            }
        }
    }
</script>

这么写还是太麻烦了，但有了统一的规则，系统就可以帮我们自动生成不必要的代码，这就是sync修饰符的作用，它让写法更为简洁：

<!-- 父组件 -->
<template>
  <div id="app">
    <button @click="visible=true">点击</button>
    <my-alert :visible.sync="visible"></my-alert>
  </div>
</template>

<script>
import myalert from './components/myalert'
export default {
  name: 'App',
  components:{'my-alert': myalert},
  data(){
    return {
      visible:false
    }
  },

}
</script>


<!-- 子组件 -->
<template>
    <div class="cont" v-show="visible">
        <h2>这是一个对话框</h2>
        <button @click="closeAlert">关闭</button>
    </div>
</template>

<script>
    export default {
        name: "myalert",
        props:{
            visible:{
                type:Boolean,
                default:false
            }
        },
        methods:{
            closeAlert(){
                this.$emit('update:visible',false)
            }
        }
    }
</script>

 

2.prop

prop:设置自定义标签属性，编译后不会出现在html中，避免暴露数据，防止污染HTML结构

<input id="input" type="foo" value="11" :data="inputData"></input>
// 标签结构: <input id="input" type="foo" value="11" data="inputData 的值"></input>
// input.data === undefined
// input.attributes.data === this.inputData
 
<input id="input" type="foo" value="11" :data.prop="inputData"></input>
// 标签结构: <input id="input" type="foo" value="11"></input>
// input.data === this.inputData
// input.attributes.data === undefined

 

3.camel

camel:将命名变为驼峰命名法，只有props和.prop会默认将kebab-case转化为camelCase，剩下的作为attribute的不会。而.camel修饰符正是针对attribute的。如将view-Box属性名转换为 viewBox。

data() {
    return {
        msgText: 'aaa'
    }
}

<h2 :msg-text="msgText">原本</h2>
<!-- 编译后为<h2 msg-text="aaa">原本</h2> -->

<h2 :msg-text.camel="msgText">加camel修饰符</h2>
<!-- 编译后为<h2 msgtext="aaa">加camel修饰符</h2>,由于camel将msg-text转化为msgText,html中不区分大小写，所以会将大写都转化为小写，则最终结果为msgtext -->