vue 组件使用中的一些细节点


Posted in Javascript onApril 25, 2018

细节一

基础例子

vue 组件使用中的一些细节点

运行结果:

vue 组件使用中的一些细节点

以上大家都懂,这边就不多说,回到代码里,有时候我们需要 tbody 里面每一行是一个子组件,那我们代码可以怎么写呢?我们可以这样写,定义一个全局组件,如下:

vue 组件使用中的一些细节点

然后我们在 body 里面可以这么调用:

vue 组件使用中的一些细节点

运行结果:

vue 组件使用中的一些细节点

可以看到 row 是有打印出来了,但它实际上里面没有任务内容,那我们的问题出在哪呢?回到代码我们发现我们在创建 vue 实例的时候没有指定要挂载的点,所以我们通过 el 来指定 vue 接管的 Dom ,如下:

vue 组件使用中的一些细节点

运行结果:

vue 组件使用中的一些细节点

感觉上没有问题,但真的是这样吗?我们通过检查元素,查看DOM结构:

vue 组件使用中的一些细节点

大家可以看到出错啦?正常的三个 tr 应该是在 tbody 里面, 而现在跑到跟 tbody 同一层了,这是怎么回事呢?

在H5的规范里面,要求我们 table 里面有 tbody, tbody 里面必须得放 tr,而现在我们使用子组件里面写成 row, 所以我们的浏览器在解析的时候就会出问题。

那么我们一旦遇到这种情况出现 bug 要怎么解呢? 这时候我们可以借助 vue 提供的 is 属性来解决这个问题。很简单, tbody 里面只能写 tr, 那我们就都写 tr,可是实际上我们要显示 tr 并不是就真的只显示 tr 空的内容,我们需要显示 row 组件的内容,那怎么做?

我们可以在 tr 多一个属性is 让它等于 row, 如下:

vue 组件使用中的一些细节点

这段代码的意思是:我要用一个组件,但是我不能直接写这个组件,所以我们写了一个 tr, 我们用 is 表示虽然我写的是 tr, 但它表示是 row 组件,这样能既能符合 H5 的规范又能显示我们组件的内容 ,程序就不会有 bug 了。

运行结果:

vue 组件使用中的一些细节点

一切正常。

同样我们使用 ul, select 标签的时候,也可以用这种方法。

细节二

基础例子

vue 组件使用中的一些细节点

我们定义了一个组件 row,里面有段文本,如果我们想把这段文本单独提取出来用变量表示 ,那么你很有可能会这样写:

vue 组件使用中的一些细节点

看似完美,在打开浏览器运行你会发现,bug 正向你招手:

vue 组件使用中的一些细节点

主要意思是 data 是要一个函数,而不是一个对象,什么情况,在根组件,也就是最外层 vue 的实例,我们通过对象定义是 ok 的,但是在非根组件的子组件这样定义是不行滴。data 定义要求是一个函数,同时这个函数要求返回一个对象,如下:

vue 组件使用中的一些细节点

运行结果:

vue 组件使用中的一些细节点

这样问题就解决啦。

之所以这么定义,原因是一个子组件不像根组件只被调用一次,而是可以多次调用,那么每一个子组件的数据我们不希望和其它的子组件产生冲突或者说每个子组件都应该有一个自己的数据域,通过函数返回一个对象就可以实现这个需求。

细节三

基础例子

vue 组件使用中的一些细节点

运行,点击弹出click,没毛病。vue 不建议我们在代码里面操作 Dom, 但是在处理一些极其复杂的动画效果,我们还真得操作 Dom, 那么在 vue 中如何操作 Dom 呢? 我们可以通过 ref 引用的方式,如下:

vue 组件使用中的一些细节点

这时候我们有个需求,就是点击div 的时候,把里面的内容打印出来,我们可以通过引用获取div节点,然后打印div 里面的内容即可:

vue 组件使用中的一些细节点

运行结果:

vue 组件使用中的一些细节点

总结

