第二章、 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 ...
随机推荐
- iOS仿QQ侧滑菜单、登录按钮动画、仿斗鱼直播APP、城市选择器、自动布局等源码
iOS精选源码 QQ侧滑菜单,右滑菜单,QQ展开菜单,QQ好友分组 登录按钮 3分钟快捷创建高性能轮播图 ScrollView嵌套ScrolloView(UITableView .UICollecti ...
- 牛客-Highway
题目传送门 sol:看了题意显然是最大生成树,但是任意两个点之间都有边,大概有n*n条边.用朴素的最小生成树算法显然不行.联想了一下树的直径还是不会.看了大佬的题解,懂了... 所以还是直接贴大佬博客 ...
- python3之urllib基础
urllib简单应用html=urllib.request.urlopen(域名/网址).read().decode('utf-8')----->--->urlopen-->获取源码 ...
- win7/win8下vmware/VirtualBox虚拟网卡显示未识别网络的解决
http://blog.csdn.net/zengxianying/article/details/44017227
- 8.2.2 使用Java8增强的Iterator遍历集合元素
8.2.2 使用Java 8增强的Iterator遍历集合元素 Iterator接口方法 程序示例 Iterator仅用于遍历集合 Iterator必须依附于Collection对象 修改迭代变量的值 ...
- test 5.1 高精度小数(10分)
请写一个程序,输入一个分数,计算出它的小数形式.无论是否可以除尽,输出最多小数点后200位. 题目内容 由于计算机内部表达方式的限制,浮点运算都有精度问题,为了得到高精度的计算结果,就需要自己设计实现 ...
- Leetcode 412.FizzBuzz
题目描述 写一个程序,输出从 1 到 n 数字的字符串表示. 1. 如果 n 是3的倍数,输出"Fizz": 2. 如果 n 是5的倍数,输出"Buzz": 3 ...
- Tp5安全篇入门
输入安全 设置public目录为唯一对外访问目录,不能把资源文件放入到应用目录: 使用框架提供的请求变量获取方法(Request类的param方法及input助手函数)而不是原生系统变量获取用户输入的 ...
- OpenGL ES 学习笔记 - Overview - 小旋的博客
移动端图形标准中,目前 OpenGL ES 仍然是比较通用的标准(Vulkan 则是新一代),这里新开一个系列用于记录学习 OpenGL ES 的历程,以便查阅理解. OverView OpenGL ...
- ReadHub项目Kotlin版开发指南(三、MVP架构)
ReadHub项目Kotlin版转换指南(一.环境搭建) ReadHub项目Kotlin版转换指南(二.数据库和网络请求) ReadHub项目Kotlin版转换指南(三.MVP架构) Android ...