宁皓网 Vue.js 前端框架

我们可以先去创建一个 Vue 的实例，
var vm = new Vue;
vm 表示的是 ViewModel，视图模型，一般会用这个名字来表示 Vue 的实例 ... 在创建实例的时候通常我们会给它提供一些选项 ...

比如数据，模板，挂载的元素，提供的方法，生命周期的接口等等 ... 具体的可以使用的选项，可以参考 Vue 的 API ..

http://vuejs.org/api   https://vuejs.org/v2/api/

在边栏上你会看到一些 Options 开头的项目，这些就是 Vue 实例的一些选项 .. 比如这个 data 选项，就是提供给实例的一些数据 ..

el 选项可以指定 Vue 实例挂载到的页面上的那个元素 ...

Lifecycle Hooks ，是一些跟实例的生命周期相关的钩子，或者叫接口 ... 比如这个 beforeCreate，会在创建实例之前被调用 ...

在这个 html 文档里面，添加一个 div 元素，上面加上一个 id，名字是 app .. 我们可以把这个元素交给 Vue 实例，这样就可以把实例挂载到这个元素的上面 ...

这样在它的里面，我们就可以使用 Vue 提供的一些功能了 .. 比如我们用一个模板 ... 两组大括号 .. 在它里面做点算术 ... 1 + 1 ...

现在页面上显示的就是我们在这里输入的东西 ... 并没有特别的意思... 我们要把实例挂载到页面上的某个元素上 ... 手工操作的话，可以使用 vm 的 $mount 这个方法 ... 把表示元素的 css 选择器交给这个方法 ...

vm.$mount('#app')

你会发现，页面上现在显示的就是计算之后的结果 ... 说明 Vue 已经起作用了 ..

或者我们也可以在创建这个 Vue 实例里面. 给它提供一个选项 ... 放到一个对象里 .. 在里面添加一个 el 选项 ... 它的值可以是一个 css 选择器 .. #app ，意思就是带 app 这个 id 的元素 ... 这样做跟手工使用 $mount 方法指定元素的效果是一样的 ...

这个挂载的元素可以在实例的 $el 这个属性里得到  
vm.$el
... Vue 实例里面提供了一些属性还有方法，一般它们的名字都会用这个 $ 美元符号或者使用下划线开头 ...

应用里面的数据我们可以把它们放在 data 这个选项里 ... Vue 会处理在这个选项里找到的属性，让它们变得 reactive .. 下面我们去做几个实验，理解一下什么是 reactive ...

先定义一个数据 .. 名字可以是 dataSource ... 它的值可以是来自外部的某个地方，比如可以是请求应用的 API 以后给我们返回来的数据 ..

它可以是一个对象 ... 里面随便添加一些属性 ... 比如 message ... 把它的值设置成 hello ... 然后把这个数据源交给 Vue 实例的 data 选项，添加一个 data .. 对应的值使用上面定义的这个 dataSource 来表示 ..

在这个应用挂载到的元素里面，我们可以用一下模板输出应用里的 message ...

在页面上现在会显示 message 表示的值 ... 就是这个 hello ..

在浏览器的控制台上看一下 dataSource .. 这个数据源已经被 Vue 处理过了 .. 它里面的属性会被转换成读取器还有设置器，比如它有个 message 属性 .. 你会发现，这里会出现对应的 get message 方法，还有 set message 方法 ..

这个 dataSource 应该跟 Vue 实例里面的 $data 属性是一样的 ..

可以判断一下 .. 看看它是不是等于这个数据源 .. 结果是 true ..

得到 message 的值，可以这样 vm.$data.message .. 或者可以直接使用这个属性的读取器方法 .. vm.message ..

设置这个属性的值可以直接用一下 vm.message = 'hola'

看一下数据源里面的 message .. 结果也会是这个新设置的值 .. 然后我们可以通过这个数据源再去设置这个属性的值 ...

然后再看一下实例下面的 message ... 结果也变成了使用数据源设置的这个新的值 ...

$watch

使用 $watch 这个实例方法，我们可以监视属性的值的变化，用一下 vm 的 $watch 方法，监视一下 message 这个属性的值 ... 第二个参数是一个方法 .. 有两个参数，一个是 newValue 表示属性的新的值 ... 第二个参数是 oldValue，它是属性的原有的值 ...

然后在控制台上输出这个 newValue，还有 oldValue ... 先看一下 message 的值 ... 现在是 hello ... 然后再设置一下它的值 ...

