Vue.js中的组件系统
vue.js既然是框架,那就不能只是简单的完成数据模板引擎的任务,它还提供了页面布局的功能。本文详细介绍使用vue.js进行页面布局的强大工具,vue.js组件系统。
Vue.js组件系统
每一个新技术的诞生,都是为了解决特定的问题。组件的出现就是为了解决页面布局等等一系列问题。vue中的组件分为两种,全局组件和局部组件。
组件的注册
全局组件的注册
通过Vue.component()创建一个全局组件之后,我们可以在一个通过 new Vue 创建的 Vue 根实例中,把这个组件作为自定义元素来使用。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="/UploadFiles/2021-04-02/vue.min.js">组件的参数
因为组件是可复用的 Vue 实例,所以它们与 new Vue 接收相同的选项,例如 data 、 computed 、 watch 、 methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="/UploadFiles/2021-04-02/vue.min.js">组件的复用
每个实例维护自己的一份独立的数据。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="/UploadFiles/2021-04-02/vue.min.js">注意当点击按钮时,每个组件都会各自独立维护它的 count 。因为你每用一次组件,就会有一个它的新 实例 被创建。
Data必须是一个函数
data必须是一个函数,因此每个实例可以维护一份被返回对象的独立的拷贝, 也可以写成如下形式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="/UploadFiles/2021-04-02/vue.min.js">局部组件的注册
全局注册往往是不够理想的。比如,如果你使用一个像 webpack 这样的构建系统,全局注册所有的组件意味着即便你已经不再使用一个组件了,它仍然会被包含在你最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。
全局组件始终是存在的,除非程序结束,如果组件越来越大,那么程序所占用的空间和消耗的性能就会更大。
所以我们需要局部组件。不用的时候,被垃圾回收。
局部组件的第一种使用方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="/UploadFiles/2021-04-02/vue.min.js">局部组件的第二种使用方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="/UploadFiles/2021-04-02/vue.min.js">对于 components 对象中的每个属性来说,其属性名就是自定义元素的名字,其属性值就是这个组件的选项对象。
在局部组件中使用子组件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="/UploadFiles/2021-04-02/vue.min.js">注:
1.注意写组件标签
2.每个组件的template只识别一个作用域块
通信
父子组件的通信
在父组件中给子组件绑定属性,子组件通过props=["属性名称"]
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="/UploadFiles/2021-04-02/vue.min.js">子父组件的通信
父组件在mounted的时候,监听一个自定义事件。
给子组件绑定一个click事件之后,通过内建的方法$emit在父组件上触发一个事件,这个时间就是父组件监听的自定义事件。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="/UploadFiles/2021-04-02/vue.min.js">非父子通信
其中一个组件向中间调度器提交事件,另一个组件监听中间调度器的事件
混入
混入可以提高代码的重用性。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="/UploadFiles/2021-04-02/vue.js">插槽
有时候我们需要向组件传递一些数据,这时候可以使用插槽.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .nav-link { width: 100px; height: 100px; background-color: #2aabd2; float: left; margin-left: 5px; text-align: center; line-height: 100px; } </style> <script src="/UploadFiles/2021-04-02/vue.js">具名插槽
操作使用了组件的复用,如果我们在同一个组件内写入不同的页面呢?此时,我们需要多个插槽,并且给不同的内容命名。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .nav-link { width: 100px; height: 100px; background-color: #2aabd2; float: left; margin-left: 5px; text-align: center; line-height: 100px; } </style> <script src="/UploadFiles/2021-04-02/vue.js">我们还是可以保留一个未命名插槽,这个插槽是 默认插槽 ,也就是说它会作为所有未匹配到插槽的内容的统一出口。
在组件上使用v-model
自定义事件也可以用于创建支持 v-model 的自定义输入组件。记住:
<input v-model="searchText">
等价于:
<input v-bind:value="searchText" v-on:input="searchText = $event.target.value"
>
当用在组件上时, v-model 则会这样:
<custom-input v-bind:value="searchText" v-on:input="searchText = $event" ></custom-input>为了让它正常工作,这个组件内的 <input> 必须:
将其 value 特性绑定到一个名叫 value 的 prop 上
在其 input 事件被触发时,将新的值通过自定义的 input 事件抛出
写成代码之后是这样的:
Vue.component('custom-input', { props: ['value'], template: ` <input v-bind:value="value" v-on:input="$emit('input', $event.target.value)" > ` })现在 v-model 就应该可以在这个组件上完美地工作起来了:
<custom-input v-model="searchText"></custom-input>
如下是在组件中使用v-model示例:
上一篇:js逆向解密之网络爬虫<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="/UploadFiles/2021-04-02/vue.min.js">使用组件的注意事项
注意事项一:单个根元素
当构建一个内容页面的组件时,我们的组件可能包含多个HTML标签。
<h1>Hello World</h1> <h2>Hello Vue</h2>然而如果你在模板中尝试这样写,Vue 会显示一个错误,并解释道 every component must have a single root element (每个组件必须只有一个根元素) 。你可以将模板的内容包裹在一个父元素内,来修复这个问题,例如:
<div> <h1>Hello World</h1> <h2>Hello Vue</h2> </div>注意事项二:解析特殊HTML元素
有些 HTML 元素,诸如 <ul> 、 <ol> 、 <table> 和 <select> ,对于哪些元素可以出现在其内部是有严格限制的。而有些元素,诸如 <li> 、 <tr> 和 <option> ,只能出现在其它某些特定的元素内部。
这会导致我们使用这些有约束条件的元素时遇到一些问题。例如:
<table> <blog-post-row></blog-post-row> </table>这个自定义组件
<blog-post-row>
会被作为无效的内容提升到外部,并导致最终渲染结果出错。幸好这个特殊的 is 特性给了我们一个变通的办法:<table> <tr is="blog-post-row"></tr> </table>需要注意的是如果我们从以下来源使用模板的话,这条限制是不存在的:
字符串 (例如:template: '...')
单文件组件 (.vue) <script type="text/x-template">
使用组件实现路飞导航栏
下一篇:Vue+Django项目部署详解
几个月来,英特尔、微软、AMD和其它厂商都在共同推动“AI PC”的想法,朝着更多的AI功能迈进。在近日,英特尔在台北举行的开发者活动中,也宣布了关于AI PC加速计划、新的PC开发者计划和独立硬件供应商计划。
在此次发布会上,英特尔还发布了全新的全新的酷睿Ultra Meteor Lake NUC开发套件,以及联合微软等合作伙伴联合定义“AI PC”的定义标准。