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 相关文章推荐
深入理解javascript学习笔记(一) 编写高质量代码
Aug 09 Javascript
Javascript事件实例详解
Nov 06 Javascript
js中Image对象以及对其预加载处理示例
Nov 20 Javascript
js操作输入框提示信息且响应鼠标事件
Mar 25 Javascript
jquery操作checked属性以及disabled属性的多种方法
Jun 20 Javascript
当前流行的JavaScript代码风格指南
Sep 10 Javascript
JavaScript对Json的增删改属性详解
Jun 02 Javascript
微信小程序 共用变量值的实现
Jul 12 Javascript
Vue学习笔记进阶篇之vue-router安装及使用方法
Jul 19 Javascript
react native 获取地理位置的方法示例
Aug 28 Javascript
在react-antd中弹出层form内容传递给父组件的操作
Oct 24 Javascript
JavaScript实现简单动态表格
Dec 02 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
JavaScript 调试器简介
2009/02/21 Javascript
JavaScript 的方法重载效果
2009/08/07 Javascript
JS事件Event元素(兼容IE,Firefox,Chorme)
2012/11/01 Javascript
javascript 图片裁剪技巧解读
2012/11/15 Javascript
js Array操作的最简短最容易理解方法
2013/12/09 Javascript
JS实现仿中关村论坛评分后弹出提示效果的方法
2015/02/23 Javascript
jQuery满屏焦点图左右滚动特效代码分享
2015/09/07 Javascript
js中对函数设置默认参数值的3种方法
2015/10/23 Javascript
jQuery zTree加载树形菜单功能
2016/02/25 Javascript
js在ie下打开对话窗口的方法小结
2016/10/24 Javascript
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
2017/03/21 jQuery
iOS + node.js使用Socket.IO框架进行实时通信示例
2017/04/14 Javascript
详解JavaScript中的函数、对象
2019/04/01 Javascript
一篇文章带你浅入webpack的DLL优化打包
2020/02/20 Javascript
Vue将props值实时传递 并可修改的操作
2020/08/09 Javascript
[01:02:53]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第二局
2016/03/06 DOTA
Django学习笔记之Class-Based-View
2017/02/15 Python
Python 常用的安装Module方式汇总
2017/05/06 Python
pip安装时ReadTimeoutError的解决方法
2018/06/12 Python
python实现抠图给证件照换背景源码
2019/08/20 Python
python-视频分帧&多帧合成视频实例
2019/12/10 Python
如何用Python 加密文件
2020/09/10 Python
JD Sports荷兰:英国领先的运动时尚零售商
2020/03/13 全球购物
美体小铺法国官方网站:The Body Shop法国
2020/06/04 全球购物
VC++笔试题
2014/10/13 面试题
小学开学寄语
2014/01/19 职场文书
认识深刻的检讨书
2014/02/16 职场文书
教师校本培训方案
2014/02/26 职场文书
大学班级文化建设方案
2014/05/06 职场文书
党委班子剖析材料
2014/08/21 职场文书
机关干部四风问题自查报告及整改措施
2014/10/26 职场文书
公务员保密工作承诺书
2015/05/04 职场文书
教师考核鉴定意见
2015/06/05 职场文书
观后感的写法
2015/06/19 职场文书
优秀党员主要事迹范文
2015/11/05 职场文书
能让Python提速超40倍的神器Cython详解
2021/06/24 Python