在控制器上显示的，这个 hola 就是 message 属性的新的值 .. 后面的 hello 是它原有的值 ..

实例的 lifecycle，生命周期，就是实例从出生到销毁的过程，在这个过程的不同的阶段，你可以使用 Vue 提供的生命周期接口，去做你想要做的事情 ...

这张图可以帮助我们很好的了解生命周期的不同的阶段，还有你可以使用的接口 ...

http://vuejs.org/guide/instance.html   https://vuejs.org/v2/guide/instance.html

比如在调用 new Vue 以后，这里提供了一个 beforeCreate ，也就是实例还没有创建之前，你可以这个接口去做一些事情 ..

然后是 Observe Data .. 观察数据 .. init Events ，初始化事件 ... 这时候 Vue 实例就已经被创建好了 ... 在这个点上，你可以使用 created 这个接口，在创建了实例以后去做一些事情 ..

看一下有没有 el 选项，有的话，再看看有没有 template 选项 ... 如果有就去 Compile template into render function，把模板转换成 render 方法 .. 没有 template 选项，就去 compile 元素的 outerHTML ..

然后就要挂载了 ... 在挂载之前，可以使用这个 beforeMount ... 挂载以后就会执行 mounted 这个钩子 ..

挂载以后，如果数据发生了变化 .. 在更新之前你想做点事情的话，可以实施这个 beforeUpdate ， Virtual DOM re-render 以后，你想做点事情的话，可以用一下这个 updated ...

调用了实例的 $destory ，会销毁实例 ... 在销毁之前，你可以使用这个 beforeDestroy ... 销毁之后，可以用一下 destroyed ..

使用这些生命周期的方法可以这样 ... 在这个给 Vue 实例提供的选项里面，可以添加这些方法 ... 比如我想在销毁实例之前还有之后去做些事情 ...

先添加一个 beforeDestroy 这个方法 ... 在这里你可以去做你想要做的事情 ... 先简单的输出一点文字 ... 要被干掉了 ...

销毁之后要执行的 hook 是 destroyed ... 添加一个这样的方法 ... 同样可以简单的在控制台上输出一点文字 ..

然后在浏览器的控制台上，我们可以调用一下实例的 $destroy 这个方法 ... 这样会销毁掉实例 ... 销毁之前，会执行 beforeDestroy ，我们在给实例提供的选项里面，实施了这个方法，做的事情就是输出这个 要被干掉了 ...

销毁之后会执行 destroyed ... 同样我们也实施了这个方法 ... 它做的事情就是输出 bye bye ~

在应用里有些数据，把它们显示在页面上，可以使用 Mustache 语法，就是两组大括号 ... 因为看起来像小胡子，所以叫 Mustache ...

这里显示的就是 message 这个属性的值 ... 这个值发生变化以后，Vue 的 Virtual DOM 会重新渲染，所以显示这个值的地方也会随着变化 ...

如果你想绑定一次性的数据，也就是数据有变化的时候不更新显示的数据 .. 可以在它的周围添加组标签 .. 上面用一个 v-once 指令 ...

再试着更新一下 message 这个数据 ... 你会发现，页面上的显示并没有随着更新 ..

这个 Mustache 里面，也可以使用一些表达式，比如我们先在应用里添加一个新的数据，名字是 loggedIn .. 让它的值等于 false ..

回到这个 html 文档 .. 在这里，我们可以先看一下应用里的 loggedIn 的值，如果是 true 的话，就显示这个 message ，如果是 false ，就显示一个 请先登录 ：）

现在显示的是 请先登录 .. 因为 loggedIn 的值现在是 false .. 我们可以设置一下 loggedIn 的值，让它等于 true ...

现在页面上就会显示 message 里面的内容了 ..

为元素绑定动态的属性要使用 v-bind 这个指令，指令就是一些特别的属性，一般都会用 v- 作为前缀 ... 比如我们先添加一个 图像标签 ... 这个标签的 src，也就是图像的源这个属性我们可以使用 v-bind 指令绑定一个 ... 给这个指令加上一个参数，名字是 src .. 指令和参数之间用冒号分隔开 ..

它的值是一个表达式，先用一下 imageSrc ... 在应用的数据里面，我们可以添加一个 imageSrc ... 它的值就是图像的一个地址 ... 可以可以复制一下图像的地址，再把它粘贴过来...

到浏览器上预览一下 ... 页面上会显示一张图像 .. 再查看一下这个图像元素 ... 它的 src 属性的值就是我们使用 v-bind 给元素绑定的 ...

