vue入门篇之Vue.js 组件

简介: Vue.js 组件是该框架最强大的功能之一,能够扩展 HTML 元素并封装可重用的代码。通过组件系统,我们可以使用独立可复用的小组件来构建大型应用,几乎任何类型的应用的界面都可以抽象为一个组件树。

Vue.js 组件是该框架最强大的功能之一,能够扩展 HTML 元素并封装可重用的代码。

通过组件系统,我们可以使用独立可复用的小组件来构建大型应用,几乎任何类型的应用的界面都可以抽象为一个组件树。

全局组件能够被所有实例使用,注册全局组件的语法格式为:Vue.component(tagName, options),其中 tagName 是组件名,options 是配置选项。注册后,我们可以使用来调用组件。

局部组件只能在某个实例中使用,可以在实例选项中注册局部组件。注册局部组件的语法格式为:components: {'kxdang': Child},其中 'kxdang' 是组件名,Child 是组件定义。注册后,在实例的模板中可以使用来调用组件。

prop 是子组件用来接受父组件传递过来的数据的一个自定义属性。父组件的数据需要通过 props 把数据传给子组件,子组件需要显式地用 props 选项声明 prop。

使用 v-bind 动态绑定 props 的值到父组件的数据中,每当父组件的数据变化时,该变化也会传导给子组件。

为了定制 prop 的验证方式,组件可以为 props 指定验证要求,可以指定 prop 的类型、是否必填、默认值等信息,并可以自定义验证函数。当 prop 验证失败时,Vue 将会产生一个控制台的警告。

type 可以是下面原生构造器:String、Number、Boolean、Array、Object、Date、Function、Symbol。type 也可以是一个自定义构造器,使用 instanceof 检测。

相关文章
|
5月前
|
JavaScript 前端开发 CDN
总结 vue3 的一些知识点:Vue.js 安装
总结 vue3 的一些知识点:Vue.js 安装
|
12月前
|
JavaScript
04Vue - Vue.js 入门(用组件构建应用)
04Vue - Vue.js 入门(用组件构建应用)
53 0
|
5月前
|
JavaScript 前端开发 CDN
总结vue3 的一些知识点:Vue.js 安装
我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入。
|
5月前
|
JavaScript
总结vue3 的一些知识点:Vue.js 安装(下)
选取 Runoob,输出效果如下所示:
|
5月前
|
JavaScript 前端开发 开发者
VUE基础知识:什么是Vue.js?它的主要特点是什么?
VUE基础知识:什么是Vue.js?它的主要特点是什么?
99 0
|
5月前
|
XML JavaScript 前端开发
VUE基础知识:Vue.js和React的主要区别是什么?
VUE基础知识:Vue.js和React的主要区别是什么?
786 0
|
12月前
|
JavaScript
vue入门篇之Vue.js 组件
vue入门篇之Vue.js 组件
43 0
|
JavaScript 前端开发 小程序
Vue.js | Vue.js开发 初体验
Vue.js | Vue.js开发 初体验
|
Web App开发 缓存 JavaScript
前端(四)——vue.js、vue、vue2、vue3
前端(四)——vue.js、vue、vue2、vue3
2364 0
|
JavaScript 前端开发
Vue.js基础知识解析:Vue组件入门
Vue.js基础知识解析:Vue组件入门