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

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

 


posted @ 2016-11-16 19:32  attilaxAti  阅读(22)  评论(0编辑  收藏  举报