一、引子

Vue两大核心:

1.数据驱动界面改变
2.组件化

二、组件、组件化

1.什么是组件? 什么是组件化?

在前端开发中组件就是把一个很大的界面拆分为多个小的界面, 每一个小的界面就是一个组件

将大界面拆分成小界面就是组件化

2.组件化的好处

2.1 可以简化Vue实例的代码
2.2 可以提高复用性

3.创建全局组件

3.1创建组件构造器
3.2注册已经创建好的组件
3.3使用注册好的组件

Vue-component

// 注册组件，传入一个扩展过的构造器
Vue.component('my-component', Vue.extend({ /* ... */ }))// 注册组件，传入一个选项对象 (自动调用 Vue.extend)
Vue.component('my-component', { /* ... */ })// 获取注册的组件 (始终返回构造器)
var MyComponent = Vue.component('my-component')

方法一：
注册组件，传入一个扩展过的构造器
Vue.component(‘my-component’, Vue.extend({ /* … */ }))

<div id="app"><!--// 3.3使用注册好的组件--><abc></abc>
</div>
<script>// 3.1创建组件构造器let Profile = Vue.extend({// 注意点: 在创建组件指定组件的模板的时候, 模板只能有一个根元素template: `<div><img src="data:images/fm.jpg"/><p>我是描述信息</p></div>`});// 3.2注册已经创建好的组件// 第一个参数: 指定注册的组件的名称// 第二个参数: 传入已经创建好的组件构造器Vue.component("abc", Profile );// 这里就是MVVM中的View Modellet vue = new Vue({el: '#app',// 这里就是MVVM中的Modeldata: {},// 专门用于存储监听事件回调函数methods: {},// 专门用于定义计算属性的computed: {}});
</script>

3.1 创建组件的其它方式

1 在注册组件的时候, 除了传入一个组件构造器以外, 还可以直接传入一个对象
2 在编写组件模板的时候, 除了可以在字符串模板中编写以外, 还可以像过去的art-template一样在script中编写
3 在编写组件模板的时候, 除了可以在script中编写以外, vue还专门提供了一个编写模板的标签template

方法二：
注册组件，传入一个选项对象 (自动调用 Vue.extend)
Vue.component(‘my-component’, { /* … */ })

 let obj = {// 模板template: `<div><div>这是obj</div></div>`
}
// 注册以及创建好的组件
Vue.component('my-component', obj)

// 注册以及创建好的组件
Vue.component('my-component', {// 模板template: `<div><div>这是obj</div></div>`
})

不专业的写法

  <script id="info1" type="text/html"><div><p>wwww</p><div>nnnnn</div></div></script><script>// 注册以及创建好的组件Vue.component('my-component', {template:"#info1"})// 使用注册了的组件let VM = new Vue({el: "#app",data: {},methods: {},components: {}})</script>

template

 <template id="info2"><div><p>wwww111</p><div>nnnnn111</div></div></template><script>// 注册以及创建好的组件Vue.component('my-component', {template:"#info2"})// 使用注册了的组件let VM = new Vue({el: "#app",data: {},methods: {},components: {}})</script>

3.2 自定义全局组件特点

在任何一个Vue实例控制的区域中都可以使用

4.创建局部组件

4.1 自定义局部组件特点

只能在自定义的那个Vue实例控制的区域中可以使用

4.2 创建

在vue实例中新增

components: {}

在 {} 中通过key/vue形式注册组件

components:{abc: {}
}

    <template id="info2"><div><p>wwww111</p><div>nnnnn111</div></div></template><script>let VM = new Vue({el: "#app",data: {},methods: {},components: {"my-component": {template: '#info2'}}})</script>

5.什么是动态组件?

通过v-if/v-else-if/v-else确实能够切换组件
但是在Vue中切换组件还有一种更专业的方式

<component v-bind:is="需要显示组件名称"></component>

component我们称之为动态组件, 也就是你让我显示谁我就显示谁

6.为什么可以通过v-if切换还要有component

