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>

<h1>大人or小孩：<span v-if="Age>18">大人</span><span v-else>小屁孩</span></h1>

<h1>学校：{{ School }}</h1>

</div>

//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>

<ul>

<li v-for="value in nums">{{value}}</li>

</ul>

</div>

//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://blog.csdn.net/attilax

Atiend

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

Atitit usrQBK1600 技术文档的规范标准化解决方案
Atitit usrQBK1600 技术文档的规范标准化解决方案 1.1. Keyword关键词..展关键词,横向拓展比较,纵向抽象细化拓展知识点1 1.2. 标题必须有高大上词汇,参考文章排行榜,1 ...
4-2 能力提升与优势打造-工作流程梳理-从执行跃迁到流程的方法流程化、工具化、清单化
本次目标: (1)获得从基础琐碎的工作中锻炼能力.干出成绩的方法 (2)学习流程化.工具化.清单化这三个方法 (3)沉淀工作经验,迅速摆脱基层岗位的经验束缚 (4)具备管理岗位具备的能力,加速职业发展 ...
以地理国情调查任务为基础的地图矢量化流程研究
宇宙最激烈的矢量化战争!以地理国情调查任务为基础的地图矢量化流程研究前言一.任务流程 1.1 把握任务大致流程 1.2 研读文档 1.3 地图矢量化 1.4 数据检查 1.5 数据提交审核二.标 ...
代码REVIEW的流程化工作
一.CODE REVIEW工作组织建立代码REVIEW的工作,多数人认为是程序员的事情,其实恰恰理解的不充分,代码作为软件最基本要素之一,仅仅是之一,软件其实还有很多方面,设计,推广,销售,服务等等 ...
复杂任务处理三部曲：系统性思维、结构化思维、流程化管理
欢迎大家关注公众号「JAVA前线」查看更多精彩分享文章,主要包括源码分析.实际应用.架构思维.职场分享.产品思考等等,同时欢迎大家加我个人微信「java_front」一起交流学习 1 文章概述在处理 ...
通用流程化应用审批单设计思路（一）
本文为通用流程化应用审批设计思路表单部分. 审批单结构分析审批单承载流程化应用所需要的业务信息,以及业务操作处理入口.为了实现审批单与具体业务松藕.快速开发的目标,在此提出审批单框架的设计思路.如下 ...
用生命周期规范组件化流程
写在前面 1. 组件划分架构宿主壳.调试壳组件层基础层 MVC.MVP.MVVM 如何下沉 Utils 规范:使用 Kotlin 静态方法单例模式 res 规范:命名清晰 string.xm ...
谷露专访铃盛Sr. TA Manager：从0到1搭建雇主品牌的流程化管理和文化法则
受访者 – Rachel Wang:编辑 – Elina@Gllue(未经允许请勿转载) 作为一家全球领先的企业云通信提供商,铃盛连续5年成为Gartner魔力象限评选的UCaaS(Unified-C ...
企业工作流程化重要吗？
企业工作流程化其实是非常非常重要的. 我们先搞清楚什么是企业工作流程化? 企业流程化,说简单点就是一种组织能力,就是把优秀个体的成功经验.成功的工作方法变成组织的一种能力. 华为任正非曾经说过一句话: ...
【研发管理】结构化流程框架
借鉴华为的架构化流程框架思想,在某些思想上极具借鉴意义.如何体现市场驱动.客户需求导向.把产品开发作为投资来管理的思想. 架构化流程框架能够解决: 满足客户需求有差异化竞争力能商业成功高质量的产 ...

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

常用指令

、、v-if、v-else指令

v-for指令

MVVM大比拼

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

最新文章

热门文章

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

常用指令

、、v-if、v-else指令

v-for指令

MVVM大比拼

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

最新文章

热门文章

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

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