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

  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. 20.cocoapods的安装和使用

    一.CocoaPods是什么? CocoaPods是一个负责管理iOS项目中第三方开源库的工具.CocoaPods的项目源码在Github上管理.该项目开始于2011年8月12日,在这两年多的时间里, ...

  2. pygame 练习之 PIE game （以及简单图形训练）

    简单的大饼游戏,掌握pygame中直线以及圆弧的画法,以及对输入的响应. import math import pygame, sys from pygame.locals import * pyga ...

  3. 原因是出现以下错误: 80040154 没有注册类 (异常来自 HRESULT:0x80040154 (REGDB_E_CLASSNOTREG))

    场景: 客户端初始化正常,到IIS服务就报80040154. System.Web.Services.Protocols.SoapException: System.Web.Services.Prot ...

  4. UI Automation Test

    UI Automation test is based on the windows API. U can find the UI Automation MSDN file from http://m ...

  5. 手拼SQL小技巧，WHERE 1=1

    由于项目要求,要手动拼接SQL,(不知道领导们怎么想的--),然后就再次回到原始时代,append(SQL). 但后面查询牵扯到动态多条件,如果是mybatis的话就直接 可以用<if>标 ...

  6. Swift：subscript

    本文转载自:http://blog.csdn.net/sinat_27706697/article/details/47122137 感谢作者:秋恨雪 通常情况下,我们在使用数组(Array)或字典( ...

  7. eclipse js 引用跳转

    引用 http://stackoverflow.com/questions/24505993/the-resource-is-not-on-the-build-path-of-a-javascript ...

  8. Parameter Passing / Request Parameters in JSF 2.0 (转)

    This Blog is a compilation of various methods of passing Request Parameters in JSF (2.0 +) (1)  f:vi ...

  9. 第53讲：Scala中结构类型实战详解

    今天学习了scala的结构类型,让我们看看代码 class Structural {def open() = print("A class interface opened") } ...

  10. wpa_supplicant代码走读

    wpa_supplicant_add_iface wpa_supplicant_init_iface wpa_supplicant_set_driver wpa_config_read wpa_sup ...