宁皓网 Vue.js：预览

学一下 Vue.js 框架。

封面摄影：Daniel F.

来自  https://ninghao.net/course/4256#info

准备

1)安装与使用 Vue.js

先进入到某个地方 ... 然后为项目创建一个目录，比如 vue-demo ... 再进入到这个目录的下面 ... 把 vue 下载到这个目录的下面 ...

curl -O http://vuejs.org/js/vue.js

用编辑器打开这个项目的目录 ...

atom ./

新建一个 html 文档 ... 名字可以是 index.html .. 添加一个基本的 html 的结构 ... 然后把 vue 嵌入到这个页面上 ... 位置就是当前目录下的 vue.js

新建一个 js 文件 .. 名字是 index.js ... 再把它嵌入到这个页面的底部 ...

然后回到终端，我们可以为项目创建一个服务器，然后监视两个文件的变化 ... 最简单的可以使用 browser-sync ..

browser-sync start --server --no-notify --files='index.html, index.js'

下面我们就可以在这个小项目上面去试验一下 vue 这个框架 ...

来自  https://ninghao.net/video/4258#info

预览

2)渲染

现在我想在页面上的某个元素上动态的显示一些数据，也就是数据有变化的时候，可以立即的显示出有变化的数据。在这个 html 文档里面，先添加一个 div 上面加上一个 id ... 一会儿我们会用到这个 id 把数据绑定到这个元素里面 ..

然后再用一个模板 .. 两组大括号 ... 中间加上一个 message ，这个 message 就是应用里的某个属性的名字 .. 再打开页面上嵌入的 index.js 这个脚本文件 ..

创建一个应用，名字是 app ，新建一个 Vue 的实例 ... 给它提供一些参数 ... 添加一个 el，指定一下应用绑定到的元素 ... 这里就是带 app 这个 id 的元素 ..

再添加一个 data ... 它是一个对象 .. 它是应用里提供的一些数据 .. 添加一个 message 属性，它的值先设置成 hello ..

在浏览器上你会看到，页面上的这个带 app id 的元素里面，会显示 message 属性的值，就是这个 hello ..

打开浏览器的 Console ... 看一下 app 的 message 属性的值 ... 现在是 hello .. 我们可以再设置一下它的值 ... 让它等于 hola ...

你会看到，页面上显示的内容会立即变成刚才我们设置的这个内容 ...

来自 https://ninghao.net/video/4260#info

3)绑定元素属性

在元素上我们也可以绑定一些属性，可以给元素添加一些指令，这些指令就是一些特别的属性，它们一般会用字母 v 作为前缀 ..

先用一组 div 包装一下这个 message ...

然后在它的上面，我们可以给它绑定一个 title 属性 ... v-bind:title ... 让它等于 title ... 意思就是，把应用里的 title 属性的值交给这个 div 元素的 title 属性 ..

在这个 Vue 实例的 data 里面，再添加一个 title ... 让它等于 hello ...

在元素里面，找到这个 div 标签 ...

然后把鼠标放到这个元素的上面，显示的就是这个元素上的 title 属性的值 .. 你会发现，在这个 div 元素的上面，应用了一个 title 属性 ... 它的值就是应用的 data 里面的 title 的值 ...

在控制器上可以动态的设置一下 title 的值 ... app.title = 'hola' ... 这个 div 元素上的 title 属性的值会立即做出反应 ... 变成我们新给它设置的这个值 ...

来自  https://ninghao.net/video/4261

4)条件

现在我想让这个包装了 hello 文字的元素可以根据应用里的某个属性的值来决定它的可见性 ... 可以用一下 v-if 这个指令 .. 添加一个这样的指令 ... 把它的值设置成某个属性 ... 比如 welcome ..

它的意思就是，如果应用里的 welcome 这个属性的值是 true 的话，就显示这个元素，如果是 false ，就隐藏这个元素 ...

然后在应用的 data 里面，可以再添加一个 welcome 属性 ... 让它默认等于 true ..

现在页面上会显示这个 hello ... 在控制台上，我们可以把 welcome 的值设置成 false ...

显示的这个 hello 就不见了 .. 注意在文档的 body 元素里，现在我们找不到包装了 hello 文字的那个元素 ..

还有个 v-show 指令，我们再试一下 ... 把 v-if 换成 v-show ... 然后把 welcome 的值设置成 false ... 同样会隐藏页面上的使用了这个指令的元素 ...

