Vue常用属性和事件修饰符

Vue指令v-on的缩写和事件修饰符

事件修饰符：

• .stop 阻止冒泡
• .pervent 阻止默认事件
• .capture  添加事件监听器时使用事件捕获模式
• .self  只有点击当前元素时候，才会触发事件处理函数
• .once   事件只触发一次

.stop  和  .self  的区别

• .stop    阻止冒泡 
• .self  只会阻止自己身上冒泡行为的触发   并不会真正阻止 冒泡的行为

Vue指令v-model和数据双向绑定

• v-model 只能运用在表单元素中
• input(radio,text,address,email....) select checkbox textarea
• v-bind只能能实现数据的单向绑定。从 M 自动绑定到 V，无法实现数据的双向绑定

v-model实例 计算器

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 

vue代码

<script>
        var vm = new Vue({
            el: '#app',
            data: {
                n1: 0,
                n2: 0,
                result: 0,
                opt: '+'
            },
            methods: {
                calc() {  //计算机算术方法

                    var codeStr = 'parseInt(this.n1)' + this.opt + 'parseInt(this.n2)'
                    this.result = eval(codeStr)
                    //逻辑
                    // 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>

Vue中的样式

使用class样式

1. 直接传递一个数组，注意：这里的class需要使用 v-bind 做数据绑定 <h1 :class="['pink','thin']">Class类样式!!</h1>
2. 在数组中实现三元表达式 <h1 :class="['pink','thin',flag?'active':'']">Class类样式!!</h1>
3. 在数组中使用 对象来替代三元表达式，提高代码的可读性 <h1 :class="['pink','thin'，{'active':flag}]">Class类样式!!</h1> 4.在为 class 使用 v-bind 绑定 对象的时候 ，对象的属性是类名， 对象的属性可带引号，也可不带引号。属性的值是一个标识符 <h1 :class="{pink:true,thin:true,italic:false,active:false}">Class类样式!!</h1>

使用style样式

直接在元素上通过 :style 的形式，书写样式对象 <h1 :style="{color:'pink','font-size':200}">H1H1H1H1H1H1H1</h1> 将样式对象，定义到 data 中，并直接引用到 :style 中 data:{ styleObj1:{color:'pink','font-size':200} <h1 :style="styleObj1">H1H1H1H1H1H1H1</h1> :style 通过数组，引用多个 data 上的样式 data:{ styleObj1:{color:'pink','font-size':200}, styleObj2:{'font-style':'italic'} }, <h1 :style="styleObj1,styleObj2">H1H1H1H1H1H1H1</h1>

v-for指令

• v-for指令的作用是：根据数据生成列表结构
• 数据经常和 v-for结合使用
• 语法是(item,index)in数据
• item和index 可以结合其他指令一起使用
• 数组长度的更新会同步到页面上，是响应的

v-on指令

• 事件绑定的方法写成函数调用的形式，可以传入自定义参数
• 定义法方式需要定义性形参来接收传入的实参
• 事件的后面跟上 .修饰符可以对事件进行限制
• .enter 可以限制触发的按键为回车
• 时间修饰符有多种

v-show指令

• v-show指令的作用是：根据真假切换元素的显示状态
• 原理是修改元素的display,实现显示隐藏
• 指令后面的内容，最终都会为布尔值
• 值为true元素显示，值为false元素隐藏
• 数据改变之后，对应元素的显示状态会同步更新

v-if指令

v-if指令的作用是：根据表达式的真假切换元素的显示状态 本质是通过操纵dom元素来切换显示状态 表达式的值为true，元素存在于dom树中，为false,从dom树中移除 频繁的切换v-show，反之使用 v-if ,前者的切换消耗小