Vue.js暑假学习心得二

Vuejs有六个选项:data,props,propsData,computed,methods,watch，

Methods

其中methods用于将事件与某个方法绑定后在methods里定义方法，methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。

事件修饰符

在事件处理器上，Vue.js为v-on提供了几个事件修饰符，在使用时事件修饰符可以串联如

<a v-on:click.stop.prevent="doThat">

也可以只有修饰符不绑定事件

<form v-on:submit.prevent></form>

事件修饰符里面 .prevent用来阻止事件的默认行为 .stop用来阻止事件冒泡 .capture表示添加事件侦听器时采用capture捕获模式，.self表示只当事件在该元素本身触发时触发回调。

此外Vue.js可以为v-on添加键盘修饰符用以监听键盘事件

<input v-on:keyup.13="submit">

 

在keyCode为13时调用vm.submit(),  Vue.js也为常用的按键提供了别名

Props

props 可以是数组或对象，用于接收来自父组件的数据。props 可以是简单的数组，或者使用对象作为替代，对象允许配置高级选项，如类型检测、自定义校验和设置默认值。

类似于用v-bind将HTML特性绑定到一个表达式，也能用其将动态props绑定到父组件的数据，每当父组件的数据变化时，该变化也会传导给子组件

var Child=Vue.extend({
    //声明props
    props:['didiPorps'],
    template:'<div>{{didiProps}}DDFE!</div>',
    replace:true
})
var Parent=Vue.extend({
    template:'<p>i am parent</p><br/><child :didi-props="hello'></child>',
    data:function(){
        return{'hello':'hello,'}
    },
    components:{
        'child':Child
    }
})
new Vue({
    el: '#example',
    components:{
        'didi-props':Parent
    }
})

绑定修饰符

props默认是单向绑定，当父组件的属性变化时将传导给子组件，反过来不会，这是为了防止子组件无意修改父组件的状态，不过也可以使用绑定修饰符

.sync双向绑定 .once单次绑定

双向绑定会把子组件的msg属性同步回父组件的parentMsg属性，单次绑定在建立之后不会同步之后的变化

此外props还可以用来认证

props&propsData&data

props用于父子组件之间的数据传递，data用于开发组件或实例化Vue对象时经常使用，propsData这个属性则常用来在组件初始化后覆盖props中的属性

Computed

对于任何复杂逻辑，都应当使用计算属性，在computed里定义相关计算方法，再在HTML里引用