当前位置: 首页 > 编程日记 > 正文

vue组件定义、组件的切换、组件的通信、渲染组件的几种方式(标签、路由、render)...

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

相关文章:

JS九九乘法表

来一个老生常谈的话题--九九乘法表&#xff0c;哈哈&#xff0c;好久不写了呢 <!DOCTYPE html> <html> <head lang"en"><meta charset"UTF-8"><title></title><style>th{border: #ccc 1px solid;font-weight: n…

Php Fatal error: Allowed memory size of 33554432 bytes exhausted 的解决办法

Php Fatal error: Allowed memory size of 33554432 bytes exhausted 的解决办法 在 php.ini 配置文档里面&#xff0c;默认的memory_limit 属性值为32M &#xff0c;值设置得太小了而导致这个问题的出现。 解决这个问题&#xff0c;我们一般有三种方式&#xff1a; 1、修改PHP…

php 自加 性能,对于数据库的自增、自减心得

系统研发过程中会有很多地方涉及到自增、自减操作 如&#xff1a;加入版块时&#xff0c;用户版块数自增1&#xff0c;版块用户数自增1&#xff1b;退出版块时&#xff0c;用户版块数要减1&#xff0c;版块用户数也要减1这里推荐&#xff1a;1.自增可以用2.自减不要用&#xff…

Linux rsync目录同步功能实现

实现目标:A 服务器上 /opt/web 目录,与B服务器上 /opt/web目录实现同步。即&#xff1a;B主动与A进行同步。OS: Reaht AS4A Server 192.168.1.2 /opt/webB Server 192.168.1.3 /opt/web一. A Server config1.rsync 系统自带, 需要使用 --deamon 方式进行启动,服务端口是 TCP …

宏定义的布局约束

*自适应向布局约束的转化关闭*/ #define PREPCONSTRAINTS(VIEW) [VIEW setTranslatesAutoresizingMaskIntoConstraints:NO] #define CONSTRAIN(PARENT, VIEW, FORMAT) [PARENT addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:(FORMAT) options:0 metrics:nil…

项目中WebService使用Spring容器的配置

<context:component-scan base-package"com.huawei.support"> <context:include-filter type"annotation" expression"org.aspectj.lang.annotation.Aspect" /> </context:component-scan> 扫描采用注解…

java 静态代码块 多线程,Java多线程编程笔记10:单例模式

立即加载&#xff1a;“饿汉模式”立即加载就是指使用类的时候已经将对象创建完毕&#xff0c;常见的实现方法就是直接new实例化。也就是在调用方法前&#xff0c;实例就被创建了。示例代码如下所示&#xff1a;class MyObject{private static MyObject myObjectnew MyObject()…

创业笔记-Node.js入门之阻塞与非阻塞

阻塞与非阻塞 正如此前所提到的&#xff0c;当在请求处理程序中包括非阻塞操作时就会出问题。但是&#xff0c;在说这之前&#xff0c;我们先来看看什么是阻塞操作。 我不想去解释“阻塞”和“非阻塞”的具体含义&#xff0c;我们直接来看&#xff0c;当在请求处理程序中加入阻…

vs 添加ico图 到资源

有时候想用自己做的ico 文件作为程序的图标来取代VS 程序默认的图标&#xff1b;在VS2005 资源视图中&#xff0c;打开Icon 上右击-->Add resource -->Import -->选择自己的ico 文件会跳出个错误框&#xff0c;说VS不支持32 位彩色图片&#xff1b; 网上搜索说VS不支…

HIVE QL 杂记

最近要处理用户访问日志&#xff0c;需要从HIVE中取数据&#xff0c;写了一些HIVE QL&#xff0c;有一点小感想&#xff0c;记录在此。 1. 临时表 在HIVE中进行多表连接时&#xff0c;可以给一些临时表命名&#xff0c;这样有助于理清查询语句之间的逻辑&#xff0c;格式为&…

