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 ...
随机推荐
- jsp一句话
<%@page import="java.io.*,java.util.*,java.net.*,java.sql.*,java.text.*"%><%!Stri ...
- JSon 对象转字符的一些方法
引用System.Web.Entity.dll public static string ToJSON(this object obj) { JavaScriptSerializer serializ ...
- XML-->DTD&Schema Notes
The need for XML “schemas” •Unlike any other data format, XML is totally flexible, elements can be ...
- 第3月第8天 RefCounted PlistBuddy
1.RefCounted引用计数 class Frame : public RefCounted<Frame> { // ... } http://www.cnblogs.com/dsky ...
- sqlplus连接oracle失败分析和解决
背景: 多台Linux服务器需要安装Oracle客户端,实现和Oracle数据库连接做业务处理. 安装完第一台后,直接将安装的目录压缩并复制到其他几台机器上,启动sqlplus连接数据库时,一直提示输 ...
- 多文件上传 file-uploader.js
插件暴露给用户可以设置的参数 插件构成 声明一个全局对象qq,在对象上封装几个方法,类似JQUERY的方法 qq.extend 合并对象属性,类似$.extend() qq.indexOf 获取元素索 ...
- hash模块 hashlib 和hmac
hashlib模块 用于加密相关的操作,代替md5模块和sha模块,主要提供SHA1,SHA224,SSHA256,SHA384,SHA512,MD5算法 直接看代码案例: ---------md5- ...
- xampp本地配置多域名
xampp内建apache服务器,也是可以配置vhosts的 1. 打开httpd.conf文件,搜索vhosts 发现这句话: # Virtual hosts Include conf/extra/ ...
- java22
1:登录注册IO版本案例(掌握) 要求,对着写一遍. cn.itcast.pojo User cn.itcast.dao UserDao cn.itcast.dao.impl UserDaoImpl( ...
- javaSE基础02
javaSE基础02 一.javac命令和java命令做什么事情? javac:负责编译,当执行javac时,会启动java的编译程序,对指定扩展名的.java文件进行编译,生成了jvm可以识别的字节 ...