在这个图像元素上，我们再给它绑定一个样式 ... 同样使用 v-bind .. 参数是 style ... 给它提供一个对象 ... 设置一下 width 属性的值，可以使用 imageWidth 来表示 ... 再去添加一个这样的数据 ... imageWidth ，它的值设置成 100%

回到浏览器 ... 现在这个图像元素上会应用一个 style 属性，里面设置了图像的 width 属性 ...

打开浏览器的 Console ，我们再去设置一下 imageSrc 这个属性的值 .. 使用一个新的图像地址 ...

你会发现，页面上显示的图像也会随着变化 ...

再设置一下 imageWidth ... 它的值我们用了 v-bind:style ，把它绑定给了元素的 width 样式 ... 设置了 imageWidth 的值，图像显示的宽度会随着变化 ...

这个 v-bind 还有一种简单的形式 .. 我们可以去掉 v-bind ，直接使用冒号，后面加上绑定的属性的名字就行了 ...

这样做跟之前的效果是一样的 ...

先去下载一个 css 框架，比如 semantic ui ... 把它放到项目的根目录的下面 .. 再打开这个 html 文档，把下载的样式表嵌入到这个文档里面，这样我们就可以使用 semantic ui 给我们提供的样式了 ... 让页面更好看一点，我们再添加点东西 ... div.ui.container ，一个容器 ... 再加上一个分隔符 ... div.ui.hidden.divider ..

然后添加一个 button 元素 ... 设置一下按钮上的文字 ... 然后我想在这个元素上动态的去应用一些 css 类 ... 可以使用 v-bind 指令，绑定 class 这个属性 ...

我们可以给它提供一个对象，或者数组，先给它一个数组， 然后添加一个 buttonClass .. 逗号分隔一下，再添加一个表示颜色的 colorClass ...

在应用的数据里，添加一个 buttonClass ... 把它的值设置成 ui button ... 再添加一个 colorClass ... 先让它等于 violet ... 紫罗兰 ...

再到浏览器上看一下 .. 页面上会显示一个按钮 ... 这个元素的上面会应用一个 ui button 还有一个表示颜色的 violet .. 我们可以去动态的设置一下按钮的颜色 ...

有些 css 类你可能希望根据某个值动态的添加 ... 在这个数组里添加一个对象 .. loading: isLoading ... 它的意思就是，如果应用里的 isLoading 的值是 true 的话，就在这个元素上添加一个 loading 这个 css 类 ...

添加一个 isLoading ... 让它的值先等于 false ...

回到浏览器 ... 按钮没有什么变化 ... 我们再去动态的设置一下 isLoading 的值 ... 让它等于 true ...

现在，页面上显示的这个按钮元素的上面，先应用一个 loading 这个 css 类 ... 你会发现这个按钮会有一个动画效果，表示它现在的状态是正在加载 ...

之前我们用了 Mustache 的形式，在这里绑定了一个可以显示的文字 ... 或者我们也可以使用 v-text 这个指令，添加一组元素，在上面用一下 v-text ，它的值可以等于这个 message ...

这样会显示应用里的 message 这个数据 ... 这里就是这个 hello ...

Mustache 还有这个 v-text 只能显示纯文本 .. 在这个 message 数据里添加一组 html 标签 ...

你会发现，这个标签会被直接显示出来 ... 如果你想让浏览器渲染内容里面包含的 html ，可以使用 v-html 这个指令 .. 把 v-text 换成 v-html ..

现在 message 里面的 html 会被浏览器渲染 ...

要注意，这种直接渲染 html 的方法不是太安全，你只能用在自己信任的内容上 ... 最好不要用它渲染用户提供的内容 ...

v-if 还有 v-show 这两个指令，都可以根据某个值的真假动态的显示元素 .. 我这里有个 message ，现在我把它绑定到一个地方显示出来 ... 先添加点结构元素 ... 一个 div ，加上几个类 ... 一组 p 标签，里面绑定显示一个 message 表示的内容 ...

显示的就是一个带边框的文字 ... 现在我想让整个元素根据一个值动态的显示 .. 在这个包装元素的上面，添加一个 v-if 指令 ... 它的值是 loggedIn ... 意思就是，如果 loggedIn 的值是 true 的话，就渲染这个元素 ..

在应用里添加一个这样的数据 .. 先让它等于 true ... 回到浏览器 .. 页面上仍然会显示这个带边框的 hello .. 在控制台上我们可以设置一下 loggedIn 的值，让它等于 false ... 你会发现，显示的元素就不见了 .. 也就是使用了 v-if 指令的这个元素现在不会被渲染 ...

