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可设置延时。
参考:大神写的:http://www.cnblogs.com/keepfool/p/5619070.html
《vue.js权威指南》
转载于:https://www.cnblogs.com/xulei1992/p/6022422.html
vue.js慢速入门(1)相关推荐
- vue.js的快速入门使用
1. vue.js的快速入门使用 1.1 vue.js库的下载 vue.js是目前前端web开发最流行的工具库,由尤雨溪在2014年2月发布的. 另外几个常见的工具库:react.js /angula ...
- 2017 Vue.js 2快速入门指南
注意,据部分读者反映本文水多,怕湿身者勿进.后续推荐详解 Vue & Vuex 实践 2017 Vue.js 2快速入门指南翻译自Vue.js 2 Quickstart Tutorial 20 ...
- 1. vue.js的快速入门使用
1. vue.js的快速入门使用1.1 vue.js库的下载1.2 vue.js库的基本使用1.3 vue.js的M-V-VM思想1.4 显示数据2. 常用指令2.1 操作属性2.2 事件绑定例如:完 ...
- Vue (一) --- vue.js的快速入门使用
=-----------------------------------把现在的工作做好,才能幻想将来的事情,专注于眼前的事情,对于尚未发生的事情而陷入无休止的忧虑之中,对事情毫无帮助,反而为自己凭添 ...
- Vue.js 框架从入门到精通,只需要它!
点击蓝字 关注我们 你还在一行一行低效代码吗?你还在不停地操作 DOM 吗?你的代码还会频繁出现 CSS.Javascript 配置文件冲突吗? Vue3 框架快速解决你的代码低效问题! 01 Vue ...
- Vue.js 基础语法 入门语句 Vue学习笔记 v-model 双向数据绑定
Vue.js 基础语法,入门语句,Vue学习笔记 学习网站:https://www.bilibili.com/video/BV15741177Eh vue 的体验 响应式:数据一旦改变,视图就会响应改 ...
- JavaWeb『Vue.js』快速入门
Vue快速入门 第一节 准备Vue.js环境 1.开发中的最佳实践 2.Vue框架的js文件获取 3.本地创建vue.js文件 4.创建HTML文档并引入vue.js 第二节 Vue.js基本语法:声 ...
- Vue.js简介和入门使用
vuejs 简介 Vue.js (vuejs.org) 渐进式 JavaScript 框架 vuejs 是基于MVVM 思想的框架 vuejs 是以数据驱动为主的框架 vuejs 是以组件化进行开发的 ...
- Vue.js——十分钟入门Vuex
一. 什么是Vuex? Vuex Vuex是一个专门为Vue.js应用程序开发的状态管理模式, 它采用集中式存储管理所有组件的公共状态, 并以相应的规则保证状态以一种可预测的方式发生变化. Vuex核 ...
最新文章
- NuGet学习笔记(1) 初识NuGet及快速安装使用
- 微软服务器应用软件,HTTP 服务器示例应用程序
- DOM manipulation
- Spring中 @Autowired注解与@Resource注解的区别
- dirname(__FILE__) 介绍
- 【转】上篇:陈皓谈程序员升级:职业规划就像软件工程
- Codeforces - 662A 思路巧妙的异或
- [Python人工智能] 六.TensorFlow实现分类学习及MNIST手写体识别案例
- 使用Maven设置您的应用服务器
- py程序员写代码的习惯养成 防止想到什么写什么
- netbios 和smb
- radio选中事件怎么绑定_Vue双向绑定
- asp功放怎么装_客厅家庭影院该怎么摆放?
- windows2003与文件共享有关的几个进程
- Vuforia开发完全指南
- Java之java.lang.CloneNotSupportedException,Java中bean的克隆报错
- [渝粤教育] 中国地质大学 工程地质 复习题 (2)
- SHP格式以及SHP矢量数据编辑软件ShpEditor介绍
- northstar机器人编程_NorthSTAR图形化机器人开发环境
- 串口485接法图_rs485接口接线方法
热门文章
- 最后一个页面:构建电影详情页面
- 算法竞赛入门经典第六章(例题) B - Rails(涉及到栈的运用)
- 线程池 Future 带返回结果
- 提升网站转化率的四步优化方案
- another app is currently holding the yum lock;waiting for it to exit...
- 个性化推荐算法-协同过滤
- 腾讯电脑管家离线安装包_这个良心小工具,让你电脑流畅1倍,干掉流氓软件...
- C++递归或非递归实现n的阶乘
- android引入外部moudle,Android Studio3.2,调用其他Module作为依赖,出现的问题。
- android library使用,Android:Library module的使用