欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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>

更多文章,请关注博客