乐趣区

关于vue.js:Vue学习笔记三

jiezi

1 监听

在 Vue.js 中能够通过 watch 来监听数据的变动，比方通过 watch 实现的简略计数器：

<div id="app">
    <p> 计数器：{{count}}</p>
    <button @click="count++"> 点我减少 </button>
    <p id="info"></p>
</div>
var vm = new Vue({
    el: '#app',
    data:
    {count:0}
})

vm.$watch('count',function(newValue,oldValue)
{document.getElementById("info").innerHTML = "批改前："+oldValue+"<br> 批改后："+newValue;
})

成果如下：

watch有两个参数，一个是要监听的变量，另一个是回调函数，回调函数承受两个参数，第一个参数是新值，第二个参数是旧值。

上面再来看一下无关单位换算的例子：

<div id="app">
    吨：<input type="text" v-model="ton">
    千克：<input type="text" v-model="kilograms"><br>
    吨：<p id="tonInfo"></p>
    千克：<p id="kilogramsInfo"></p>
</div>
var vm = new Vue({
    el: '#app',
    data:
    {
        ton:0,
        kilograms:0
    },
    watch:
    {ton:function(val)
        {this.kilograms = (this.ton = val) * 1000;
        },
        kilograms:function(val)
        {this.ton = (this.kilograms = val) / 1000;
        }
    }
})

vm.$watch('ton',function(newValue,oldValue)
{document.getElementById("tonInfo").innerHTML = "批改前："+oldValue+"<br> 批改后："+newValue;
})
vm.$watch('kilograms',function(newValue,oldValue)
{document.getElementById("kilogramsInfo").innerHTML = "批改前："+oldValue+"<br> 批改后："+newValue;
})

2 款式绑定

class与 style 是 HTML 元素的属性，用于设置元素的款式，能够利用 v-bind 来设置款式属性。v-bind在解决 class 以及 style 时专门加强了，表达式的后果类型除了是字符串外，还能是对象或者数组。

2.1 class绑定

能够为 v-bind:class 设置一个对象，从而动静切换class：

<style>
    .active
    {
        width:100px;
        height: 100px;
        background: green;
    }
</style>
<div id="app">
    <div v-bind:class="{'active':isActive}"></div>
</div>
vm = new Vue({
    el: '#app',
    data:
    {isActive:true}
})

也能够传入多个属性来动静切换多个class：

.class0
{
    width:100px;
    height: 100px;
}
.class1
{background: green;}
.class2
{background: red;}
<div id="app">
    <div class="class0" v-bind:class="{'class1':active1,'class2':active2}"></div>
</div>
var vm = new Vue({
    el: '#app',
    data:
    {
        active1:true,
        active2:true
    }
})

成果：

也能够利用对象进行简化：

<div id="app">
    <div class="class0" v-bind:class="classObject"></div>
</div>
var vm = new Vue({
    el: '#app',
    data:
    {
        classObject:
        {
            class1:true,
            class2:true
        }
    }
})

2.2 计算属性

在 v-bind:class 中除了是一个对象还能绑定返回对象的计算属性，比方：

<div id="app">
    <div v-bind:class="classObject"></div>
</div>
var vm = new Vue({
    el: '#app',
    data:
    {
        active1:true,
        error:{
            value:true,
            type:'fatal'
        }
    },
    computed:{classObject:function() {
            return {
                class0:true,
                class1: this.active1 && !this.error.value,
                class2: this.error.value && this.error.type === 'fatal'
            }
        }
    }
})

成果如下：

2.3 数组

也能够传递给 v-bind:class 一个数组，数组的元素为变量，变量的内容为对应的 CSS 类名：

<div id="app">
    <div v-bind:class="[active1,active2]"></div>
</div>
var vm = new Vue({
    el: '#app',
    data: {
        active1:'class0',
        active2:'class1'
    }
})

也能够利用三元表达式来切换：

