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. Swift基础语法(一)

    swift是一个基于objc进化过来的一个新的 OS X/IOS编程语言,而objc是基于c语言进化过来的一门编程语言.所以理论上说objc与c++是同一代产物并且objc与c++是相互独立的两套体系 ...

  2. MyEclipse快捷键敏感设置

    对于一个程序员来说,敲代码没有快捷键是很难受的.自从我装了MyEclipse之后发现快捷键敏感性太差了比如说我打输出语句System.out.println();一般打syso就会有提示,但是我的My ...

  3. Win7 64位 VS2015环境编译cegui-0.8.5

    首先是去官网下载源码与依赖库 http://cegui.org.uk/ 然后得提一下,编译DX11版本带Effects11框架的话会有问题,也就是默认情况编译有问题,这是因为VS2015升级后编译器对 ...

  4. java中枚举(enum)小例子。之前学过枚举但是一直没用,这里有个枚举类帮你我理解下(很肤浅)

    直接上枚举类,代码简单易懂. package com.jy.modules.cims.data.interact.tbj.loan.request; /** * * @author shengzhou ...

  5. 关于mysql的access denied 错误解决方案

    mysql -u root -p 按回车,输入密码后提示access denied......ues password YES/NO的错误? 第一步: 这时你需要进入/etc/mysql目录下,然后s ...

  6. Changing the Color of Linux ls Command 改变Linux的ls命令显示的颜色

    Linux command ls basically use the file /etc/DIR_COLORS or /etc/DIR_COLORS.xterm to define the color ...

  7. [Leetcode][JAVA] Insert Interval

    Given a set of non-overlapping intervals, insert a new interval into the intervals (merge if necessa ...

  8. Sql server中访问Excel---select from Excel

    本文介绍在MSSMS中通过SQL语句查询Excel的方法. 访问Excel主要是通过Office提供的ACE数据源来完成这个操作,使用opendatasource来实现访问Excel.即在MSSMS中 ...

  9. 升级到win8.1右键响应慢

    网上很多资料都是在显卡上做文章,试了N次确定不是这个问题. 后来查到这个好用了.以管理员身份运行 下面代码保存bat即可 regsvr32 /u /s igfxpph.dll reg delete H ...

  10. usage of elinks (命令行下的firefox)

    No.0 Press "Esc" to show main menu ============================================= No.1 tyep ...