- props属性验证
- 常用形式:
props: {
key: keyType // key是从父组件获得的自定义属性, 值是我们期望得到的数据类型
}
- 业务:我现在想要 > 1000 我才要, 没有 > 1000 我就不要
- 解决: vue提供了一个 :validator
props: {
key: {
validator( value ){
return value 的条件
}
}
}
- 不常用形式
props: {
propA: [],
propB: {
type: String,
require: true
},
propC: {
type:String,
default: 'yyb'
},
propD: {
type: String,
default: function(){
return 'yyb'
}
}
}
- 有时候有的项目总也会使用一个叫做 vue-validate validate这些第三方库
- 过滤器
- vue 1.x版本一共提供了10个过滤器, 但是不满足人们使用,vue2.x全部不提供了, 交给开发者自己写
- 但是vue提供饿了定义过滤器的方式
- 过滤器: 对数据进行格式化的一个函数
- 过滤器可以用在两个地方:双花括号插值和 v-bind 表达式
- 过滤器用给一个 ’ | ’ 表示, 我们称之为 ‘管道符’
动态组件
- 动态组件就是 component组件 , 组件身上可以绑定一个is属性, 用来表示某一个组件
<body>
<div id="app">
<keep-alive>
<component is = "B"></component> <!-- 直接conponent is绑定 -->
</keep-alive>
</div>
</body>
<script>
new Vue({
el: '#app',
components: {
"A": { //定义模板
template: '<div> A </div>'
},
"B": {
template: '<div> B </div>'
}
}
})
</script>
数据的切换
<body>
<div id="app">
<button @click = 'type = type === "A"?"B":"A"'> 切换 </button>
<component :is = "type"></component>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
type: 'A'
},
components: {
"A": {
template: '<div> A </div>'
},
"B": {
template: '<div> B </div>'
}
}
})
</script>
v-if写法
<body>
<div id="app">
<button @click = 'f = !f'> 切换 </button>
<my-a v-if = "f"></my-a>
<my-b v-else></my-b>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
type: 'A',
f: true
},
components: {
"MyA": {
template: '<div> A </div>'
},
"MyB": {
template: '<div> B </div>'
}
}
})
</script>
不常用的指令
v-text
v-html ----- - 都是用来将数据插入DOM中, 但是v-html可以解析标签类型数据
- v-cloak 解决 {{}} 语法短暂原样输出
- v-pre 原样输出
- v-once 只渲染一次
<body>
<div id="app">
<h3> v-text </h3>
<p> {{ msg }} </p>
<p v-text = "msg"></p>
<div v-text = "title"></div>
<h3> v-html </h3>
<div v-html = "title"></div>
<div v-html = "msg"></div>
<h3> v-pre </h3>
<p v-pre>
{{ msg }}
</p>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
msg: 'hello vue.js',
title: '<h3> hello title </h3>'
}
})
</script>