以上所述是小编给大家介绍的vue 组件使用中的一些细节点,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery(1.3.2) 7行代码搞定跟随屏幕滚动的层
May 21 Javascript
js修改input的type属性及浏览器兼容问题探讨与解决
Jan 23 Javascript
JavaScript中标识符提升问题
Jun 11 Javascript
js实现点击按钮弹出上传文件的窗口
Dec 23 Javascript
JavaScript比较两个数组的内容是否相同(推荐)
May 02 Javascript
Angular中管道操作符(|)的使用方法
Dec 15 Javascript
vue中改变选中当前项的显示隐藏或者状态的实现方法
Feb 08 Javascript
详解react-redux插件入门
Apr 19 Javascript
详解JavaScript中操作符和表达式
Sep 12 Javascript
详解如何webpack使用DllPlugin
Sep 30 Javascript
vue-cli V3.0版本的使用详解
Oct 24 Javascript
openlayers实现地图测距测面
Sep 25 Javascript
Vue中使用vue-i18插件实现多语言切换功能
Apr 25 #Javascript
vue项目中vue-i18n和element-ui国际化开发实现过程
Apr 25 #Javascript
父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法
Apr 25 #Javascript
vue短信验证性能优化如何写入localstorage中
Apr 25 #Javascript
详解Vue.js中.native修饰符
Apr 24 #Javascript
Vue 动态设置路由参数的案例分析
Apr 24 #Javascript
vue.js前后端数据交互之提交数据操作详解
Apr 24 #Javascript
You might like
提高PHP编程效率的53个要点(经验小结)
2010/09/04 PHP
php木马webshell扫描器代码
2012/01/25 PHP
解析php mysql 事务处理回滚操作(附实例)
2013/08/05 PHP
Cookie 注入是怎样产生的
2009/04/08 Javascript
javascript 24小时弹出一次的代码(利用cookies)
2009/09/03 Javascript
JS setCapture 区域外事件捕捉
2010/03/18 Javascript
通过JQuery将DIV的滚动条滚动到指定的位置方便自动定位
2014/05/05 Javascript
JS打开新窗口防止被浏览器阻止的方法
2015/01/03 Javascript
使用jQuery实现返回顶部
2015/01/26 Javascript
js实现鼠标划过给div加透明度的方法
2015/05/25 Javascript
Jquery解析json字符串及json数组的方法
2015/05/29 Javascript
JQuery给网页更换皮肤的方法
2015/05/30 Javascript
JS多物体实现缓冲运动效果示例
2016/12/20 Javascript
jquery设置css样式的多种方法(总结)
2017/02/21 Javascript
Ext JS 实现建议词模糊动态搜索功能
2017/05/13 Javascript
node.js实现的装饰者模式示例
2017/09/06 Javascript
基于JSONP原理解析(推荐)
2017/12/04 Javascript
vue视图不更新情况详解
2019/05/16 Javascript
jquery使用echarts实现有向图可视化功能示例
2019/11/25 jQuery
一篇文章看懂JavaScript中的回调
2021/01/05 Javascript
[01:01:36]Optic vs paiN 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
有关wxpython pyqt内存占用问题分析
2014/06/09 Python
Python的Django框架中if标签的相关使用
2015/07/15 Python
使用python3.5仿微软记事本notepad
2016/06/15 Python
深入理解NumPy简明教程---数组2
2016/12/17 Python
使用Python进行目录的对比方法
2018/11/01 Python
python 获取图片分辨率的方法
2019/01/08 Python
Python matplotlib生成图片背景透明的示例代码
2019/08/30 Python
使用Python给头像戴上圣诞帽的图像操作过程解析
2019/09/20 Python
python 通过手机号识别出对应的微信性别(实例代码)
2019/12/22 Python
佳能加拿大网上商店:Canon eStore Canada
2018/04/04 全球购物
Under Armour安德玛意大利官网:美国高端运动科技品牌
2020/01/16 全球购物
如何提高MySql的安全性
2014/06/19 面试题
学生自我评价范文
2014/02/02 职场文书
党支部对照检查材料
2014/08/25 职场文书
2014年学习厉行节约反对浪费思想汇报
2014/09/10 职场文书