vue组件的基本知识点
1. 组件中 is 的特性:
有些 HTML 元素,诸如 <ul>
、<ol>
、<table>
和 <select>
,对于哪些元素可以出现在其内部是有严格限制的。而有些元素,诸如 <li>
、<tr>
和 <option>
,只能出现在其它某些特定的元素内部。
这会导致一些bug:
<table>
<row-item></row-item>
</table> 这个自定义组件<row-item>
会被作为无效的内容提升到外部,并导致最终渲染结果出错。幸好这个特殊的is
特性给了我们一个变通的办法:
<table>
<tr is="row-item"></tr>
</table> 需要注意的是如果我们从以下来源使用模板的话,这条限制是不存在的:
- 字符串 (例如:
template: '...'
) - 单文件组件(.vue)
- <script type="text/x-template">
2. 子组件中的data 是一个函数,返回值return是需要的数据
Vue.component('counter',{
template:'<div @click="handleClick">{{number}}</div>',
data(){
return{
number: 0
}
}
3. ref引用,作用是操纵dom节点
用法:<div ref=" one "></div>
获取整个div: this.$refs.one /* $refs指的是所有的ref */
4. 组件参数校验
content可以是数组或者对象,type类型,required判断是否必须值,default默认值
<div id="root">
<child content="hell"></child>
</div> Vue.component('child',{
props: {
// content: [Number,String]
content:{
type: [Number,String],
required: false,
default: 'default value ',
validator: function(value){
return (value.length > 5)
}
}
},
template: '<div>{{content}}</div>'
})
5. 给组件绑定原生事件
一般父组件中绑定的自定义事件都是由子组件通过$emit来传递的 ,
但是加上native后,这里的事件就不再是自定义事件 而是原生的click事件,点击就会触发,不需要子组件来传值
<child @click.native="alertA"></child>
6. 非父子组件的传值:bus
html:
<div id="root">
<child content="dell"></child>
<child content="Lee"></child>
</div> js:
Vue.prototype.bus = new Vue() /* 意思是每个vue实例中都有一个bus属性 */
Vue.component('child',{
data(){
return{
selfContent: this.content
}
},
props:{
content: String
},
template: '<div @click="handleClick">{{selfContent}}</div>',
methods:{
handleClick(){
this.bus.$emit('change',this.selfContent)
}
},
mounted:function(){
var _this = this;
this.bus.$on('change',function(msg){
_this.selfContent = msg;
})
}
}) var vm = new Vue({
el: '#root'
})
vue组件的基本知识点的更多相关文章
- JS组件系列——又一款MVVM组件:Vue(二:构建自己的Vue组件)
前言:转眼距离上篇 JS组件系列——又一款MVVM组件:Vue(一:30分钟搞定前端增删改查) 已有好几个月了,今天打算将它捡起来,发现好久不用,Vue相关技术点都生疏不少.经过这几个月的时间,Vue ...
- 【Vue】详解Vue组件系统
Vue渲染的两大基础方式 new 一个Vue的实例 这个我们一般会使用在挂载根节点这一初始化操作上: new Vue({ el: '#app' }) 注册组件并使用—— 全局注册 通过Vue.comp ...
- vue组件如何被其他项目引用
自己写的vue组件怎么才能让其他人引用呢,或者是共用组件如何让其他项目引用.本文就粗细的介绍下,如有疑问欢迎共同讨论.在这里你能了解下如下知识点: 1. 如何发布一个包到npmjs仓库上 2.如何引用 ...
- vue前端面试题知识点整理
vue前端面试题知识点整理 1. 说一下Vue的双向绑定数据的原理 vue 实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来劫 ...
- vue面试题,知识点汇总(有答案)
一. Vue核心小知识点 1.vue中 key 值的作用 key 的特殊属性主要用在 Vue的虚拟DOM算法,在新旧nodes对比时辨识VNodes.如果不使用key,Vue会使用一种最大限度减少动态 ...
- Vue (表单、斗篷、条件、循环指令,分隔符成员、计算属性成员、属性的监听、vue组件、子组件、各个常见的钩子函数)
表单指令 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF- ...
- 来吧!一文彻底搞定Vue组件!
作者 | Jeskson 来源 | 达达前端小酒馆 Vue组件的概述 组件是什么呢,了解组件对象的分析,Vue组件中的data属性,props传递数据的原理到底是什么. 事件通信的那些事 如何了解父子 ...
- 二、Vue组件(component):组件的相互引用、通过props实现父子组件互传值
一.组件各部分说明及互相引用 1.一个vue组件由三个部分组成 Template 只能存在一个根元素 2.Script 3.Style scoped:样式只在当前组件内生效 1.1 组件的基本引用代码 ...
- vue组件
分享出来让思路更成熟. 首先组件是 Vue.js 最强大的功能之一. 可以减少很多的工作量,提高工作效率. 编写一个可复用性的组件,虽然官网上也有.... 编写可复用性的vue组件 具备一下的几个要求 ...
随机推荐
- ORACLE中一个字符占多少字节?
问题描述 或许你会说一个中文字符占2个字节,这是一定的?如何计算一个字符串的字节数? 解决方案 在oracle中一个字符特别是中文占几个字节是不同的. 比如我创立一个表create table tes ...
- Flask入门数据库框架flask-SQLAlchemy(十)
Web程序开发中最重要的莫过于关系型数据库,即SQL 数据库,另外文档数据库(如 mongodb).键值对数据库(如 redis)慢慢变得流行. 原因 : 我们不直接使用这些数据库引擎提供的 Py ...
- Linux --防火墙(一)
基本组成 表: filter:用来对数据包进行过滤,根据具体的规则要求决定如何处理一个数据包.表内包含三个链,即INOUT.FORWARD.OUTPUT nat表:主要用来修改数据包的IP地址.端口号 ...
- Android(java)学习笔记27:TextView属性大全
TextView属性大全: android:autoLink 设置是否当文本为URL链接/email/电话号码/map时,文本显示为可点击的链接.可选值(none/web/email/ph ...
- 【LOJ6041】「雅礼集训 2017 Day7」事情的相似度(用LCT维护SAM的parent树)
点此看题面 大致题意: 给你一个\(01\)串,每次询问前缀编号在一段区间内的两个前缀的最长公共后缀的长度. 离线存储询问 考虑将询问离线,按右端点大小用邻接表存下来(直接排序当然也可以啦). 这样的 ...
- [18/11/20]break与continue的区别
一.普通break 和continue 1.break: break用于强行退出循环,不执行循环中剩余的语句. 2.continue continue 语句用在循环语句体中,用于终止某次循环过程,即跳 ...
- com.microsoft.sqlserver.jdbc.SQLServerException: Socket closed 或者 该连接已关闭
com.microsoft.sqlserver.jdbc.SQLServerException: Socket closed 或者 该连接已关闭 解决方案: DBUtil公共方法如下: package ...
- 取火柴游戏||Nim博弈
好久之前看的sg函数了 好像就记住一个nim博弈qwq 第一次啊看的时候很迷,现在感觉可以了qwq 首先我们来看一个其他的游戏.(以下游戏只有两个人参与,且足够聪明) 两个人在一张圆形的桌子上放等大的 ...
- how to create a custom form for sharepoint list
在VS中创建一个applicationPage映射到Layouts文件夹下,然后代码如下: SPList lstTest = web.Lists["Shared Documents" ...
- js 事件委托 事件代理
JavaScript高级程序设计上解释:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件. 通过例子类比: 有三个同事预计会在周一收到快递.为签收快递,有两种办法:一是三 ...