跟 v-if 相似的还有一个 v-show 指令，把 v-if 换成 v-show .. 设置一下 loggedIn 的值，让它等于 flase ... 不太一样的是，这个指令会在元素上应用一个隐藏元素的样式，就是这个 display: none ... v-if 会让整个元素不出现 ...

还有一个 v-else .. 可以在上面这个元素不渲染情况下渲染应用了 v-else 指令的元素 ... 先把 v-show 换成 v-if ...

然后再添加一个 div ui.yellow.segment .. 一组 p 标签，包装点静态的文字 ..

然后在这个 div 上面添加一个 v-else 指令 ...

现在页面上显示的是这个 hello ，因为 loggedIn 这个数据是 true ... 再把它设置成 false ... 你会发现，现在显示的是应用了 v-else 指令的元素里的内容 ...

根据一组数据多次渲染元素或者模板，可以使用 v-for 指令。比如我有一个数组数据，我想把数组里的每个项目都显示出来 .. 先添加一个这样的数据 .. 放在应用的数据里 .. 名字可以是 items ，这个 items 可以是任何东西，比如一组文章，一组评论 ..

它的值是一个数组 .. 数组里面的每个项目都是一个对象 ... 每个对象里有个 text 属性，再设置一下这个属性的值 ... 对象里面可以有任意的属性 .. 为了简单我们只是手工添加了一个 text 属性 ... 如果是一组评论，这个对象里可能会有评论的时间，作者，评论的内容等等 ..

然后再添加两个类似的对象 ...

在这个 html 文档里.. 随便添加一个元素 .. 在这个元素上用一下 v-for 指令 ... 这个元素会被重复渲染多次 .. 它的值需要使用一种特别的形式 ... item in items .. 意思就是，把 items 这个数组里的每个项目都交给 item .. 这个 item 你可以随便去命名它 .. 一般会是一个单数形式的名词 ..

这样每次显示 items 里面的项目的时候，item 表示的就是 items 这组数据里的某个项目 ... 每个项目里面都有一个 text 属性，要输出这个属性的值可以这样 .. item.text ..

回到浏览器 .. 在页面上会显示一组数据 .. 这组数据就是应用里的 items 里面的内容 ... 每个项目的周围都会使用一组 div 标签包装 ..

如果你要得到项目的序号，可以这样做 ... 一组括号 ... item, index ，这个 index 表示的就是项目的序号 .. 或者叫索引号 ..

然后再绑定输出项目的序号 ... {{ index }} -

现在页面上显示的这组数据里面，会包含这个项目的序号 ... 这个序号是从 0 开始的 .. 想让它从 1 开始，可以让这个 index 加上 1 ...

每次渲染列表项目的时候，如果这个列表里面需要包含多个元素，你可以使用一个额外的元素包装一下它们 ... 或者可以使用一组 template 标签 ... 然后把这个 v-for 指令放到这个元素的上面 ..

这里再添加一个分隔符 ... div.ui.divider

再去预览一下 ... 现在每个列表项目会包含两个元素，一个 div 里面包装的是文字，还有一个 div 分隔符 ...

Vue 里面包装了几个方法，可以去修改数组，这些方法会触发更新视图的动作 .. 我们在浏览器的控制台上去试一下这些方法 .. 现在我想在这个列表的底部添加一个新的项目，可以用 push 方法 ... 也就是这个项目会在 awesome 这个项目的下面出现 ...

vm.items.push ... 设置一下要添加的项目 .. 一个对象，里面添加一个 text 属性 ... 再设置一下它的值 ...

vm.items.push({text: 'amazing'});

你会发现，新添加的这个项目会出现的列表的底部 .. 如果你想把添加的项目放到列表的最前面，可以用 unshift 这个方法 ..

vm.items.unshift({text: 'wonderful'});

这个 wonderful 会在列表的最前面显示 ...

reverse 方法可以颠倒这个列表的顺序 ...
vm.items.reverse();
用一下这个方法 ... 你会看到之前在最下面的项目现在会跑到最上面来 ...

如果想删除掉列表里的最前面这个项目，可以用一下 shift 这个方法 .. 注意这个 amazing 会被删除掉 ... 执行一下 ...

vm.items.shift()

想要删除的如果是最后一个项目，这里就是这个 wonderful ... 可以使用 pop 方法 ... 再用一下这个方法 ... 这样最后的项目就被删除掉了 ..

