Vue.js 2.0 教程

### Vue

首先,我们要先全局安装vue-cli.

然后,我们来创建一个新的项目

进入项目的文件夹,安装dependencies

安装完之后,我们就可以打开一个web server 了

这个命令会自动在localhost:8080创建一个server并把output显示在浏览器里。

项目结构

我们来看一下在新建项目里的文件结构

  • package.json文件里包括项目所有的dependecies
  • npm install 会把package.json里列出的dependecies 安装到 node_modules文件夹中

下面是index.html

接下来,我们看一下在src文件夹中的main.js

  • App是项目的根组件(root component)
  • Vue 是项目的主要框架

我们再看一下 App.vue 的内容

我们可以看到App 需要Hello 组件。Hello 组件被定义到了component 文件中的Hello.vue.

下面是Hello.vue文件

值得注意的是这里的data不是object. 这里的data是一个function return to an object.


下面我们可以来改一下Hello.vue

效果如下

至此,我们已经完成了一个用vue-cli写的小demo.

用vue写一个to do list

最近,想学一些前端的知识。但感觉无从下手,因为前端的框架好多,不知道选哪一个 Angular, Vue, reat,backbone... 想想还是先学一下最近最火的vue好了,毕竟以前用vue写过一个网站而且vue也是中国人写的。但已经快一年没碰过vue了,什么都不记得了,就写一个to do list来复习一下vue好了。

构思

  • 用什么储存数据?

因为, 要做一个简单to do list,就不想考虑数据库了,用一个数组来储存数据就可以了。

  • 需要什么功能?

to do list 的功能的话,只需要有增加任务和删除任务就好。所以,需要两个function就可以了。

实际效果

全部代码可以到codepen上去查看,https://codepen.io/jingfei/pen/Npppya

下面我就讲一下关于vue的代码好了.

v-model实现输入的内容和task进行双向绑定。用v-on来监听DOM事件,如果enter(按回车),执行add_task function.

下面是Vue实例

v-for来遍历todos的数组。用v-bind来把checkedhtml 属性和todo.isCompleted绑定。用v-on来监听鼠标左键,如果按了左键,执行completed(index) function. 利用v-bind来绑定class, 如果todo.isCompleted 是真的话,加入completed class.

总结

以上就是关于vue的代码了。在这个小项目里,对双向绑定,自定义触发和监听,绑定hmtl属性和class进行了实践。