Vue学习(二)

2019-04-27 本文已影响0人 ALEX朱先生

二、Vue

1.Data属性

2.Props属性

父子组件

在父组件中定义数据

在使用组件式,绑定父组件中的数据

在子组件中通过props属性声明父组件中传递过来的参数

在template属性中使用父组件中的参数

3.props校验

type: 指定数据类型 String Number Object ...注意不能使用字符串数组，只能是对象大写形式

txt1:[Number,String],//可以支持多个

txt2:String,

required: 指定是否必定输入

txt3:{

required:true,

type:String

},

default: 给默认值或者自定义函数返回默认值

txt4:{

default:100

},

如果不输入就会返回这个默认值

validator: 自定义函数校验

validator:function (value) {

return value>10

}

4.非props属性

在template中设置属性

template:"<span class='test' style='color: red'>红色</span>"

属性采用就近原则,在标签中的属性比非props属性,优先级高

5.自定义事件

5.1声明父组件

5.2自定义事件

5.3自定义子组件

5.4主动挂载

自定义事件不仅

$on

$emit

6.插槽分发

6.1 slot插槽

子组件插槽

<slot>插槽</slot>

6.2 具名插槽

利用name属性来具体赋值并使用

<h3 slot="header">我好帅</h3>

<slot name="header">如果没有传递数据,默认显示这段文本</slot>

6.3 插槽作用域slot-space

普通

解构赋值

7.动态组件

7.1. 使用方式

7.2 keep-alive

7.3 refs属性

8.数据处理

8.1watch属性

8.2$watch

8.3computed属性

computed和methods定义

计算时用computed

计算属性使用时不加括号

计算属性是基于他们的缓存,效率较高

8.4getter和setter

getter

getter获取值

setter

setter输入值

9.生命周期

实例创建 > 实例挂载 > 实例将要更新 >实例已更新 > 调用方法 > 实例写在

10.自定义指令

10.1基本使用

定义

Vue.directive('focus',{

//当绑定元素插入到 DOM 调用

inserted: function (el) { //元素获取焦点

el.focus();

}

});