vm.items.pop()

还有个 splice 方法，可以在指定的地方添加或者删除项目 ... 比如现在我想在显示 great 的这个位置上插入一个新的项目 ... 这个位置的序号是 1 ... 用一下 splice 方法，先设置一下开始的位置 ... 这里就是 1 ... 然后是要删除的项目的数量，

我现在不想删除项目，只想插入新的项目，可以把这个参数的值设置成 0 ..

然后是要插入的新的项目 ... 一个对象 .. 添加一个 text 属性，再设置一下它的值 ... 执行一下 ... 你会看到，这个新的项目会出现在原来的 great 这个项目的位置上，也就是序号是 1 的这个地方 ...
vm.items.splice(1,0,{text:'amazing'});

现在我要替换掉 great 这个项目，可以这样 .. 用一下 splice 方法 .. 开始的位置是 2 .. 然后删除一个项目 ... 把这个要删除的项目的数量设置成 1 ... 再设置一下要添加的项目 ...

vm.items.splice(2,1,{text:'wonderful'});

注意这个 great 项目会被这个 wonderful 替换掉 ... 执行一下 ... 之前的 great ，就变成了现在的 wonderful ...

vm.items.splice(1,1); 删除开始位置为1的1个项目

v-on 这个指令可以为元素绑定指定的事件 .. 先添加一个按钮 ... 设置一下按钮上的文字 .. 然后在这个按钮元素的上面使用一下 v-on 这个指令 .. 给它一个参数，名字是 click ，这样就为这个元素绑定了一个 click ，点击的事件 .. 点击这个元素我们要做的事，可以让 counter += 1 ...

这个 counter 是应用里的一个数据 .. 然后再添加一个元素 .. 在它里面给定绑定一个 counter ...

再去添加一个 counter 数据 ... 让它的值等于 0 ... 回到浏览器 ... 上面会显示一个按钮，还有一个带标签数字 .. 在这个按钮上我们绑定了 click 事件，点击它要做的事就是让应用里的 counter 数据的值增加 1 ...

在页面上绑定了这个数据的地方，会实时的显示 counter 这个数据的当前的值 ...

v-on 指令还有一种简写的形式 ... 可以使用一个 @ 符号，后面加上事件的名字 .. 效果跟之前是一样的 ...

目前我们在给元素绑定事件的这个地方，直接用了一个简单的表达式 ... 你可以使用一个方法来代替它 .. 比如 like ... 然后给 Vue 实例 .. 添加一个 methods 属性 ... 在这里我们可以去定义需要使用的 like 这个方法 ...

给它一个 event 参数 .. 在方法里面， 先让应用里的 counter 的值增加 1 ... 然后再把表示事件的这个 event 对象输出到控制台上检查一下 ...

再点一下这个按钮元素 .. counter 的值会增加 1 ... 同时会把事件对象输出到了控制台上 ... 在这个对象里你可以找到很多有用的属性 ...

先添加一个包装元素 ... 里面用一个 input ... 文本框 ... 在上面可以绑定一个 keyup 这个键盘事件 .. 在绑定事件的时候可以再一些修饰符 ... 这个点后面的东西就是要使用的修饰符 ...

这里我们可以使用键盘的按键修饰符 .. 每个按键都有一个对应的数字表示 .. 比如表示 回车 键的数字是 13 ... 这里的 13 就是一个修饰符 ..

记住这些数字有点麻烦，Vue 为一些常用的按键提供了一些别名 .. 比如 esc ，space，up，down，left，right ... 回车就是 enter ... 可以把这个数字，换成 enter ..

然后用一个 process 方法处理这个事件 .. 然后在 Vue 实例的里面，添加一个 methods 属性 ... 里面可以定义一个 process 方法 .. 加上一个 event 参数 .. 在控制台上输出这个表示事件对象的 event ..

到浏览器上再去试一下 ... 输入点文字 .. 再按一下回车 .. 会在控制台上输出事件对象 ... 因为触发执行了应用里的 process 方法 ..

要得到发生这个键盘事件的元素里的值，可以在 event 对象的 target 下面的 value 属性里得到 ...

再输入点内容 ... 按一下回车 ... 这次输出的就是我们在文本框里输入的内容 ...

先在应用的数据里添加一个数据 ... 名字是 message，让它等于 hello ... 再回到 html ，添加一个包装元素 ... 然后在它的里面添加一个文本框 ...

