Atitit usrqbg1834 html的逻辑化流程化 规范标准化解决方案

常用指令1

、、v-if、v-else指令2

v-for指令3

MVVM大比拼4

常用指令

本来按照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、AvalonJSAngularjs等,每一款都有它们自己的优势。

· 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的逻辑化流程化 规范标准化解决方案的更多相关文章

  1. Atitit usrQBK1600 技术文档的规范标准化解决方案

    Atitit usrQBK1600 技术文档的规范标准化解决方案 1.1. Keyword关键词..展关键词,横向拓展比较,纵向抽象细化拓展知识点1 1.2. 标题必须有高大上词汇,参考文章排行榜,1 ...

  2. Atitit usrqbg1821 Tls 线程本地存储(ThreadLocal Storage 规范标准化草案解决方案ThreadStatic

    Atitit usrqbg1821 Tls 线程本地存储(ThreadLocal Storage 规范标准化草案解决方案ThreadStatic 1.1. ThreadLocal 设计模式1 1.2. ...

  3. Atitit..组件化事件化的编程模型--(2)---------Web datagridview 服务器端控件的实现原理and总结

    Atitit..组件化事件化的编程模型--(2)---------Web datagridview 服务器端控件的实现原理and总结 1. 服务端table控件的几个流程周期 1 1.1. 确认要显示 ...

  4. atitit.组件化事件化的编程模型--服务端控件(1)---------服务端控件与标签的关系

    atitit.组件化事件化的编程模型--服务端控件(1)---------服务端控件与标签的关系 1. 服务器控件是可被服务器理解的标签.有三种类型的服务器控件: 1 1.1. HTML 服务器控件  ...

  5. libsvm 之 easy.py(流程化脚本)注释

    鉴于该脚本的重要性,很有必要对该脚本做一个全面的注释,以便可以灵活的使用libsvm. #!/usr/bin/env python # 这种设置python路径的方法更为科学 import sys i ...

  6. iOS 组件化流程详解(git创建流程)

    [链接]组件化流程详解(一)https://www.jianshu.com/p/2deca619ff7e

  7. Node.js-串行化流程控制

    内容主要来源:吴海星译,<Node.js实战>. 串行任务:需要一个接着一个坐的任务叫做串行任务. 可以使用回调的方式让几个异步任务按顺序执行,但如果任务过多,必须组织一下,否则过多的回调 ...

  8. 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 ...

  9. atitit.验证码识别step4--------图形二值化 灰度化

    atitit.验证码识别step4--------图形二值化 灰度化 1. 常见二值化的方法原理总结 1 1.1. 方法一:该方法非常简单,对RGB彩色图像灰度化以后,扫描图像的每个像素值,值小于12 ...

随机推荐

  1. 编译gtk+程序报错gcc: pkg-config --cflags --libs gtk+-2.0: 没有那个文件或目录

    第一次接触gtk+.在网上搜罗良一番,装好相应的库后,编写了第一hello程序.在编译时输入以下命令:gcc -o hello hello.c 'pkg-config --cflags --libs ...

  2. doxygen的使用(二)给代码添加javadoc风格的注释

    原创文章,欢迎阅读,禁止转载.本文记一下javadoc风格注释的写法,这些特殊格式的注释称作标签.按照这种规范写的注释才能生成到文档中. 块注释的写法 /** * @brief 这个块注释 * dox ...

  3. node的事件模块应用(译)

    第一次接触Node.js时,就觉得他只不过是用javascript实现的服务端.但实际上他提供了许多浏览器端不具备的方法,比如EventEmitter类.我们在本文中来学习如何使用EventEmitt ...

  4. webdriver 获取alert 提示no alert is active

    http://hi.baidu.com/janice515/item/bce536bb136e8441bb0e120f 摘上面: 一般正常情况下会报错,如 no alert is  active  目 ...

  5. 从网络上下载文件到sd卡上

    String SDPATH = Environment.getExternalStorageDirectory() + "/"; String path = SDPATH + &q ...

  6. 是uibutton跟tableviewcell同步使用一个bug

    这个问题是uibutton跟tableviewcell同步使用一个bug,不关delay一点毛事,证据就是点击事件没问题,so,搜到一个方法解决了这个问题.uibutton分类symbian2+ios ...

  7. (原创)巩固理解基于DS18B20的1-wire协议(MCU,经验)

    1.Abstract     如前篇随笔所写,将以前遇到最难懂的两个部分重拾一下.前一篇写的是I2C协议(http://www.cnblogs.com/hechengfei/p/4117840.htm ...

  8. (转)JQuery上传插件Uploadify使用详解

    原文地址:http://www.cnblogs.com/oec2003/archive/2010/01/06/1640027.html Uploadify是JQuery的一个上传插件,实现的效果非常不 ...

  9. Linux下搭建PHP环境

    转载于: http://www.uxtribe.com/php/405.html 该站下有系列PHP文章. 在Linux下搭建PHP环境比Windows下要复杂得多.除了安装Apache,PHP等软件 ...

  10. Arcengine 中,创建色带

    1,利用combobox创建色带,首先draw private void comboBox1_DrawItem(object sender, DrawItemEventArgs e)        { ...