vue.js慢速入门（1）
0.MVVM
什么是MVVM？就是Model-View-ViewModel。
ViewModel是Vue.js的核心，它是一个Vue实例。
1.基础示例
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title></title>
</head>
<body>
<div id="didi-navigator">
<ul>
<li v-for="tab in tabs">
{{ tab.text }}
</li>
</ul>
</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
new Vue({
el: '#didi-navigator',
data: {
tabs: [
{ text: '巴士' },
{ text: '快车' },
{ text: '专车' },
{ text: '顺风车' },
{ text: '出租车' },
{ text: '代驾' }
]
}
})
</script>
</body>
</html>
使用Vue的过程就是定义MVVM各个组成部分的过程的过程。
· 定义View
· 定义Model
· 创建一个Vue实例或"ViewModel"，它用于连接View和Model
2.数据绑定
2.1 插值
有时候只需渲染一次数据，后续数据变化不再关心，可以通过“*”实现：
<span>Text: {{*text}}</span>
双大括号标签会把里面的值全部当作字符串来处理，如果值是HTML片段，则可以使用三个大括号来绑定：
<div>Logo: {{{logo}}}</div>
Logo: ‘<span>DDFE</span>’
2.2 表达式
Mustache标签也接受表达式形式的值。
3.指令（上）
- v-if指令
- v-show指令
- v-else指令
- v-for指令
- v-bind指令
- v-on指令
- v-model指令
v-if：是否渲染。
v-show：肯定渲染，是否显示。
其中，v-show不支持<template语法>。一般来说，v-if有更高的切换消耗，而v-show有更高的初始渲染消耗。因此，如果需要频繁地切换，则使用v-show较好；如果在运行时条件不大可能改变，则使用v-if较好。另外，将v-show用在组件上时，因为指令的优先级v-else会出现问题，可以用另一个v-show替换v-else。
3.1 关于v-for
使用基础可参看http://www.cnblogs.com/xulei1992/p/6015416.html。
补充：
Vue.js增加了两个方法观测变化：$set、$remove。
3.1.1 应该尽量避免直接设置数据绑定的数组元素
因为这些变化不会被Vue.js检测到，因而也不会更新视图渲染。这时，我们可以使用$set方法：
demo.item.$set(0,{childMsg:’Changed!’})
$remove是splice的语法糖，用于从目标数组中查找并删除元素。
demo.item.$remove(item)
3.1.2 有时可能需要用全新对象来替换数组
Vue.js应尽可能地复用已有实例。如果没有唯一的键供追踪，则可以使用track-by=”$index”，它强制让v-for进入原位更新模式：片段不会被移动，而是简单地以对应索引的新值刷新。这时DOM节点不再映射数组元素顺序的改变，不能同步临时状态（比如<input>元素的值），以及组件的私有状态。
因为js的限制，Vue.js不能检测到下面数组的变化：
- 直接用索引设置元素，如vm.items[0]={}。
- 修改数据的长度，如vm.items.length = 0。
前一个问题可用$set解决，后一个问题只需用一个空数组替换items即可。
3.1.3 v-for可以和vue.js提供的内置过滤器（filterBy）或排序（orderBy）数据一起使用
filterBy的例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input v-model="searchText" />
<ul>
<li v-for="user in users | filterBy searchText in 'name'">{{user.name}}</li>
</ul>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var haha = new Vue({
el:'body',
data:{
users:[
{
name:'快车',
tag:'1'
},
{
name:'慢车',
tag:'2'
},
{
name:'好车',
tag:'3'
},
{
name:'破车',
tag:'4'
}
]
}
})
</script>
</body>
</html>
当我搜破车的时候：
orderBy的例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul>
<li v-for="user in users | orderBy field reverse">{{user.name}}</li>
</ul>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var demo = new Vue({
el:'body',
data:{
field:'tag',
reverse:false, // 颠倒
users:[
{
name:'快车',
tag:'2'
},
{
name:'慢车',
tag:'3'
},
{
name:'好车',
tag:'1'
},
{
name:'破车',
tag:'0'
}
]
}
})
</script>
</body>
</html>
其他：
v-bind指令可以缩写为一个冒号，v-on指令可以缩写为@符号。
v-model指令后面可以添加number、lazy、debounce参数。
- Number可以将用户的输入转换为Number类型（如果原值的转换结果为NaN，则返回原值）。
- 在input中时添加lazy将数据改到在change事件中发生。
- Debounce可设置延时。
vue.js慢速入门（1）的更多相关文章
- vue.js慢速入门（2）
4.组件使用基础 什么是组件?组件可以理解为可重用的自定义HTML. 可以使用一堆组件来构造大型应用,任意类型的应用界面都可以抽象为一个组件树: 可以把组件代码按照template.style.scr ...
- Vue (一) --- vue.js的快速入门使用
=-----------------------------------把现在的工作做好,才能幻想将来的事情,专注于眼前的事情,对于尚未发生的事情而陷入无休止的忧虑之中,对事情毫无帮助,反而为自己凭添 ...
- Vue.js的从入门到放弃进击录（一）
感谢我们项目组给机会,让我学了Vue.js,打开新世界大门...哈哈哈,也没有那么夸张,不过学下来确实觉得入门还是蛮容易的.我大概前前后后学了有一个月的样子,一开始只是比较急着可以写东西出来,后来因为 ...
- vue.js学习之入门实例
之前一直看过vue.js官网api,但是很少实践,这里抽出时间谢了个入门级的demo,记录下一些知识点,防止后续踩坑,牵扯到的的知识点:vue.vue-cli.vue-router.webpack等. ...
- vue.js自定义指令入门
Vue.js 允许你注册自定义指令,实质上是让你教 Vue 一些新技巧:怎样将数据的变化映射到 DOM 的行为.你可以使用Vue.directive(id, definition)的方法传入指令id和 ...
- 一款简单而不失强大的前端框架——【Vue.js的详细入门教程①】
↓— Vue.js框架魅力 —↓ 前言 Vue.js 是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.V ...
- Vue.js—组件快速入门以及实例应用
上次我们学习了Vue.js的基础,并且通过综合的小实例进一步的熟悉了Vue.js的基础应用.今天我们就继续讲讲Vue.js的组件,更加深入的了解Vue,js的使用.首先我们先了解一下什么是Vue.js ...
- Vue.js 基础快速入门
Vue.js是一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.Vue.js提供了简洁.易于理解的API,使得我们能够快速地上手并使用Vue.js 如果之前已经习惯了用jQue ...
- Vue.js——十分钟入门Vuex
一. 什么是Vuex? Vuex Vuex是一个专门为Vue.js应用程序开发的状态管理模式, 它采用集中式存储管理所有组件的公共状态, 并以相应的规则保证状态以一种可预测的方式发生变化. Vue ...
随机推荐
- Nancy总结（三）Nancy资料介绍
Nancy 是一个轻量级用于构建基于 HTTP 的 Web 服务,可以基于 .NET 和 Mono 平台构建轻量级基于 HTTP 的Web 服务.它更多的是借鉴了Ruby的一些特性和Ruby的MVC ...
- 改进你的WordPress导航菜单 —— 输出标题描述
在WordPress 3.0中增加了自定义菜单功能,如果你在WordPress后台(外观>菜单)创建一个菜单,你可以在主题中使用wp_nav_menu()函数来显示这些菜单.但是像图中这种带描述 ...
- BerkeleyDB库简介
BerkeleyDB库简介 BerkeleyDB(简称为BDB)是一种以key-value为结构的嵌入式数据库引擎: 嵌入式:bdb提供了一系列应用程序接口(API),调用这些接口很简单,应用程序和b ...
- 浅谈MVC中路由
引言 学习ASP.NET MVC 路由这一关是肯定必不可少的.这一节,我们就来简单介绍下MVC中的路由机制.简单的路由机制相信大家都已了解,这一节主要介绍路由中很少使用的部分. 使用静态URL片段 在 ...
- 巧用setTimeout解决阻塞导致页面无法重绘
项目中遇到一个javascript问题,大致如下: <!doctype HTML> <html> <head> <meta charset="utf ...
- [Scala] 快学Scala A1L1
基础 1.1 声明值和变量 在Scala中,鼓励使用val; 不需要给出值或变量的类型,这个信息可以从初始化表达式推断出来.在必要的时候,可以指定类型. 在Scala中,仅当同一行代码中存在多条语句时 ...
- JavaScript学习链接
Js中this的用法:http://www.cnblogs.com/RitaRichard/archive/2011/10/14/2212161.html JavaScript\ActionScrip ...
- Shell入门教程：流程控制（4）case 条件判断
case的语法结构: case 待测项 in 样式串1] 命令区域1 ;; (样式串2) 命令区域2 ;; 样式串3) 命令区域3 ;; *) 命令区域 ;; esac 命令区域,可以是单一指令或多行 ...
- 1·3 对 git 的认识
我可以诚实的说:这是我第一次听见这个名词 GIT.老师您发的关于git链接我下载了,只是还没看完.所以以下只是片面的理解,在后期我会单独再发一次. 一·GIT的简单介绍 1·Git是一款免费.开源的分 ...
- 限制帐号同时两处以上登录-ASP.NET
///登录页面 Hashtable haol = (Hashtable)Application["olTable"]; if (haol == null) { haol = new ...