事件修饰符

1. 点击按钮先出发按钮的点击事件再触发div的点击事件，这就是事件冒泡

<div class="inner" @click="divHandler">
    <input type="button" value="点击" @click="btnHandler">
</div>

methods:{
     divHandler(){
         console.log("触发inner div点击")
     },
     btnHandler(){
       console.log("触发按钮点击")
     },
}

2. .stop阻止冒泡，点击按钮只触发按钮点击事件，不在触发div点击事件

<input type="button" value="点击" @click.stop="btnHandler">

3. .prevent阻止默认事件，会触发链接点击事件但是不会再跳转

<a href="http://www.baidu.com" @click.prevent="linkClick">百度</a>

linkClick(){
  console.log("触发链接点击")
}

4. .capture添加事件侦听器时使用事件捕获模式，点击按钮时先触发div点击事件，再触发按钮点击事件

<div class="inner" @click.capture="divHandler">
    <input type="button" value="点击" @click.stop="btnHandler">
</div>

5. .self当事件在该元素本身（不是子元素）触发时触发回调，点击按钮不会触发div点击事件，只有点击div本身时才会触发

<div class="inner" @click.self="divHandler">
    <input type="button" value="点击" @click.stop="btnHandler">
</div>

6. .once事件只触发一次 ，触发时间后重复点击不会再次触发事件（只触发一次事件处理函数），事件修饰符可以串联，第二次点击会跳转链接到目标网页

<a href="http://www.baidu.com" @click.prevent.once="linkClick">百度</a>

7. .stop和.self的区别,.stop阻止所有冒泡行为.self只阻止自身冒泡行为的触发，并不会真正阻止冒泡行为

数据绑定

var tpp=new Vue({
    el:"#div1",
    data:{
        msg:'1234567'
    },
    methods:{}
})

1. v-bind只能实现数据单项绑定，更改文本框的内容后，msg并没有发生改变

<input type="text" :value="msg">

改变文本框内容

msg不改变

2. v-model双向数据绑定（v-model只能运用在表单元素中）， 绑定后改变文本框中的值，查询msg中的值，果然也发生了变化

<input type="text" v-model="msg">

改变文本框内容

msg改变

简易计算器案例

1. 使用v-model双向数据绑定所完成的简易计算器

<div id="div1">
    <input type="text" v-model="n1">
    <select v-model="opt">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
    </select>
    <input type="text" v-model="n2">
    <input type="button" value="=" @click="start">
    <input type="text" v-model="result">
</div>
<script>
    var jsq=new Vue({
        el:"#div1",
        data:{
            n1:0,
            n2:0,
            result:0,
            opt:'+',
    },
    methods:{
            start(){//计算器的算术方法
                switch (this.opt) {
                    case '+':
                        this.result=parseInt(this.n1)+parseInt(this.n2)
                        break;
                    case '-':
                        this.result=parseInt(this.n1)-parseInt(this.n2)
                        break;
                    case '*':
                        this.result=parseInt(this.n1)*parseInt(this.n2)
                        break;
                    case '/':
                        this.result=parseInt(this.n1)/parseInt(this.n2)
                        break;
                }
            }
    },
    })
</script>

计算器实例.png

2. eval强行解析字符串,star（）{}内可改为

var str='parseInt(this.n1)' + this.opt + 'parseInt(this.n2)'
this.result=eval(str)

vue中的class样式

1. 同时拥有两种样式

<h2 class="red italic">测试</h2>

2. 直接传递一个数组

<h2 :class="['red','italic']">测试</h2>

3. 使用三元表达式

<h1 :class="[flag?:'red']">test</h1>

flag:true

4. 数组中使用对象来代替三元表达式

<h1 :class="[{italic:false, red:true}]">test</h1>

<style>
            .red{
                color: red;
            }
            .italic{
                font-style: italic;
            }
        </style>