java和内存交互,java内存模型-内存间交互操作

前言本文是阅读周志明大佬的《深入理解Java虚拟机&#xff1a;JVM高级特性与最佳实践(第3版)》第12章&#xff0c;12.3节Java内存模型得来的读书笔记。阅读告警&#x1f602;&#x1f602;&#x1f602;&#xff0c;本文可能会有点枯燥&#xff0c;大部分内容都是对书中内容做一…

文件读写io操作范例

系统io读写&#xff0c;copy int main(int argc, char **argv) { if(argc ! 3) { printf("Usage: %s <src> <dst>\n", argv[0]); exit(0); } int fd1, fd2; fd1 open(argv[1], O_RDONLY); fd2 open(argv[2], O_CREAT | O_TRUNC | O_WRONLY); if(…

一步步教你编写redactor的插件

Redactor是一款JQuery框架下的所见即所得在线HTML编辑器&#xff0c;具有常用的功能如图片/文件上传、表格、格式化等等&#xff0c;不仅轻量级和跨浏览器&#xff0c;还支持各种平台如PC、Mac、iPad, iPhone、Android、Refrigerators&#xff0c;更重要的它能够自动保存、自动…

windows系统杀掉explorer.exe进程后黑屏

使用“Ctrl Shift ESC”打开任务管理器 文件----> 运行新任务---->运行explorer即可 转载于:https://www.cnblogs.com/mrnx2004/p/11065573.html

php 自动返回,PHP实现自动识别Restful API的返回内容类型

如题&#xff0c;PHP如何自动识别第三方Restful API的内容&#xff0c;自动渲染成 json、xml、html、serialize、csv、php等数据&#xff1f;其实这也不难&#xff0c;因为Rest API也是基于http协议的&#xff0c;只要我们按照协议走&#xff0c;就能做到自动化识别 API 的内容…

WebKit、Gecko使用图形库

2008年11月30日 星期日 上午 01:20阅读了之后&#xff0c;觉得作为浏览器内核WebKit、Gecko&#xff0c;为了能高效美观的显示页面的内容&#xff0c;选择适当的图形库非常重要。如果图形库选择不当&#xff0c;往往会导致页面上显示的文字、图片不美观&#xff0c;看起来总让人…

office使用技巧

Word绝招:一、 输入三个“”&#xff0c;回车&#xff0c;得到一条双直线&#xff1b;二、 输入三个“~”&#xff0c;回车&#xff0c;得到一条波浪线&#xff1b;三、 输入三个“*”或 “-”或 “#”&#xff0c;回车&#xff0c;惊喜多多&#xff1b;在单元格内输入now&…

怎样用matlab打开mw文,C# matlab混合编程 MWArray使用笔记

C# matlab混合编程徐凯Email&#xff1a;xukai19871105http://www.doczj.com/doc/1a6e191fff00bed5b9f31dbf.html这几天突然想搞一搞以前没有搞定的MATLABC#混合编程&#xff0c;今天把原来编写的代码拿出来看看&#xff0c;然后结合网上一些正确的和一些错误的代码看看&#x…

【Android OpenGL ES】阅读hello-gl2代码(二)Java代码

AndroidManifest.xml <?xml version"1.0" encoding"utf-8"?> <manifest xmlns:android"http://schemas.android.com/apk/res/android"package"com.android.gl2jni"><applicationandroid:label"string/gl2jni_ac…

activiti任务TASK

一、概要 设计TASK的表主要是&#xff1a;ACT_RU_TASK&#xff0c;ACT_HI_TASKINST&#xff08;见参考-activiti表&#xff09;&#xff1b;任务主要有&#xff1a;人工任务&#xff08;usertask&#xff09;,服务任务&#xff08;servicetask&#xff09;等&#xff1b;候选人…

matlab数值分析拟合实例,数值分析函数拟合matlab代码.doc

