第二章、 Vue 起步
2-2.编写hello world

首先创建vue实例,然后实例接收一些配置项,el表示实例负责管理的区域,data表示区域内的数据

两秒后内容变为bye world 其中app表示实例对象,$data表示实例对象所管辖的区域的数据。
2-3 TodoList

v-for循环指令,可以帮助我们循环数据,list指data里面的list数据,item指循环过程中每一项的内容。
可在console中可调试,可改值。数据双向绑定调试

2-4MVVM
传统的开发模式MVP设计模式,代码分为三层,Model==>数据层(一般是用ajax获取的远程数据) View=>视图层(指html结构) Presenter==》控制层(业务逻辑相关的==》操作dom或者用ajax去获取数据)

视图层(View)发出事件交给控制器(Presenter),控制器要么去获取(ajax)数据(Model)要么去操作dom(view)
MVP开发模式代码如下:


MVVM模式

实例中操作的是Model
主要操作是Model,操作的是数据层及视图层。大大减少dom的操作。
2-7、简单的组件中的传值



父组件通过属性传值,子组件通过事件传值。
第二章、 Vue 起步的更多相关文章
- 第二章 Vue快速入门--14 使用v-model实现计算器的案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 第二章 Vue快速入门--13 讲解v-model实现表单元素的数据双向绑定
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 第二章 Vue快速入门--12 事件修饰符的介绍
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 第二章 Vue快速入门--10-11 跑马灯效果制作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 第二章 Vue快速入门--9 使用v-on指令定义Vue中的事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 第二章 Vue快速入门--8 v-bind指令的学习
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 第二章 Vue快速入门--7 讲解v-cloak、v-text、v-html的基本使用
7 讲解v-cloak.v-text.v-html的基本使用 <!DOCTYPE html> <html lang="en"> <head> & ...
- 第二章 Vue快速入门-- 28 自定义按键修饰符
事件处理-按键修饰符 js 里面的键盘事件对应的键码 <!DOCTYPE html> <html lang="en"> <head> <m ...
- 第二章 Vue快速入门-- 27 字符串的padStart方法使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 第二章 Vue快速入门-- 26 过滤器-定义私有过滤器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
随机推荐
- Fire-Fighting Hero(多源最短路和单源最短路)
题:https://nanti.jisuanke.com/t/41349 分析:对于hero来说,走单源最短路,然后遍历dis数组中的最大值即可找到,对于消防员来说,走多源最短路,只需要建个超级起点连 ...
- 非参数检验|Sign test|Wilcoxon signed rank test|Wilcoxon rank sum test|Bootstrapping
非参数检验条件没有参数,因此就没有分布,利用数据等级之间的差距,依次赋值之后再用参数方法测试.将连续型变量转化为离散型变量,即顺序变量.与参数检验相比,正态分布较弱(p值有可能不显著,浪费信息,比如最 ...
- made his acquaintance|adequate|advisable|announce|contrived to|made up|toss|considering that
PHRASE 与(某人)初次相识;结识(某人)When you make someone's acquaintance, you meet them for the first time and ge ...
- kafka + spark Streaming + Tranquility Server发送数据到druid
花了很长时间尝试druid官网上说的Tranquility嵌入代码进行实时发送数据到druid,结果失败了,各种各样的原因造成了失败,现在还没有找到原因,在IDEA中可以跑起,放到线上就死活不行,有成 ...
- Springboot实现发送邮箱
https://blog.csdn.net/xubin1623875795/article/details/78967141 http://www.cnblogs.com/jmcui/p/975844 ...
- CDN是什么鬼
CDN,内容分发网络,是大多数互联网业务里必不可少的部分,但大多数互联网从业人员不是特别清楚CDN究竟是什么,以及它可以为我们做哪些事情. 我们还是从之前介绍的<不同的人看到的直播为什么不一样? ...
- 基于hibernate的BaseDao及其实现类的设计
以前做设计的时候dao接口和它的实现了,这样子就不必写这么多的重复代码了.但由于对反射没有了解,除非依赖hibernate的其他组件,否则写不出来.不过,有了反射,我们可以通过泛型来实现我们想要做的功 ...
- Java IO: PipedInputStream
原文链接 作者: Jakob Jenkov 译者: 李璟(jlee381344197@gmail.com) PipedInputStream可以从管道中读取字节流数据,代码如下: 01 InputSt ...
- python读取配置文件报keyerror-文件路径不正确导致的错误
- 在其他模块使用反射读取配置文件报错,但是在反射模块中读取GetData.check_list又是正确的 反射模块如下: # get_data.py from API_AUTO.p2p_projec ...
- 途牛与十八好汉撕X又言和 到底想干啥?
到底想干啥?" title="途牛与十八好汉撕X又言和 到底想干啥?"> 天下大势,合久必分,分久必合.很多看起来热闹哄哄的"劳燕分飞"事件,最 ...