vue 事件修饰符，v-model指令,简易计算器

1.事件修饰符

使用 .stop 阻止事件冒泡

<div class="inner" @click="div1Handler">     
        <input type="button" value="戳他" @click.stop="btnHandler"> 
</div>

 

使用  .capture 实现捕获触发事件的机制

<div class="inner" @click.capture="div1Handler">     
        <input type="button" value="戳他" @click.stop="btnHandler">
</div>

 

使用 .self 实现只有点击当前元素的时候，才会触发事件处理函数

 <div class="inner" @click.self="div1Handler">     
        <input type="button" value="戳他" @click.stop="btnHandler">
 </div>

 使用 .once只触发一次事件处理函数

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

.stop 和 .self 的区别

.self只会阻止自身冒泡行为的触发 ，并不会真正阻止 冒泡行为

 <div class="outer" @click="div2Headler">
        <div class="inner" @click="div1Handler">
            <input type="button" value="戳他" @click.stop="btnHandler">
        </div>    
        </div>

 <div class="outer" @click="div2Headler">
            <div class="inner" @click.self="div1Handler">
                <input type="button" value="戳他" @click="btnHandler">
            </div>
        </div>

JS

var vm = new Vue({
            el: "#app",
            data: {},
            methods: {
                div1Handler() {
                    console.log('这是触发了 inner div的点击事件');
                },
                btnHandler() {
                    console.log('这是触发了 btn按钮的点击事件');
                },
                linkClick() {
                    console.log('触发了连接的点击事件');
                },
                div2Headler() {
                    console.log('这是触发了 outer div的点击事件');
                }
            }
        });

 

 2.v-model指令

v-bind 只能实现数据的单向绑定，从 M 自动绑定到 V ，无法实现数据的双向绑定

 <input type="text" :value="msg" style="width: 100%;">

 

使用 v-model 指令，可以实现 表单元素和 Model 中数据的双向绑定

v-model 只能运用在 表单元素中

例：input(text,radio,address,email.... ) select checkbox  textarea  

 <input type="text" style="width: 100%;" v-model="msg">

 

JS

var vm=new Vue({
               el:"#app",
               data:{
                   msg:'大家都是好学生，爱敲代码，爱学习' 
               },
               methods:{

               }
           })

 

3.实现一个简易计算器

HTML代码

<div id="app">
        <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="calc">
        <input type="text" v-model="result">
    </div>

 

JS代码

<script>
        var vm = new Vue({
            el: "#app",
            data: {
                n1: 0,
                n2: 0,
                result: 0,
                opt: '+'
            },
            methods: {
                calc() { //计算器算数的方法
                    // 逻辑：
                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;
                    }  
                    
                    //投机取巧的方式，正式开发中，尽量少用
                  //  var codeStr='parseInt(this.n1)' +this.opt +'parseInt(this.n2)';
                   // this.result=eval(codeStr)

                }

            }
        })
    </script>