Vue.js入门用法2

一、过滤器

1.作用：实现文本格式化

2.创建：1.Vue.filter()：创建全局过滤器 -- 所有组件可用，必须在实例化之前注册

Vue.filter("过滤器名",(val[,arg...])=>{  //val是待过滤的值,arg是其他参数 
    return v;  //过滤之后的值
})

2.filters：实例选项，创建局部过滤器 -- 当前实例可用

filters:{
    过滤器名:function(val[,arg...]){return v}
}

3.调用：

在{{}}中使用
1.{{val | 过滤器名}}
2.{{val | 过滤器1 | 过滤器2...}}
3.{{val | 过滤器名(arg)}}  --  arg作为过滤器函数的第二个参数,依次类推
在v-bind中使用
4.<div v-bind:title="val | 过滤器">

二、事件处理

1.事件绑定：v-on

2.语法格式：

<!--绑定事件-->
<input type="button" value="计数器" v-on:click="counts">
<!--绑定事件(简写)-->
<input type="button" value="计数器" @click="counts">
<!--绑定事件(简写+动态事件-c是实例里data中定义的变量)-->
<input type="button" value="计数器" @[c]="counts">
<!--绑定事件(传参)-->
<input type="button" value="计数器" @click="counts2(123,$event)">
<!--绑定事件(修饰符:阻止默认行为+事件处理函数)-->
<a href="filter.html" @click.prevent="counts">过滤器</a>
<!--绑定事件(修饰符:阻止默认行为+省略事件处理函数)-->
<a href="filter.html" @click.prevent>过滤器</a>
<!--绑定事件(键盘事件+按键码作为修饰符-event.key)-->
<input type="text" @keydown.w="counts">
<!--错误:不能直接在事件绑定中写js代码-->
<!-- <input type="button" value="点击" @click="alert(666)"> -->

3.注意：1.事件如果没有传参，默认参数为event

2.多个修饰符可直接使用.连接

3.按键码作为修饰符时，需要转换为kebab-case

三、样式处理

1.样式绑定：v-bind

2.class绑定：1.对象格式

<div :class="{active:true,active2:isActive,[className]:isTrue}"></div>
active,active2是固定class名；className是动态class名
规则：对象的属性值为真时应用class

2.数组格式

<div :class="['active',class2,{class3:isTrue},true ? class4 : class5]">
规则：将数组中的样式全部应用到元素上

3.style绑定：1.对象格式

<div :style="{color:'red','font-size':'12px',fontWeight:'bold',[sname]:sval,background}"></div>
规则：对象的属性名就是css属性名;
     对象属性对应的值就是css属性值

2.数组格式

<div :style="[{color:'red'},styleObj]"></div>

四、组件基础

1.定义：可复用的vue实例，并且都有一个名字

2.组件注册：1.全局注册：应用在注册之后所有新创建的根实例及子组件中

Vue.component("component-name",{//options-选项对象})

2.局部注册：应用在当前组件中

components:{
    "component-name":{//options}
}
注意：组件名最好按kabeb-case方式命名，也可以使用大驼峰命名，但是DOM中只能用kabeb-case方式调用

3.组件选项：1.template：实例的模板

{
    //template:"<h1></h1>",  //直接使用html字符串作为模板
    template:"#tem",  //匹配页面中template id为tem中的innerHTML作为模板
    data:function(){
        return {}
    },
    components:{
        "component-name":{}
    }
}
注意：template只能有一个根元素

2.data：必须是一个函数，返回一个数据对象

3.components：注册子组件

4.props：用来接收父传递的属性值

五、组件传值

1.父传子：props传值

1.父
<child-component msg="hello" :msg2="val" :num="1"></child-component>
2.子
props:["msg","msg2"]  -- 只是接收值
props:{  -- 接收值并做验证
    msg:String,
    msg2:{
        type:Number, //限制类型
        default:1,  //当父没有传递这个值时显示默认值
        required:true, //是否必填
        //验证这个值
        validator:function(v){return true/false}
    }
}
注意：1.父传子值默认为string,如果需要传递的值的静态类型，则需要使用v-bind传递
     2.单向数据流：子组件中不能更改父传递的值

2.子传父：父能够监听子组件的自定义事件；父能够监听自身的自定义事件

//1.触发自定义事件
vm.$emit("event-name"[,arg...]);  //arg就是参数
//2.监听自定义事件
<component v-on:event-name="doThis"></component>--组件可以直接监听
vm.$on("event-name",function([val...]){
    //val就是自定义事件中传递的arg参数
})
vm.$once()：只监听一次自定义事件
vm.$off()：移除监听器函数

六.兄弟传值：子传父，父传子