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 ...
随机推荐
- jquery 幻灯片 左右滚动
使用jquery封装的一个幻灯片插件 写的好差 参考了别人写的 后面再重构 现在这个应该可以直接用了 主要实现思路就是 添加当前选中状态 index相对应的 选中的图总是在第一位(也就是加选中状态的 ...
- Html5 杂记
(一):html5的声明 <!DOCTYPE html> 注意:声明必须是 HTML 文档的第一行,位于 <html> 标签之前. 声明不是 HTML 标签:它是指示 we ...
- AP(affinity propagation）研究
待补充…… AP算法,即Affinity propagation,是Brendan J. Frey* 和Delbert Dueck于2007年在science上提出的一种算法(文章链接,维基百科) 现 ...
- [译]Testing Node.js With Mocha and Chai
原文: http://mherman.org/blog/2015/09/10/testing-node-js-with-mocha-and-chai/#.ViO8oBArIlJ 为什么要测试? 在此之 ...
- tyvj1102 单词的划分
描述 有一个很长的由小写字母组成字符串.为了便于对这个字符串进行分析,需要将它划分成若干个部分,每个部分称为一个单词.出于减少分析量的目的,我们希望划分出的单词数越少越好.你就是来完成这一划分工作的. ...
- nyoj 448 寻找最大数（贪心专题）
寻找最大数 时间限制:1000 ms | 内存限制:65535 KB 难度:2 描述 请在整数 n 中删除m个数字, 使得余下的数字按原次序组成的新数最大, 比如当n=920813467185 ...
- JavaScript深入浅出5-数组
慕课网教程视频地址:Javascript深入浅出 数组:值的有序集合 创建数组:字面量,构造器new array() 数组的读写:push() 尾部加入新元素 unshift() 头部加入新元素 po ...
- weblogic虚拟路径的配置和使用
项目场景: 公司中医疗项目需要展示药品说明书的其他版本(图片或者PDF),由于其他版本文件存在Linux服务器上,由于服务器用的是weblogic, 无法直接访问文件,因此可以用weblogic的虚拟 ...
- Redis 复制、Sentinel的搭建和原理说明
背景: Redis-Sentinel是Redis官方推荐的高可用性(HA)解决方案,当用Redis做Master-slave的高可用方案时,假如master宕机了,Redis本身(包括它的很多客户端) ...
- ABAP 合并单元格自建函数
FORM frm_merge_cells USING sor_cell tar_cell. CALL METHOD OF excel 'Range' = range EXPORTING ...