因为component可以配合keep-alive来保存被隐藏组件隐藏之前的状态

7.组件中的命名注意点

1.注册组件的时候使用了"驼峰命名", 那么在使用时需要转换成"短横线分隔命名"

例如: 注册时: myFather -> 使用时: my-father

2.在传递参数的时候如果想使用"驼峰名称", 那么就必须写"短横线分隔命名"

例如: 传递时: parent-name=“name” -> 接收时: props: [“parentName”]

3.在传递方法的时候不能使用"驼峰命名", 只能用"短横线分隔命名"

@parent-say=“say” -> this.$emit(“parent-say”);

学习笔记…

Vue组件相关的知识相关推荐

vue组件相关传值调用
传值: <el-input v-model="form.input" pla ...
[Vue 牛刀小试]：第八章 - 组件的基础知识
一.前言在之前的学习中,我们对于 Vue 的一些基础语法进行了简单的了解,通过之前的代码可以清晰的看出,我们在使用 Vue 的整个过程,最终都是在对 Vue 实例进行的一系列操作. 这里就会引出一个 ...
结合Vue的相关知识进行温度转换
温度转换一.知识基础二.代码三.效果一.知识基础结合Vue的相关知识进行温度转换. 不仅可以进行温度转换,还可以进行其他单位的转换. 二.代码 <html><head> ...
「Vue自我检验」Vue 组件进阶知识，你了解多少？
文章目录 vue 组件进阶动态组件 keep-alive 插槽何为插槽插槽基本用法具名插槽自定义指令分类完整写法简写形式注意事项 Mixin 混入插件 `$nextTick` vu ...
vue 新手指引_精通react/vue组件设计之快速实现一个可定制的进度条组件
前言这篇文章是笔者写组件设计的第四篇文章,之所以会写组件设计相关的文章,是因为作为一名前端优秀的前端工程师,面对各种繁琐而重复的工作,我们不应该按部就班的去"辛勤劳动",而是要根 ...
cli3暴露api地址 vue_手把手教你开发 Vue 组件库
前言 Vue是一套用于构建用户界面的渐进式框架,目前有越来越多的开发者在学习和使用.在笔者写完从0到1教你搭建前端团队的组件系统之后很多朋友希望了解一下如何搭建基于vue的组件系统,所以作为这篇文 ...
pls-00302: 必须声明组件_手把手教你开发vue组件库
前言 Vue是一套用于构建用户界面的渐进式框架,目前有越来越多的开发者在学习和使用.在笔者写完从0到1教你搭建前端团队的组件系统之后很多朋友希望了解一下如何搭建基于vue的组件系统,所以作为这篇文 ...
提升效率的Vue组件开发和实战技巧
大家好我是若川. 现在的大前端时代,是一个动荡纷争的时代,江湖中已经分成了很多门派,主要以Vue,React还有Angular为首,形成前端框架三足鼎立的局势.Vue在前端框架中的地位就像曾经的 jQ ...
少女风vue组件库制作全攻略~~
预览组件库官网 github地址如果喜欢各位小哥哥小姐姐给个小星星鼓励一下哈, 请勿在生产环境中使用,供学习&交流~~ 完整项目目录结构 git clone到本地安装依赖后,执行npm r ...

Vue组件相关的知识

一、引子

Vue两大核心:

二、组件、组件化

1.什么是组件? 什么是组件化?

2.组件化的好处

3.创建全局组件

3.1 创建组件的其它方式

3.2 自定义全局组件特点

4.创建局部组件

4.1 自定义局部组件特点

4.2 创建

5.什么是动态组件?

6.为什么可以通过v-if切换还要有component

7.组件中的命名注意点

1.注册组件的时候使用了"驼峰命名", 那么在使用时需要转换成"短横线分隔命名"

2.在传递参数的时候如果想使用"驼峰名称", 那么就必须写"短横线分隔命名"

3.在传递方法的时候不能使用"驼峰命名", 只能用"短横线分隔命名"

Vue组件相关的知识相关推荐

最新文章

热门文章