Vue之组件详解
程序员文章站
2024-03-15 10:43:41
...
Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。
Vue 只关注视图层, 采用自底向上增量开发的设计。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
组件使Vue功能更加强大
好处是: 1, 拓展HTML元素;2,封装
语法
Vue.component(tagName, options)
tagName 组件名, options 选项
用法: <tagName></tagName>
全局组件
<div id = "div1">
<tagName1></tagName1>
</div>
<script>
Vue.component
('tagname1',{ template:'<h1>我是Vue组件</h1>'}
)
new Vue({
el: "#div1"
})
</script>
细节点:
Html 不区分大小写
Vue 声明组件的时候务必使用小写
局部组件
<div id="app1">
<tagname></tagname>
</div>
<script>
var test = {
template : '<h2>hdkjahfjafha</h2>'
}
new Vue(
{
el: "#app1",
components : {
'tagname' : test
}
}
)
</script>
细节点:
templte 内容中的数据: 携标签名
Prop
<div id="app">
<child message="hello!"></child>
</div>
<script>
Vue.component(
'child',{
props : ['message'],
template : '<span>{{message}}</span>'
})
// 创建根实例
new Vue({
el: '#app'
})
</script>
动态Prop
<div id="app">
<div>
<input v-model="parentMsg">
<br>
<child v-bind:message="parentMsg"></child>
</div>
</div>
<script>
// 注册
Vue.component('child', {
// 声明 props
props: ['message'],
// 同样也可以在 vm 实例中像 “this.message” 这样使用
template: '<span>{{ message }}</span>'
})
// 创建根实例
new Vue({
el: '#app',
data: {
parentMsg: '父组件内容'
}
})
</script>
Prop验证
Vue.component('example', {
props: {
// 基础类型检测 (`null` 意思是任何类型都可以)
propA: Number,
// 多种类型
propB: [String, Number],
// 必传且是字符串
propC: {
type: String,
required: true
},
// 数字,有默认值
propD: {
type: Number,
default: 100
},
// 数组/对象的默认值应当由一个工厂函数返回
propE: {
type: Object,
default: function () {
return { message: 'hello' }
}
},
// 自定义验证函数
propF: {
validator: function (value) {
return value > 10
}
}
}
})
自定义事件
<div id="app">
<div id="counter-event-example">
<p>{{ total }}</p>
<button-counter v-on:increment="incrementTotal"></button-counter>
<button-counter v-on:increment="incrementTotal"></button-counter>
</div>
</div>
<script>
Vue.component('button-counter', {
template: '<button v-on:click="incrementHandler">{{ counter }}</button>',
data: function () {
return {
counter: 0
}
},
methods: {
incrementHandler: function () {
this.counter += 1
this.$emit('increment')
}
},
})
new Vue({
el: '#counter-event-example',
data: {
total: 0
},
methods: {
incrementTotal: function () {
this.total += 1
}
}
})
</script>
更多文章,请关注博客
上一篇: vue组件for循环无效果的原因之一
下一篇: servlet跳转