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代码实现表格中点击相应行变色功能
May 09 Javascript
浅谈jquery的html方法里包含特殊字符的处理
Nov 30 Javascript
Js apply方法详解
Feb 16 Javascript
浅谈Vue 初始化性能优化
Aug 31 Javascript
一次记住JavaScript的6个正则表达式方法
Feb 22 Javascript
javaScript实现游戏倒计时功能
Nov 17 Javascript
详解vue配置后台接口方式
Mar 29 Javascript
fastadmin中调用js的方法
May 14 Javascript
解决包含在label标签下的checkbox在ie8及以下版本点击事件无效果兼容的问题
Oct 27 Javascript
JavaScript 中的无穷数(Infinity)详解
Feb 13 Javascript
uniapp实现可以左右滑动导航栏
Oct 21 Javascript
关于JavaScript轮播图的实现
Nov 20 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
web目录下不应该存在多余的程序(安全考虑)
2012/05/09 PHP
PHP 获取指定地区的天气实例代码
2017/02/08 PHP
jquery蒙版控件实现代码
2010/12/08 Javascript
js数字转换为float,取N位小数
2014/02/08 Javascript
jquery validate demo 基础
2015/10/29 Javascript
js实现文本上下来回滚动
2017/02/03 Javascript
ES6新数据结构Map功能与用法示例
2017/03/31 Javascript
利用node.js写一个爬取知乎妹纸图的小爬虫
2017/05/03 Javascript
详解vue 计算属性与方法跟侦听器区别(面试考点)
2018/04/23 Javascript
React注册倒计时功能的实现
2018/09/06 Javascript
Node.JS发送http请求批量检查文件中的网页地址、服务是否有效可用
2019/11/20 Javascript
nodeJs的安装与npm全局环境变量的配置详解
2020/01/06 NodeJs
JavaScript函数重载操作实例浅析
2020/05/02 Javascript
基于Vue中的父子传值问题解决
2020/07/27 Javascript
[05:03]显微镜下的DOTA2第十期——Ti3豪之超神幽鬼
2014/06/23 DOTA
使用Python装饰器在Django框架下去除冗余代码的教程
2015/04/16 Python
PHP网页抓取之抓取百度贴吧邮箱数据代码分享
2016/04/13 Python
python实现中文转换url编码的方法
2016/06/14 Python
对python中for、if、while的区别与比较方法
2018/06/25 Python
python2和python3的输入和输出区别介绍
2018/11/20 Python
Python闭包思想与用法浅析
2018/12/27 Python
Python数据类型之String字符串实例详解
2019/05/08 Python
使用Python正则表达式操作文本数据的方法
2019/05/14 Python
Python实现二叉树前序、中序、后序及层次遍历示例代码
2019/05/18 Python
Python Subprocess模块原理及实例
2019/08/26 Python
浅谈Django QuerySet对象(模型.objects)的常用方法
2020/03/28 Python
python如何删除列为空的行
2020/07/17 Python
PyTorch预训练Bert模型的示例
2020/11/17 Python
Python实现Appium端口检测与释放的实现
2020/12/31 Python
超市开学活动方案
2014/03/01 职场文书
学校消防安全责任书
2014/07/23 职场文书
工会优秀工作者事迹
2014/08/17 职场文书
乡镇个人对照检查材料
2014/08/22 职场文书
民警个人对照检查剖析材料
2014/09/17 职场文书
优秀员工推荐材料
2014/12/20 职场文书
法院执行局工作总结
2015/08/11 职场文书