[vue]mvc模式和mvvm模式及vue学习思路(废弃)
好久不写东西了,感觉收生疏了, 学习使用以思路为主, 记录笔记为辅作用.
v-if: http://www.cnblogs.com/iiiiiher/p/9025532.html
v-show
template
v-bind: http://www.cnblogs.com/iiiiiher/p/9025764.html
style
class
属性值
v-on: http://www.cnblogs.com/iiiiiher/p/9025935.html
computed: http://www.cnblogs.com/iiiiiher/p/9025253.html
依赖项触发get
bootstrap布局
bootstrap-table基于bootstrap的表格插件
Ant Design Pro基于react, 这里可以了解一下网页的组件
- 布局
- 表单
- 列表
- bootstrap
1.栅格化布局 默认12列(有一些框架可能是24列)
<div class="container">
<div class="row">
2.常见的样式 基本样式 + 增强样式
<table class="table table-hover table-bordered">
<button class="btn btn-danger" @click="remove(product)">删除</button>
注意: default 灰色 success 绿色 danger 红色 warning 警告色 info浅蓝色 primary 蓝色
js
- ajax
- 数据绑定
- vue的ui框架
iview,mintui,elementui
- js基础板块
原型--原型链继承--实例化过程--所有函数都是Fucntion的一个实例
私有this
prototype里的this
json
数据绑定
1.逐次加
2.一次加
回流 重绘
3.文档碎片
- vue板块
1.模板
v-text(v-once)
v-html
v-model
修饰符: .number .lazy .trim
v-bind: 冒号
v-on: @
@keyup.enter.ctrl
2.表单
绑定值
绑定数组
select选择: category
select多选,标签
checbox单选: 置顶
checkbox多选: 多选题
radio单选: 单选题
3.事件
todo: vue-router
vuex
keyup.enter
onclick
onchange
onsubmit
arr.map
arr.filters
栗子:删除按钮
remove(p){ // p代表的是当前点击的这一项 [xxx,ooo,qqq,ppp,p]
this.products = this.products.filter(item=>item!==p);
},
arr.reduce
栗子: 计算总价格
return this.products.reduce((prev,next)=>{
console.log(1000000);
if(!next.isSelected)return prev; // 如果当前没被选中,就不加当前这一项
return prev+next.productPrice*next.productCount;
},0);
arr.forEach
栗子: 全选/反选(set)(computed)
set(val){ //val是给checkAll 赋予值的时候传递过来的
this.products.forEach(item=>item.isSelected = val );
}
arr.every
找false,如有返回false,如无返回true.
栗子:
全选/反选(get)(computed)
computed的缓存特性:
一般computed里只会有get,不会set. 如果只有get,可以省略不写get.
学习vue的时候,会有mvvm的概念, 就先理解下mvc环状模型
从Script到Code Blocks、Code Behind到MVC、MVP、MVVM-写的不错,涉及到一些哲学思想
理解网站设计的mvc数据单向循环模式
vue思路
1,框架和库
2, vue全家桶:
vuejs: (基于es5)
vue-router: 客户端路由
vuex: 大规模状态管理
axios: ajax获取数据
vue-cli: 构建工具
-
3,特点
响应的变化
数据改变,视图自动更新
MVC:
model: 模型
view: 数据
controller: 控制器
MVVM:
model: 模型
view: 视图
view-model: 视图模型
-
组合的视图组件
4,体验
1.npm安装
2.绑定数据
vm.msg改变
3.双向绑定
input textarea select checkbox radio
view <-- model
view --> model(view-model)
前端发生
前端的model相当于data部分
前端的view相当于input等表单
1,4个指令
v-model
v-once
v-text 代替{{}},解决闪烁问题
<style>
{display: none}
</style>
<div id="app" v-cloak>
</div>
v-html
2,arr的监控(修改data)
不可监控: 修改arr的某一项
1.通过下标识
2.通过长度
可监控: pop/push shift/unshift sort/reverse splice reduce/filter
3.arr的遍历
v-for: 替代innerHTML
4.函数
4.1 定义: method的2种写法
1.
写data里
写methods里
2. v-on === @ 两种写法
<div v-on:mousedown="fn">1.查看帮助...</div>
<div @mousedown="fn2">2.查看帮助...</div>
4.2 调用
第一个位置参数默认是event.
fn2() fn2()
fn3(event) fn3()
fn4(event, age) fn4($event, 22)
5.简易todo
1.v-model: 双向绑定
2.v-for: arr遍历
3.v-on: 函数
input --> v-model
button--> v-on @event
arr --> v-for
回车添加
写完清空
事件触发条件:
@keyup.13="add"
@keyup.enter="add"
@keyup.a="add"
@keyup.contrl.a="add"
v-model:
input
checkbox
1.checkbox要加value属性
2.且data字典要是arr类型
select单选
<select v-model="msg">
<option value="" disabled>请选择</option>
<option value="kanshu">看书</option>
<option value="pashan">爬山</option>
<option value="youyong">打球</option>
</select>
1,msg默认为空
请选择不允许点
2,如果value不写,msg默认取的是><之间的.
select多选: 数据类型需要是数组
<select name="" id="" multiple v-model="arr">
<option value="kanshu">看书</option>
<option value="pashan">爬山</option>
<option value="youyong">打球</option>
</select>
互斥: select单/checkbox
数据类型str, 加value
多选: select多选
数据类型,arr
箭头函数:
1, 无关键字
2, 如果1个参数, 则可以省掉小括号
3, 无this, this指向上一级作用域的this
// function fn(age) {
// console.log(age);
// }
fn = age => console.log(age);
fn(20);
1.axios获取数据
2.绑定
bootstrap表单布局
绑定数据
1.充当属性数据
<img :src="product.productCover" :title="product.productName">
2,小计
<td><input type="number" v-model.number.lazy="product.productCount"></td>
3,计算
<td>{{product.productPrice*product.productCount}}</td>
-
3.删除
[vue]mvc模式和mvvm模式及vue学习思路(废弃)的更多相关文章
- 对MVC模式与MVVM模式的认识
MVC模式与MVVM模式目的一样,主要是分离模型(model)和视图(view),具体介绍如下. 名词介绍 MVC模式:指的是模型(Model)-- 视图(View)-- 控制器(Controller ...
- MVP模式和MVVM模式
MVP模式 模型-视图-表示器,也就是MVP模式.是mvc模式的一种衍生模式,专注于改进表示逻辑. 与MVC不同,来自view的调用将委托给presenter(表示器),表示器通过接口与view对话. ...
- MVC模式 和 MVVM模式
MVC模式 模型 - 视图 - 控制器或MVC,MVC是普遍的叫法,是一种软件设计模式,用于开发Web应用程序.模型- 视图 - 控制器模式是由以下三部分组成: 模型/Model - 一个负责维护数据 ...
- MVC模式和MVVM模式简单理解
相信这是两个耳熟能详的词了,MVC广泛的用到了java的各种框架当中,比如Struts2, SpringMVC等,作为B/S架构开发,MVS模式也是我们必须掌握的. mvc一步一步演化之后有了现在的M ...
- 浅谈MVC模式与MVVM模式的区别
MVC模式: M:Model(数据模型),用于存放数据 V:View(视图),也就是用户界面 C:Controller是Model和View的协调者,Controller把Model中的数据拿过来给V ...
- MVP模式与MVVM模式
1.mvp模式(Model层 Presenter层 View 层) Model层 :数据层(ajax请求) Presenter层:呈现层,view逻辑相关的控制层,控制层可以去调Model去发ajax ...
- Android mvp模式、mvvm模式
MVC和MVP的区别2007年08月08日 星期三 上午 09:23 MVC和MVP到底有什么区别呢? 从这幅图可以看到,我们可以看到在MVC里,View是可以直接访问Model的!从而,View里会 ...
- MVVM模式解析和在WPF中的实现(六) 用依赖注入的方式配置ViewModel并注册消息
MVVM模式解析和在WPF中的实现(六) 用依赖注入的方式配置ViewModel并注册消息 系列目录: MVVM模式解析和在WPF中的实现(一)MVVM模式简介 MVVM模式解析和在WPF中的实现(二 ...
- MVVM模式解析和在WPF中的实现(五)View和ViewModel的通信
MVVM模式解析和在WPF中的实现(五) View和ViewModel的通信 系列目录: MVVM模式解析和在WPF中的实现(一)MVVM模式简介 MVVM模式解析和在WPF中的实现(二)数据绑定 M ...
随机推荐
- 移植 iperf 网络性能测试工具到 Android-P
. . . . . 新开发板使用了 Android-P 的方案,WiFi 刚刚调通,为了测试 WiFi 稳定性,需要使用 iperf 工具.但 Android 并没有提供这个工具,只能自己移植一份了. ...
- Unity读Excel 输出PC端(Windows)后不能读取的问题
问题:在Unity中用ExcelDataReader读Excel时,在编辑器模式下可以正常读取,但是在导出PC端app后读Excel却会报空,Excel读取失败. 要点: 1.把库文件Excel.dl ...
- PCL点云分割(3)
(1)Euclidean分割 欧几里德分割法是最简单的.检查两点之间的距离.如果小于阈值,则两者被认为属于同一簇.它的工作原理就像一个洪水填充算法:在点云中的一个点被“标记”则表示为选择在一个的集群中 ...
- linux通用技巧集合
1.将程序置为后台进程运行,关闭终端程序继续运行 nohup ./test.sh & 2.列出当前后台运行的进程列表包括进程id jobs -l 3.根据进程id杀掉该进程 kill - pi ...
- 第四百一十二节,python接口,抽象方法抽象类
Python接口 在Python中所谓的接口,有两种,一种是通过url访问的api接口 一种是一个对象的接口 构造接口 class Ijiekou: """ 定义一个约束 ...
- 新书出版 |《Oracle程序员面试笔试宝典》
新书出版 |<Oracle程序员面试笔试宝典> <Oracle程序员面试笔试宝典> 丛书[数据库 面试 笔试宝典]已在京东.淘宝和天猫预售,一共 5 本,目前市场上已有4本,丛 ...
- python什么时候加self,什么时候不加self
1.self是什么,一般都说指对象本身,这样说了没了用,说了后还是很难懂,因为这样说了后,仍然完全搞不清楚,什么时候变量前需要加self,什么时候不需要加self. 造成很多人,已经怕了self,不停 ...
- Oracle同义词(synonym)
oracle的同义词总结 从字面上理解就是别名的意思,和视图的功能类似.就是一种映射关系. 同义词拥有如下好处: 节省大量的数据库空间,对不同用户的操作同一张表没有多少差别; 扩展的数 ...
- ZooKeeper-3.3.4集群安装配置
https://blog.csdn.net/shirdrn/article/details/7183503
- K XOR Clique
BaoBao has a sequence a1,a2,...,an. He would like to find a subset S of {1,2,...,n} such that ∀i ...