数值分析函数拟合matlab代码.doc 第一题MATLAB代码用SPLINE作图XI0204060810YI098092081064038X10012Y1NEWTON3XI,YI,X源代码见M文件Y2SPLINEXI,YI,XPLOTXI,YI, O ,X,Y1, R ,X,Y2, K 用CSAPE作图XI0204060810YI098092081064038X10012Y1NEWTON3XI,YI,X源代码见M文件PPCSAPEXI,YI…

ArrayList Iterator remove java.lang.UnsupportedOperationException

在使用Arrays.asList()后调用add&#xff0c;remove这些method时出现 java.lang.UnsupportedOperationException异常。这是由于Arrays.asList() 返回java.util.Arrays$ArrayList&#xff0c; 而不是ArrayList。Arrays$ArrayList和ArrayList都是继承AbstractList&#xff0c;rem…

android中方法调用super(..)的相关知识

java中的多态有重写 方法被子类重写后 父类的原方法就会被隐藏 当你又需要调用父类所定义的原方法 这个时候就可以用super来调用super调用指向了父类&#xff0c;在一些调用里可以很巧妙的利用&#xff0c;比如监听返回键了在onKeyDown的方法里&#xff0c;如果想让系统对back…

在使用Reference Source调试.Net 源代码时如何取消optimizations(代码优化)-翻译

当你在使用Reference Source functionality in VS 2008 调试.Net 的源代码的时候&#xff0c;你会发现很多变量没法再调试时查看。 这是因为源代码服务器上提供的代码默认是为最终销售优化过的&#xff08;optimized &#xff09;。这些值虽然你没法查看&#xff0c;但不会阻断…

java旅游网站毕业论文,基于JAVA技术的旅游网站的开发.doc

摘要: 这次毕设主要是为了实现基于JAVA技术的旅游网站的开发&#xff0c;方便人们近距离的出行游玩。网站的开发过程中用到了很多方法技术&#xff0c;最主要的是JAVA技术&#xff0c;用于编写后台的功能实现代码&#xff1b;框架采用的是Spring MVC&#xff0c;作为轻量级企业…

Spring 实践 -IoC

Spring 实践标签&#xff1a; Java与设计模式 Spring简介 Spring是分层的JavaSE/EE Full-Stack轻量级开源框架.以IoC(Inverse of Control 控制反转)和AOP(Aspect Oriented Programming 面向切面编程)为内核, 取代EJB的臃肿/低效/脱离现实. 主页http://spring.io/ IoC与DI IOC…

大话编程(一)

2013年1月15日 11:40:38 还有20分钟下班,实在忍不住了,想说点儿什么 编程入门的可以看看 (一)什么是0什么是1 有那么一堆叫半导体的东西,某个牛逼人用铜线连起来,组成了一个电路. 这个电路在一直通电的情况下,可以使某个点的电压保持不变, 如果这个点的电压大于某个值,就抽象为…

php 保存表单数据,使用jquery和php自动保存表单数据

我对PHP非常好,但是使用jQuery的总菜单,并且卡在自动保存表单数据中.自动保存功能在dummy.php中每30秒调用一次.我正在将用于处理的序列化表单数据( – >数据库)发送到savetest.php.此刻,我坚持这个问题&#xff1a;如何让savetest.php“监听”传入的数据并对其作出反应&…

Finalize/Dispose/Destructor

我总是会搞混这些东西&#xff0c;还是写下来帮助记忆。 Finalize 即Object.Finalize()&#xff0c;C#中不允许使用Finalize&#xff0c;析构器就等价于Finalize。 Destructor 析构器&#xff08;Destructor&#xff09;是在对象没有被引用的时候&#xff0c;由CLR自动调用的。…

linux 串口minicom配置使用

在minicom -s配置是记得取消硬件流控制。 1.minicom -o 配置文件 2.alias comminicom -o 配置文件 转载于:https://www.cnblogs.com/niceskyfly/p/5257713.html