Vue.js 2.0

记录着从 Vue 新手村出发的练功历程...


本篇任务指引:

  1. 了解何谓数据绑定
  2. 认识单向与双向差异
  3. 绑定网页元素

一、什么是数据绑定

数据绑定可以称“Data Flow”或“Data Binding”,

意思可以解释成网页上的数据是透过特定的流程方式控制。

如果你接触过其他框架,应该对这名词很熟悉,

目前的各大前端框架都有使用到此一行为。

哩咧工三小!?

QQ 换个更简单的说法:

“我们给什么数据他就呈现什么。”// 请小心GIGO

比如以下熟悉的范例:



    
{{ msg }}

我们可以知道,id 为 hello 的内容是由变量“msg”所表示,

因此可以说 id 为 hello 的内容是由 msg 所绑定,

而实际的值就是 'Hello World !'。

二、单向与双向绑定

在数据绑定上还有细分两种:

  • 单向绑定(one-way):只能单方面接受内容,给你什么就显示什么。
  • 双向绑定(two-way):可以互相控制内容,只要更动过数据,另一方会同步更动。

因此在刚刚范例中,其实就是典型的单向绑定,msg 设定什么就出现什么内容。

在双向的绑定使用方法,会使用到 Model,

他是用来分析组件之间的交互,也可以想成是存放当前状态,

下图是官方针对数据绑定的示意图:

上图的 View 为我们网页画面,DOM Listeners 为事件的监听,

例如当文字方块输入的时候触发,那就会触发 event,

传给 Model 后会进行分析,以确保数据的最新状态,

最后再透过  Data Binding 给 View。

三、表单的数据绑定

接下来让我们实际来写写看吧!

网页表单的组件有很多种,以下简单介绍常用的几项:

  1. input - text
  2. input - checkbox
  3. input - checkbox(集合)
  4. input - radio
  5. select

[input - text]

文字方块的使用可以是双向绑定,因为他本来就是提供给人输入用的呀~

“一拳超人”的图片搜寻结果

好 ... 冷静!

如果要进行双向绑定,请使用“v-model”。

VueJS - Form

Message is: {{ message }}

上方程序我们可以得知:

  1. 的内容是单向绑定
  2. 的内容是双向绑定

实际画面:


任意输入内容:

[input - checkbox]

再来是设计一个能够勾选的文字方块,只要跟值有关的我们都使用 v-model 表示。

VueJS - Form

在原本标准 html 中,checkbox 原本的写法:

  • checked :表示已勾选的状态

是否勾选 checked 其实就是一个布尔值所决定,

因此在 data 的部分我们直接设定 bool 类型即可。

实际画面:

勾选看看:

[input - checkbox (集合)]

那么一群 checkbox 该怎么设定呢?

首先我们建立一群核取方块,每个都有自己的 value 值,

由于是集合,且是可复选的,因此代表值不只一个,

所以我们 checkedFruit 会以数组类型保存,并且一开始给他空数组,

当我们勾选的时候,会自动将值 push 进去。

VueJS - Form


CheckedFruit:{{ checkedFruit }}

实际画面:

勾选时:

为何上述要说这是一个 push 的动作?

我们试着先勾选 banana 再勾选 apple 看看结果:

是的亲爱的,后来勾选的 apple 跑到后面去了,

因为 push 是典型的“栈”结构。

  • 图片来源:用 JavaScript 学习数据结构和算法:栈(Stack)篇

虽然内容结果都相同,但请务必记得顺序是不同的唷!

[input - radio]

表单功能中在单选(radio)的部分跟 checkbox 很像,

一样有 value,并且是否勾选由 v-model 所绑定,

至于 picked 的内容不再是数组,因为只能单选。

VueJS - Form


Picked: {{ picked }}

实际画面:

任意勾选其一:

[select]

在下拉式清单中,我们会把 v-model 写在 select 上,

勾选的内容直接写在

VueJS - Form

Selected: {{ selected }}

实际画面:

选择别的选项:

因为我们没有另外设定 value,因此在

如果想要菜单项目的“名称”与“值”区分开来,只要增加 value 属性即可:

修改结果:

Selected: {{ selected }}

另外别忘了,data 的 selected 'B' 要改成小写 'b'。

new Vue({
    el: '.form-select',
    data: {
        selected: 'b'
    }
});

实际画面:

勾选别的项目时,值也会是小写结果:

以上为透过数据绑定的方式,进行表单的组件操作。

Next Stop:

Vue.js 2.0 - 带着 Vue 框架闯荡异世界 - [4]为魔法上属性吧

有勘误之处,不吝指教。ob'_'ov