不过这个 v-show 是用 css 隐藏的元素，你会发现这个元素的上面应用了一个 display: none ...

来自  https://ninghao.net/video/4262

5)用户输入

在页面上添加一个按钮元素 ... 现在我想在这个按钮上绑定一个点击事件，用户点击它的时候可以执行应用里面的某个方法去做一些事情 ... 在这个按钮元素上，添加一 v-on 指令，绑定一个 click ，点击事件 ... 然后用 logMessage 这个方法来处理这个点击事件 ..

在应用里面，添加一个 methods 属性，在这里你可以定义一些方法 ... 现在我们需要一个 logMessage 方法 ... 这个方法要执行的任务可以先简单的在控制台上输出应用里的 message 这个属性的值 ..

点一下页面上的这个按钮 ... 在控制台上会显示 message 属性里的内容 ...

Vue 里的 v-model 指令可以让双边绑定非常简单 ... 也就是把输入与应用的状态绑定到一块儿 ... 用户的输入影响应用的状态，应用的状态的变化也会影响到输入 ...

添加一个 input 元素，在上面用一下 v-model ... 把这个元素跟应用里的 message 属性绑定到一块儿 ... 你会发现，这个文本框上会显示 message 里的内容 ...

修改一下文本框里的内容 ... 会影响到应用的 message 这个属性的值 ... 在页面上显示这个 message 信息的地方会立即做出响应 ...

再点一下这个按钮 .. 会在控制台上输出当前的 message 属性里的值 ...

来自  https://ninghao.net/video/4263

6)循环

现在我有一组数据，我想把它们都显示在页面上 .. 使用 Vue 的 v-for 这个指令可以很容易做到 ... 先在应用里添加一组数据 .. 放到它的 data 属性里面 .. 名字可以是 comments .. 表示评论 .. 它的值是一个数组，里面有一些项目 ... 每个项目都有一个 content 属性 .. 再设置一下对应的值 ... 然后再添加一条类似的数据 ...

回到我们的 html 文档 ... 添加一个 ol ，有序的列表 ... 每个列表项目用一下 li 标签包装一下 ... 现在我想把 comments 里的每个数据的 content 属性都放到这个 li 元素的里面 ..

在这个元素的上面，用一下 v-for 指令 ... comment in comments ... 意思就是循环的处理 comments 里面的数据，每次循环的时候，当前的项目的名字是 comment .. 在这个元素里，再用一个模板 ... 输出的内容是 comment 的 content 属性 ..

在页面上会显示应用里的 comments 里面的每个项目 ... 它们都会被一组 li 标签包装一下 ..

在控制台上，我们再往 comments 里面添加一个新的项目 ... app.comments.push ... 设置一下添加的这个项目 ... 在这个页面上会立即显示新添加进来的这个评论内容 ...

来自 https://ninghao.net/video/4264

7)组件

在应用的不同的部分定义成组件，这样可以更好的维护你的应用 .. 下面我们把页面上的这个评论项目定义成一个组件 ... 使用 Vue 的 component .. 先设置一下组件的名字，比如 comment ... 然后是一个对象，里面是这个组件的一些选项 ..

先添加一个 template 设置一下组件的模板 ... 一组 li 标签 ... 先包装一点静态的文字 ...

再去掉页面上的显示评论列表的 li 标签 ... 换成一组 comment .. 这个 comment 就是刚才我们定义的组件 ...

页面上会显示一个静态的文字 ... 周围是一组 li 标签 ..

这个评论组件里面要用到一些属性 ... 可以把它们放在 props 里面 .. 它的值是一个数组 .. 添加一个 comment ... 一会儿我们要在使用这个组件的地方把这个属性传递进来 ..

在这个组件的模板里面，我们现在就可以用一下 comment 这个属性了 ... 显示 comment 的 content 里的内容 ...

在使用这个组件的地方，先用一个 v-for 指令，循环一下应用里的 comments ，每次循环的项目的名字是 comment ...

接着再用一下 v-bind 绑定一个 comment 它的值会传递给组件 ... 这里可以使用 comment 来表示 ...

在页面上会显示评论的列表 ... 这个列表项目用了一个组件 ... 你可以在其它的地方重复的利用这个组件 ...

来自  https://ninghao.net/video/4265#info