Vue.js学习笔记（二）

计算属性：computed

<div id="app">
    <p>{{message}}</p>
    <p>{{reserveMess}}</p>
</div>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            message:"root"
        },
        computed:{
            reserveMess : function(){
            return this.message.split('').reverse.join('');
            }
        }   
    })
</script>

上面的例子中声明了一个计算属性 reversedMessage 。

提供的函数将用作属性 vm.reversedMessage 的 getter。

vm.reversedMessage 依赖于 vm.message，在m.message 发生改变时，vm.reversedMessage 也会更新。

computed VS methods

我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。

computed属性默认只有getter,不过在需要时候可以给computed提供setter :

var vm = new Vue({
    el: '#app',
    data: {
    name: 'Google',
    url: 'http://www.google.com'
    },
    computed: {
        site: {
            // getter
            get: function () {
                return this.name + ' ' + this.url
            },
            // setter
            set: function (newValue) {
                var names = newValue.split(' ')
                this.name = names[0]
                this.url = names[names.length - 1]
            }
        }
    }
})
// 调用 setter， vm.name 和 vm.url 也会被对应更新
vm.site = '百度 http://www.baidu.com';
document.write('name: ' + vm.name);
document.write('<br>');
document.write('url: ' + vm.url);

在运行 vm.site = '百度 http://www.baidu.com'; 时，setter 会被调用，vm.name 和 vm.url 也会被对应更新。（因为computed 是基于它的依赖缓存，相关依赖发生改变时就会重新取值。）

监听属性：watch

<div id="app">
    <input type = "text" v-model = "kilometers">
    <input type = "text" v-model = "meters">
</div>
<p id = "info"></p>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            kilometers:0,
            meters:0
        },
        methods:{
        },
        computed:{
        },
        watch:{
            //检测kilometers和meters 在发生变化时执行后面的函数
            kilometers:function(val){
                this.kilometers = val;
                this.meters = val * 1000;
            },
            meters:function(val){
                this.meters = val;
                this.kilometers = val/1000;
            }
        }
    });
    //$watch 是一个实例，
    vm.$watch('kilometers',function(newVal,oldVal）{
        document.getElement('info').innerHTML = "修改前："+oldVal+" 修改后："+newVal;
    })
</script>

data 属性中， kilometers 和 meters 初始值都为 0。
watch 对象创建了两个方法 kilometers 和 meters。
当我们再输入框输入数据时，watch 会实时监听数据变化并改变自身的值。

vue属性的绑定：v-bind

Vue.js v-bind 在处理 class 和 style 时， 专门增强了它。
表达式的结果类型除了字符串之外，还可以是对象或数组。

class属性的绑定：

1.

.claName{
//一堆样式
}
<div id = "app" v-bind:class="{ claName: show }"></div>
<script>
new Vue({
    el:"#app",
    data:{
        show:true
    }
});
</script>

当show为true时显示出claName的样式，以上实例为：

2.

.claN1{
    //...
}
.cla-N{
    //...
}

<div id="app" v-bind:class="{claN1:show,'cla-N':false}"></div>

new Vue({
    el:'#app',
    data:{
        show:true,
        noshow:false
    }
})

class类名带’-‘则用“’”引起来，根据类名后的值，决定是否显示该类的样式，
同级class越往后 优先级越高

3.
绑定一个对象：

<div id="app" v-bind:class="claObj"></div>

.claN1{}
.cla-N{}

new Vue({
    el:'#app',
    data:{
        claObj:{
            claN1:true,
            'cla-N':true
        }
    }
})

4.
绑定返回对象的计算属性：

<div id="app" v-bind:class="claObj"></div>

.claN1{}
.cla-N{}

new Vue({
    el:'#app',
    data:{
        isActive:true,
        error:{
            type:'fatal'
        }
    },
    computed:{
        claObj:function(){
            return {
                claN1 : this.isActive && this.error,
                'cla-N': this.error && this.error.type === 'fatal'
            }
        }
    }
})  

5.
利用数组：

.claN1{}
.claN2{}

<div id="app" v-bind:class="['claN1',''claN2']"></div>

new Vue({
    el:'#app',
    data:{
        aC:'claN1',
        er
    }
})

6.errClass 始终存在，在isActive为true时添加actClass：

.class1{}
.class2{}

<div id="app">
    <div v-bind:class="[errClass,isActive?actClass:'']"></div>
</div>

<script>
    new Vue({
        el:'#app',
        data:{
            isActive:true,
            actClass:class1,
            errClass:class2
        }
    })
</script>

7.添加内联样式：

<div id="app">
    <div v-bind:style="{color:actColor,fontSize:actFont/+'px'}"></div>
</div>

new Vue({
    el:'#app',
    data:{
        actColor:'red',
        fontSize:'30px'/30
    }
})

8.内联样式 用数组：

">    <div v-bind:style="[baseStyles,overStyles]"></div>
</div>

new Vue({
    el:'#app',
    data:{
        baseStyles:{
            fontsize:'10px',
            coloe:'red'
        },
        overStyles:{
            'font-weight':'bold'
        }
    }
})

1.v-bind动态绑定指令，默认情况下标签自带属性的值是固定的，在为了能够动态的给这些属性添加值，可以使用v-bind:你要动态变化的值=”表达式”

2:v-bind用于绑定属性和数据 ，其缩写为” : ” 也就是
v-bind:id === :id

3:v-model用在表单控件上的，用于实现双向数据绑定，所以如果你用在除了表单控件以外的标签是没有任何效果的。