Atitit usrqbg1834 html的逻辑化流程化 规范标准化解决方案
Atitit usrqbg1834 html的逻辑化流程化 规范标准化解决方案
常用指令
本来按照Vue文档说明，常用指令应该是放在后面介绍的，但是从使用的层面考虑，先介绍常用指令还是非常必要的，因为博主觉得这些指令是我们入手使用Vue的桥梁，没有这些基石，一切的高级应用都是空话。
Vue里面为我们提供的常用指令主要有以下一些。
· v-text
· v-html
· v-if
· v-show
· v-else
· v-for
· v-on
· v-bind
· v-model
· v-pre
· v-cloak
· v-once
、、v-if、v-else指令
v-if和v-else是一对离不开的好兄弟，使用条件运算符判断时常用。需要说明的是，v-if可以单独使用，但是v-else的前面必须要有一个v-if的条件或者v-show指令（后面介绍），这个和我们编程的原理是一样一样的。
它们作为条件渲染指令，他们的基础语法如下：
v-if="expression",v-else;
注意这里的v-else可以不写，expression表达式是一个返回bool类型的属性或者表达式。
<body>
<div id="app">
<h1>姓名：<label v-text="Name"></label></h1>
<h1>是否已婚：<span v-if="IsMarry">是</span></h1>
<h1>大人or小孩：<span v-if="Age>18">大人</span><span v-else>小屁孩</span></h1>
<h1>学校：{{ School }}</h1>
</div>
<script src="Content/vue/dist/vue.js"></script>
<script type="text/javascript">
//Model
var data = {
Name: '小明',
IsMarry: true,
Age: 20,
School:'光明小学',
}
//ViewModel
var vue = new Vue({
el: '#app',
data: data,
});
v-for指令
v-for 指令需要以 item in items 形式的特殊语法。常用来绑定数据对象。
最简单的例子：
<body>
<div id="app">
<ul>
<li v-for="value in nums">{{value}}</li>
</ul>
</div>
<script src="Content/vue/dist/vue.js"></script>
<script type="text/javascript">
//ViewModel
var vue = new Vue({
el: '#app',
data: {
nums: [1, 2, 3, 4, 5, 6, 7, 8, 9]
}
});
</script>
MVVM大比拼
关于MVVM，原来在介绍knockout.js的时候有过讲解，目前市面上比较火的MVVM框架也是一抓一大把，比如常见的有Knockout.js、Vue.js、AvalonJS、Angularjs等，每一款都有它们自己的优势。
· Knockout：微软出品，可以说是MVVM的模型领域内的先驱，使用函数偷龙转凤，最短编辑长度算法实现DOM的同步，兼容IE6，实现高超，但源码极其难读，最近几年发展缓慢。
· Vue：是最近几年出来的一个开源Javascript框架，语法精简，实现精致，但对浏览器的支持受限，最低只能支持IE9。
· AvalonJS：是一个简单易用迷你的MVVM框架，由大神司徒正美研发。使用简单，实现明快。
· React：React并不属于MVVM架构，但是它带来virtual dom的革命性概念，受限于视图的规模。
· Angularjs：Google出品，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。入门容易上手难，大量避不开的概念也是很头疼的。
Atitit. js框架angular.js Knockout.js与react vue.js jq.tmpl的使用总结2016流行的.docx
JS组件系列——又一款MVVM组件：Vue（一：30分钟搞定前端增删改查） - 懒得安分 - 博客园.html
作者:: 绰号:老哇的爪子 （ 全名：：Attilax Akbar Al Rapanui 阿提拉克斯 阿克巴 阿尔 拉帕努伊 ）
汉字名：艾提拉（艾龙）， EMAIL:1466519819@qq.com
转载请注明来源： http://www.cnblogs.com/attilax/
Atiend
Atitit usrqbg1834 html的逻辑化流程化 规范标准化解决方案的更多相关文章
- Atitit usrQBK1600 技术文档的规范标准化解决方案
Atitit usrQBK1600 技术文档的规范标准化解决方案 1.1. Keyword关键词..展关键词,横向拓展比较,纵向抽象细化拓展知识点1 1.2. 标题必须有高大上词汇,参考文章排行榜,1 ...
- Atitit usrqbg1821 Tls 线程本地存储(ThreadLocal Storage 规范标准化草案解决方案ThreadStatic
Atitit usrqbg1821 Tls 线程本地存储(ThreadLocal Storage 规范标准化草案解决方案ThreadStatic 1.1. ThreadLocal 设计模式1 1.2. ...
- Atitit..组件化事件化的编程模型--(2)---------Web datagridview 服务器端控件的实现原理and总结
Atitit..组件化事件化的编程模型--(2)---------Web datagridview 服务器端控件的实现原理and总结 1. 服务端table控件的几个流程周期 1 1.1. 确认要显示 ...
- atitit.组件化事件化的编程模型--服务端控件(1)---------服务端控件与标签的关系
atitit.组件化事件化的编程模型--服务端控件(1)---------服务端控件与标签的关系 1. 服务器控件是可被服务器理解的标签.有三种类型的服务器控件: 1 1.1. HTML 服务器控件 ...
- libsvm 之 easy.py（流程化脚本）注释
鉴于该脚本的重要性,很有必要对该脚本做一个全面的注释,以便可以灵活的使用libsvm. #!/usr/bin/env python # 这种设置python路径的方法更为科学 import sys i ...
- iOS 组件化流程详解(git创建流程)
[链接]组件化流程详解(一)https://www.jianshu.com/p/2deca619ff7e
- Node.js-串行化流程控制
内容主要来源:吴海星译,<Node.js实战>. 串行任务:需要一个接着一个坐的任务叫做串行任务. 可以使用回调的方式让几个异步任务按顺序执行,但如果任务过多,必须组织一下,否则过多的回调 ...
- atitit.js 与c# java交互html5化的原理与总结.doc
atitit.js 与c# java交互html5化的原理与总结.doc 1. 实现html5化界面的要解决的策略1 1.1. Js交互1 1.2. 动态参数个数1 1.3. 事件监听2 2. sen ...
- atitit.验证码识别step4--------图形二值化 灰度化
atitit.验证码识别step4--------图形二值化 灰度化 1. 常见二值化的方法原理总结 1 1.1. 方法一:该方法非常简单,对RGB彩色图像灰度化以后,扫描图像的每个像素值,值小于12 ...
随机推荐
- python 使用字符串名调用类以及调用类方法名
在python中,有时调用者仅知道类名和类方法,不负责实际的函数调用,而是将要调用的类名和类方法告诉一个中间函数,由中间函数负责实际调用函数.中间函数需以被告知的字符串调用类和类方法. ...
- 【洛谷P3385】模板-负环
这道题普通的bfs spfa或者ballen ford会T 所以我们使用dfs spfa 原因在于,bfs sfpa中每个节点的入队次数不定,退出操作不及时,而dfs则不会 既然,我们需要找负环,那么 ...
- RocksDB笔记 - Compaction中的Iterator
Compaction中的Iterator 一般来说,Compaction的Input涉及两层数据的合并,对于涉及到的每一层数据: 如果是level-0,对level-0的每一个sstable文件建立一 ...
- 第五章GPIO接口
5.1 GPIO硬件介绍 可以不通过他们输出高低电平或者通过它们读入应交的状态 S3C2410有117个I/O端口,分为A~H共8组:GPA.GPB....GPH S3C2440有130个I/O端口, ...
- MSVCRTD.lib(mfc.obj) : error LNK2019: 无法解析的外部符号 _WinMain@16，该符号在函数 ___tmainC (转)
一.问题描述 我所使用的编程环境:VS2010 出现的问题如下: MSVCRTD.lib(mfc.obj) : error LNK2019: 无法解析的外部符号_WinMain@16,该符号在函数 _ ...
- excel转化为table（去掉所有列值都为空的值一行，即返回有效值的DataTable）
/// <summary> /// 去掉所有列值都为空的值一行,即返回有效值的DataTable /// </summary> /// <param name=" ...
- 读bootstrap2.3.2有感2
排版: Bootstrap定义的全局 font-size 是 14px,line-height 是 20px.这些样式应用到了 <body> 和所有的段落上.另外,对 <p> ...
- wordpress搬家换域名
很多朋友开始接触wordpress都是在本地安装调试好了,再上传到服务器正常运营,我也是一样当我在本地测试好了准备将网站上线,在搬家到服务器的时候遇到过的一些问题,记录分享一下我是如何为wordpre ...
- App开发如何利用Fidder，在api接口还没有实现的情况下模拟数据，继续开发
相信app开发很多时候,都是等后台出接口,拿到数据调试错误.殊不知,我们完全可以不用等,只要有约定好的接口定义文档,借助工具就能做到,自己模拟数据返回~ 下面主要是在项目组开发过程中,使用F ...
- libQtCassandra 0.5.0 发布
libQtCassandra 0.5.0 修复了 QCassandraRow::exists() 函数的问题,更新了 Thrift 库. libQtCassandra 是一个高级的 C++ 库用来访问 ...