Vue.js入门教程(三)双向绑定和数据渲染

JavaScript024

Vue.js入门教程(三)双向绑定和数据渲染,第1张

既然清楚了原理,那么,接下来进入正题——我知道了vue怎么安装,那么我怎么使用呢?

在告诉你基础用法之前,我还是要先告诉你一个情况。

可能要令你有点失望。vue主要是侧重于数据端的。他的目的就是渲染数据和在前端调整一下数据逻辑。

他不是像jquery那样让你用来做特技的。就算你要做特技。你也应该通过css3/canvas而不是dom。

所谓的双向绑定,你可以理解就是把view。(你还不清楚mvc的话,请看第一章)

和model绑定到一起。说白了,就是你js中的绑定值变了。你dom中的内容就跟着一块变了。

vue是通过解析{{文字..}}来生成内容的。后面绑定方法,输出内容的时候都会讲到。

列表输出使用 v-for,这些v开头加横杠的叫做命令

这些命令是可以自定义的。但是那都属于高级操作,我们不用它也完全足够支撑做一个大型项目了。

其实你回发现,这里无论是v-for或者是v-什么其他玩意

它都深刻的遵循了es6的语法。这里不就是一个典型的for in 循环吗。不过我们现在都用for of了。

你记住这个用法,它就长这样。

前后端分离开发的关键在于:后台只提供接口。

我们获得的数据多数情况下,仅仅是一个json,而mvvm的关键就再于解析数据在前端完成了。如果你了解jsp或者php你会了解,数据的解析在mvc中,

是由后端完成的,而html只负责显示。

所以,当你了解了数据绑定和渲染以后,你可以第一时间先把数据输出到页面了。

我们前端最厉害的地方不就是处理能看得见的东西吗?

https://unpkg.com/vue@2.5.3/dist/vue.js

来,直接开始:

创建一个 .html 文件,然后通过如下方式引入 Vue:

https://jsfiddle.net/chrisvfritz/50wL7mdz/

Vue.js 文档: https://cn.vuejs.org/v2/guide/

https://www.w3cplus.com/blog/vue

Vue 以数据驱动和组件化的思想构建的。相比于Angular.js,Vue.js提供了更加简洁、更易于理解的API,使得我们能够快速地上手并使用Vue.js。

如果你之前已经习惯了用jQuery操作DOM,学习Vue.js时请先抛开手动操作DOM的思维,因为Vue.js是数据驱动的,你无需手动操作DOM。它通过一些特殊的HTML语法,将DOM和数据绑定起来。一旦你创建了绑定,DOM将和数据保持同步,每当变更了数据,DOM也会相应地更新。

当然了,在使用Vue.js时,你也可以结合其他库一起使用,比如jQuery。

安卓触屏上,tap 和 click 可以同时触发,但是 click 会有 300ms 左右的延时

show demo

在指定的 DOM 区域内,一个手指轻拍或点击时触发该事件(类似 PC 端的 click),该事件最大点击时间为 250ms,如果超过 250ms 则按 press 事件处理

在指定的 DOM 区域内,这个事件相当于 PC 端的 Click 事件,不能包含任何的移动,最小按压时间为 500ms,常用于我们在手机上用的复制粘贴等功能

该事件事分别对以下事件进行监听并处理

在指定的 DOM 区域内,一个手指放下并移动事件,即触屏中的拖动事件

该事件事分别对以下事件进行监听并处理

在指定的 DOM 区域内,一个手指快速的在触屏上滑动,即平时用到最多的滑动事件

该事件事分别对以下事件进行监听并处理

在指定的 DOM 区域内,两个手指(默认为两个手指,多指触控需要单独设置)或多个手指相对(越来越近)移动或相向(越来越远)移动时事件

该事件事分别对以下事件进行监听并处理

在指定的 DOM 区域内,当两个手指或更多手指呈圆型旋转时触发

该事件事分别对以下事件进行监听并处理

hammer.js 提供了 tap , doubletap , press , horizontal pan , swipe 和多点触控的 pinch , rotate ,默认情况下 pinch 与 rotate 是禁用的,因为它们会阻塞元素,可以通过以下命令来启用。

默认的 pan 仅支持水平方向,可以选择启用全部方向,swipe 也可以启用垂直方向

建议使用 viewport meta 禁用双击/缩放功能,更多的控制网页,支持触摸操作的浏览器不需要这样做

hammer.js 能够通过配置选项 domEvents: true 触发 DOM 事件,它会使你的方法 stopPropagation(),所以可以使用事件委托,hammer.js 不会解除绑定的事件

垂直 pan 用于滚动页面,一些(旧)浏览器不会触发这个事件,所以 hammer.js 无法识别

Windows Phone 上的 IE10 和 IE11 在点击某个元素时会突出显示一个小点,添加这个 meta 来删除

hammer.js 会设置 user-select 来提高 PC 的平移体验,如果需要文本选择,需要在创建实例前执行此操作

该点击事件也被称为 “幽灵点击”(ghost click)

构造函数为 Hammer(HTMLElement, [options]),options 将与默认选项 Hammer.defaults 合并

其值可为 compute, auto, pan-y, pan-x, none,默认选项会基于识别器为你选择一个正确值

默认禁用 DOM 事件,如果需要使用事件委托,需将其设为 true

接受一个布尔值,或返回布尔值的函数

改善交互事件操作的系列 css 属性

调用 Hammer() 的时候就安装了默认的识别器,如果建立一个新的 Manager,这些将被跳过

识别器的状态