Vue学习笔记(三)

1 监听

在Vue.js中可以通过watch来监听数据的变化,比如通过watch实现的简单计数器:

计数器:{{count}}

var vm = new Vue({
    el: '#app',
    data:
    {
        count:0
    }
})

vm.$watch('count',function(newValue,oldValue)
{
    document.getElementById("info").innerHTML = "修改前:"+oldValue+"
修改后:"+newValue; })

效果如下:
Vue学习笔记(三)_第1张图片
watch有两个参数,一个是要监听的变量,另一个是回调函数,回调函数接受两个参数,第一个参数是新值,第二个参数是旧值。

下面再来看一下有关单位换算的例子:

吨: 千克:
吨:

千克:

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+"
修改后:"+newValue; }) vm.$watch('kilograms',function(newValue,oldValue) { document.getElementById("kilogramsInfo").innerHTML = "修改前:"+oldValue+"
修改后:"+newValue; })

Vue学习笔记(三)_第2张图片

2 样式绑定

classstyle是HTML元素的属性,用于设置元素的样式,可以利用v-bind来设置样式属性。v-bind在处理class以及style时专门增强了,表达式的结果类型除了是字符串外,还能是对象或者数组。

2.1 class绑定

可以为v-bind:class设置一个对象,从而动态切换class


vm = new Vue({
    el: '#app',
    data:
    {
        isActive:true
    }
})

也可以传入多个属性来动态切换多个class

.class0
{
    width:100px;
    height: 100px;
}
.class1
{
    background: green;
}
.class2
{
    background: red;
}
var vm = new Vue({
    el: '#app',
    data:
    {
        active1:true,
        active2:true
    }
})

效果:
Vue学习笔记(三)_第3张图片
也可以利用对象进行简化:

var vm = new Vue({
    el: '#app',
    data:
    {
        classObject:
        {
            class1:true,
            class2:true
        }
    }
})

2.2 计算属性

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

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'
            }
        }
    }
})

效果如下:
Vue学习笔记(三)_第4张图片

2.3 数组

也可以传递给v-bind:class一个数组,数组的元素为变量,变量的内容为对应的CSS类名:

var vm = new Vue({
    el: '#app',
    data: {
        active1:'class0',
        active2:'class1'
    }
})

也可以利用三元表达式来切换:

3 内联样式

可以在v-bind:style中直接设置样式(注意前后带{}):

测试
var vm = new Vue({
    el: '#app',
    data: {
        color:'#FF0000',
        fontSize:30
    }
})

当然也可以像绑定class一样直接绑定到一个对象上:

测试
var vm = new Vue({
    el: '#app',
    data: {
        styleObject: {
            color:'#FF0000',
            fontSize:'30px'
        }
    }
})

也可以使用数组进行绑定多个样式:

测试
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

这个按钮被点击了{{count}}次

var vm = new Vue({
    el: '#app',
    data: {
        count:0
    }
})

在这里插入图片描述
通常来说单击按钮会触发一个方法调用,在methods中指定即可:

var vm = new Vue({
    el: '#app',
    methods:{
        test:function(){
            alert('Hello')
            //event表示是原生DOM事件
            if(event) {
                alert(event.target.tagName)
            }
        }
    }
})

Vue学习笔记(三)_第5张图片
当然也可以使用内联的JS语句:

var vm = new Vue({
    el: '#app',
    methods:{
        say:function(val){
            alert(val)
        }
    }
})

4.2 事件修饰符

Vue为v-on提供了事件修饰符来处理DOM事件细节,如event.preventDefault()event.stopPropagation(),通过.表示的指令调用修饰符:

  • .stop:阻止事件冒泡
  • .prevent:提交事件不再重载页面,如
  • .capture:事件捕获模式
  • .self:只当事件在该元素本身(而不是子元素)触发时回调
  • .once:事件只能点击一次

4.3 按键修饰符

Vue允许在v-on在监听键盘事件时添加按键修饰提示符:


keyCode值对应ASCII表,为了方便,Vue为常用的按键提供了别名:

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

当然也可以进行按键的组合,使用.连接即可。
例子如下:


var vm = new Vue({
    el: '#app',
    methods:{
        spacePressed:function(){
            document.getElementById("info").innerHTML = "您按下了空格";
        },
        ctrlCPressed:function(){
            document.getElementById("info").innerHTML = "您按下了Ctrl+C";
        }
    }
})

你可能感兴趣的:(vue.js)