博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
vue组件定义、组件的切换、组件的通信、渲染组件的几种方式(标签、路由、render)...
阅读量:6503 次
发布时间:2019-06-24

本文共 689 字,大约阅读时间需要 2 分钟。

vue中全局的概念是什么?---就是全局定义的功能,所有实例化的vm都可以使用,  全局定义的是挂在构造函数Vue上面的,所以实例化出的对象都可以使用这个功能

1、什么是组件?---从UI的角度把页面拆分成不同的部分,组件的优势:可复用,能够拆分vue实例代码,保证代码的可读性

 

  模块化和前端组件化的区别:一个是从功能上拆分一个是从ui角度去拆分

2、定义vue组件

  全局组件定义的3种方式

  

    

  私有组件的定义

    使用的是components来定义私有组件

     

 3、组件中的data

    

    

4、组件的切换

   

    上面的v-if  和 v-else 切换有缺陷:只能切换2个,要是3个或以上,就切换不了了

    改造:如下

    

    

    组件切换的动画

    

 5、组件之前的传值问题

    

    

    正确用法:

    

    

    注意:props数组里的值都是从父组件里传递过来的,只能是小写,只读不可改

      

    父组件向子组件传递事件---注意传递的是方法不是方法的结果,所以不要小括号

    

6、复习

  

 

 7、本地存储案例----评论列表的存和取

  

  

 

 8、$refs的使用---this.$refs.xxx   获取dom节点(获取的是dom对象,原生js对象)

  

     

 9、用render函数渲染组件

  

 

   

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

   

 

 

  

  

 

  

  

转载于:https://www.cnblogs.com/yangyutian/p/11048145.html

你可能感兴趣的文章
【laravel5.4】重定向带参数
查看>>
PHP array_walk() 函数
查看>>
java基础-数组的折半查找原理
查看>>
mybatis标签之——<trim>
查看>>
【laravel5.4】 Composer移除依赖
查看>>
第7章 高级分组
查看>>
常见错误及细小知识点锦集
查看>>
【多线程】将大批量数据插入多张表,怎么知道多张表都插成功了
查看>>
SDOI2018:原题识别
查看>>
opencv中图像伪彩色处理(C++ / Python)
查看>>
点击按钮,删除数组-对象中的数据
查看>>
Android修改init.rc和init.xx.rc文件【转】
查看>>
SQL优化|Java面试题
查看>>
026 UI调试
查看>>
JSOUP 超时分析与处理
查看>>
[20170713] 无法访问SQL Server
查看>>
Ajax学习(一)
查看>>
java json与map互相转换(一)
查看>>
Unity2018新功能抢鲜 | Package Manager
查看>>
jq ajax post body raw传json
查看>>