<div id="app">
    <div v-bind:class="[active1,active2 ?'class1':'class2']"></div>
</div>

3 内联款式

能够在 v-bind:style 中间接设置款式（留神前后带{}）：

<div id="app">
    <div v-bind:style="{color:color,fontSize:fontSize+'px'}"> 测试 </div>
</div>
var vm = new Vue({
    el: '#app',
    data: {
        color:'#FF0000',
        fontSize:30
    }
})

当然也能够像绑定 class 一样间接绑定到一个对象上：

<div id="app">
    <div v-bind:style="styleObject"> 测试 </div>
</div>
var vm = new Vue({
    el: '#app',
    data: {
        styleObject: {
            color:'#FF0000',
            fontSize:'30px'
        }
    }
})

也能够应用数组进行绑定多个款式：

<div id="app">
    <div v-bind:style="[styleObject1,styleObject2]"> 测试 </div>
</div>
var vm = new Vue({
    el: '#app',
    data: {
        styleObject1: {color:'#FF0000',},
        styleObject2:{fontSize:'30px'}
    }# 5 
})

另外当 v-bind:style 须要非凡前缀的 CSS 时，比方transform，Vue 会主动侦测并增加相应前缀。

4 事件处理

4.1 v-on

事件监听能够应用v-on：

<div id="app">
    <button v-on:click="count += 1"> 点击减少 1 </button>
    <p> 这个按钮被点击了 {{count}} 次 </p>
</div>
var vm = new Vue({
    el: '#app',
    data: {count:0}
})


通常来说单击按钮会触发一个办法调用，在 methods 中指定即可：

<div id="app">
    <button v-on:click="test"> 点击触发事件 </button>
</div>
var vm = new Vue({
    el: '#app',
    methods:{test:function(){alert('Hello')
            //event 示意是原生 DOM 事件
            if(event) {alert(event.target.tagName)
            }
        }
    }
})


当然也能够应用内联的 JS 语句：

<div id="app">
    <button v-on:click="say('hi')">Say hi</button>
    <button v-on:click="say('what')">Say what</button>
</div>
var vm = new Vue({
    el: '#app',
    methods:{say:function(val){alert(val)
        }
    }
})

4.2 事件修饰符

Vue 为 v-on 提供了事件修饰符来解决 DOM 事件细节，如 event.preventDefault() 或event.stopPropagation()，通过 . 示意的指令调用修饰符：

  • .stop：阻止事件冒泡
  • .prevent：提交事件不再重载页面，如<form v-on.submit.prevent="onSumbit"></form>
  • .capture：事件捕捉模式
  • .self：只当事件在该元素自身（而不是子元素）触发时回调
  • .once：事件只能点击一次

4.3 按键修饰符

Vue 容许在 v -on 在监听键盘事件时增加按键润饰提示符：

<!-- 只有 keyCode 为 13 时调用 submit()-->
<input v-on:keyup.13="submit">

keyCode 值对应 ASCII 表，为了不便，Vue 为罕用的按键提供了别名：

  • .esc
  • .delete（删除 + 退格）
  • .enter/.space/.tab
  • .up/.down/.left/.right
  • .ctrl/.alt/.shift/.meta

当然也能够进行按键的组合，应用 . 连贯即可。
例子如下：

<div id="app">
    <input type="text" placeholder="请按下空格" v-on:keyup.space="spacePressed"><br>
    <input type="text" placeholder="请按下 Ctrl+C" v-on:keyup.ctrl.67="ctrlCPressed">
    <!-- <input type="text" placeholder="请按下 Ctrl+C" @keyup.ctrl.67="ctrlCPressed"> -->
    <p id="info"></p>
</div>
var vm = new Vue({
    el: '#app',
    methods:{spacePressed:function(){document.getElementById("info").innerHTML = "您按下了空格";
        },
        ctrlCPressed:function(){document.getElementById("info").innerHTML = "您按下了 Ctrl+C";
        }
    }
})
退出移动版