我们可以把应用里的某个数据绑定到这个文本框的里面，可以使用 v-bind 这个指令，绑定的是元素的 value 属性 ... 它的值就是应用里的这个 message ..

在上面我们可以再把这个 message 绑定到一个地方显示出来 .. 添加一个包装 ... 在它的里面绑定一个 message ...

回到浏览器 ... 你会发现，这个文本框里的内容就是应用里的 message 的值 ...

修改一下文本框里的内容 ... 不会影响 message 的值 ... 再找到这个 input 元素，我们再给它绑定一个事件，用的是 v-on 指令，事件的名字是 input .. 然后让 message 的值，等于发生这个事件的目标的值 ... 也就是在文本框里输入的内容 ..

这个 $event 表示的应该就是事件对象 .. 它下面的 target 对象的 value 属性，就是文本框里输入的内容 ..

再去预览一下 .. 在文本框里输入点内容 ... 会改变 message 的值 ...

这种用法还有一种语法糖，我们可以直接用一个 v-model ... 绑定一个 message ...

修改文本框里的内容 ... 同样会影响绑定给它的原始数据 ...

把这个 message 的值换成 false .. 再去添加一个复选框 ... 先添加一个包装元素 ... 然后是一个 input ，类型是 checkbox ... 下面再给它添加一个 label ..

然后在这个复选框元素上面用一个 v-model 指令，绑定一个 message ... 回到浏览器 .. 勾选一下这个复选框 .. 这样绑定到它上面的数据的值就会变成 true ... 再取消勾选一下 ... 这个值会变成 false ...

再试一下一组复选框 ... 把 message 的值换成一个空白的数组 ..

给这个复选框添加一个 value 属性，设置一下它的值 ... 再修改一下它的标签 .. 这样勾选了这个复选框以后，复选框的 value 的值就会放到绑定到它上面的这个数据的里面 ...

再添加两个复选框 ... 设置一下 value 属性的值 ... 再修改一下标签 ... 再添加一个复选框 ... 同样修改一下它的值 ... 还有它的标签 ...

回到浏览器 ... 勾选一下复选框 ... 这个复选框的 value 的值，会放到绑定到它上面的这个数据里面 ... 取消勾选 ... 会把它的值从绑定给它的数据里面拿掉 ..

单选按钮跟复选框差不多，也可以提供一些选项，不同的是一组单选按钮的值只能是其中的一个单选按钮表示的值 ... 先选中之前我们创建的复选框的包装 ... 按住 command 键可以选择多个编辑点 ... 然后统一的再添加一个 radio 类 ..

再修改一下 input 的类型 ... 同时选中这三个元素的 type 属性的值 ... 把 checkbox 修改成 radio ... 表示单选按钮 ...

回到浏览器 ... 这里显示的是一组单选按钮 ... 选择其中的一个 ... 这样会把绑定到单选按钮上的数据的值，设置成当前选中的这个单选按钮的 value 属性的值 ...

再选中一个其它的单选按钮 .. 会把绑定给这组单选按钮的值，换成最新选中的这个单选按钮的值 ...

因为一组单选按钮的值只能是其中的一个单选按钮 ... 所以我们可以把这个数据的默认的值，换成一个空白的字符 ...

在应用里面，先添加一个表示在选择列表里所选的项目的值 ... 名字可以是 selected ... 先让它等于一个空白的字符 .. 然后再添加一个数组，它可以是选择列表里的项目 ... 比如名字可以是 options ... 它是一个数组 .. 每个项目都是一个对象 .. 对象里可以有一些属性，添加一个 value 属性，它可以表示选择项目表示的值 ... 再添加两个这样的项目 ... 修改一下它们的 value 属性的值 ..

然后把 selected 的值绑定到这个元素的里面 ... 再去创建一个选择列表 .. 一组 select 标签 .. 上面添加几个 css 类 .. 在这个元素上给它绑定一个数组 ... 使用 v-model 这个指令 ... 数据的名字就是 selected .. 表示当前所选的项目的值 ..

每个选择列表项目都需要用一组 option 标签 ... 在这个元素上可以用一下 v-for 去创建一个列表 .. option in options ... 再给元素的 value 属性绑定一个值 ... 这个值就是 option.value ，选择列表项目里的 value 的值 ...

选择列表项目上显示的文字也可以用一下这个值 ...

回到浏览器 ... 打开这个选择列表 ... 选择一个项目 ... 当前选择的项目表示的值会作为绑定给 select 的那个数据的值 .. 我这里就是 selected 这个数据的值 ...