①在table标签中如何结合组件来使用?
一般不用组件时的写法如下:
改用组件的形式如下图:
//在控制台中显示的html代码如下:
//虽然页面上显示的效果是正确的,但是在html代码中就出现错误了。这种写法会使table和tr处于同级的位置,使得html代码显得不规范。
//所以就需要用上 "is属性" 来解决这个问题! 如下:
//在控制台中显示如下: 这种写法就会避免刚才出现的bug,能够完整的显示页面效果和html的代码规范。
//用is属性可以解决上面的问题,上面的代码表示为: 在tbody中需要用组件的方法来编写,但是又不能直接写这个组件,所以在tr标签中用is属性来表示使用的是row组件的方法!
//而且以后用ul,ol,select等标签来使用组件的话,也最好使用is属性来编写代码,这样会达到一个正确的效果!
==================================================
②在子组件定义data的规范写法:
错误写法:
在控制台显示如下:
//即:子组件的data属性不能用对象的形式来编写!!!
正确写法:
改为这样的写法,控制台中就不会报错了。
//总结:在根组件(即最外层的Vue实例)中定义data属性,用对象的形式是不会出错的。但在非根组件(即子组件)定义data的时候,data必须是一个函数的形式,而不能是一个对象。同时这个函数需要返回一个对象,这个对象要包含所对应的数据。通过一个函数来返回一个对象的目的,就是让每一个子组件都拥有一个独立的数据存储,这样就不会出现多个子组件之间的相互影响的情况
==================================================
③ref引用:
Vue不建议我们在代码里面操作DOM,但在处理一些极其复杂的动画效果,光靠Vue中的数据绑定处理不了,所以在有些必要的情况之下,就真的需要操作DOM
所以介绍一下——用ref引用的形式来进行DOM的操作:
//上图的代码,就可以实现ref引用获取DOM节点来实现点击触发事件的效果。
以下用ref引用结合组件的方式来举个案例: 计数器
//先编写如下代码,实现点击counter组件,number的值加一:
//运行结果如下图: (每次点击,number值加一)
接下来,用ref实现计数器的方法。 定义一个div,实现上面两个number的值变化,div进行求和计算。
//显示效果如下:
//总结: