一、环境搭建
1.npm
大型应用时推荐用npm安装,npm能很好的和webpack等模块打包器配合使用。具体安装步骤请参考网上的诸多教程。完成后使用如下命令安装vue。
$ npm install vue
安装完成后,命令行运行命令 vue ,看到如下效果表示vue安装成功:
2.vue-cli
vue-cli是vue提供的一个官方命令行工具。可用于快速搭建大型的单页应用。
# 全局安装 vue-cli $ npm install --global vue-cli
二、项目搭建
安装完成之后我们就可以开始搭建我们的项目了。本次项目是基于webpack模板来构建的。参考下图:
这样我们就创建了一个项目。可以看到在todo文件夹下生成了如下文件:
接着使用npm install 安装项目所需的依赖。这个过程可能有点慢。推荐使用淘宝镜像。安装完成使用npm run dev。浏览器中可以看到如下图。说明我们的项目已经搭建完成。
二、todoList实现
1.首先介绍几个重要的文件
index.html:这是项目的入口html文件。
main.js:这是项目的入口js文件,在webpack.config.js可以看到。
main.js主要是初始化vue实例。"el"是将vue实例挂载到index.html中的id为app的元素上。“render”在这里是给绑定的节点渲染一个vue组件。
App.vue:这是我们的主组件。
2.现在开始项目的编写。这个例子很简单,适用于刚开始接触vue的人群。
在App.vue中代码如下:
<template> <div id="app"> <todoList :list="lists"></todoList> </div> </template> <script> import todoList from "./component/todoList.vue"; export default{ name:"app", data(){ return { lists:[ {id:1,text:"吃饭"}, {id:2,text:"睡觉"}, {id:3,text:"打豆豆"} ] } }, components:{ "todoList":todoList } } </script>
引入了一个新的组件todoList显示列表项。使用自定义属性list将父组件的值传递到子组件。
在todoList.vue中如下所示:
<template> <div> <ul> <li v-for="listItem in list">{{listItem.text}}</li> </ul> </div> </template> <script> export default{ name:"todoList", props:{ list:{ type:Array } } } </script>
props用于接收从父组件传递过来的值,试用v-for循环显示列表项。页面显示:
这样一个简单的todoList就做完了。用到了vue的组件化,以及父子组件间的值传递。
————— 本文部分参考vue官方网站,如需转载请联系作者