为了方便记忆和学习，整理了一下之前学习VueJS的要点，并通过在中的代码注释来阐述知识点。
需要自行下载bootstrap.css文件，并修改文件名或修改代码中引用的名称和路径：
bootstarp-3.3.7-flatly.min.css 下载flatly皮肤的bootstarp
从这一章开始，将使用Vue CLI来构建和编程了。
之前的教程：VueJS2.0学习教程
首先将第三章的内容放入Vue CLI构建的Vue项目中进行代码重构。
GitHub代码 - liyingxuan/vue-cli-tutorial
Vue版本：
"vue": "^2.4.2", "vue-router": "^2.7.0"
1. 安装部署环境和VUE
首先全局安装好NodeJS，NPM等，然后：
$ npm install vue
# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# init之后如果没特殊需求，4个回车，1个Y，3个N
# 安装依赖，走你
$ cd my-project
$ npm install
$ npm run dev
Init示例：
init示例.png
此时应该会调用浏览器并打开一个页面：http://localhost:8080/#/
这样便算是安装和部署成功。
2. 将之前Lesson3的代码重构进该项目
- 修改./index.html：
- 只增加了一个css文件，用做基础样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vuejs-cli-tutorial</title>
<link rel="stylesheet" href="/static/css/bootstarp-3.3.7-flatly.min.css"> <!-- 引入bootstrap - CSS前端框架，这里用了bootswatch.com的皮肤 -->
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
- 修改./src/App.vue文件：
- 修改了template本身的样式，基本是从lesson3的html中copy而来
- 修改了组件的命名
- 注意JS（script）部分引用组件和注册组件
<template>
<!-- Bootstrap的部分不用关注，只是基础样式 -->
<div id="app">
<!-- Bootstrap的部分不用关注，只是基础样式 -->
<div class="navbar navbar-default navbar-static-top"></div>
<div class="container"> <!-- 这里的ID是用来提供Vue操作的 -->
<div class="row">
<!-- 数组数据操作和动态显示，事件的监听和绑定等 -->
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">通过Vue-Cli进行组件化开发</div>
<div class="panel-body">
<h4>My Todos {{todoCount}}</h4>
<router-view/>
<todos :todos="todos"></todos> <!-- 引用JS部分注册的组件；传入todos数据 -->
<todo-form :todos="todos"></todo-form> <!-- 引用JS部分注册的组件；传入todos数据 -->
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import Todos from './components/Todos' // 引用组件Todos
import TodoForm from './components/TodoForm' // 引用组件TodoForm
export default {
name: 'app',
data() { // 基础数据和变量
return {
todos: [
{id: 1, title: '1. Learn VueJS', completed: true}, // completed在应用假设是一种状态，需要通过class样式来显示在页面上的
{id: 2, title: '2. Coding', completed: false}
]
}
},
computed: { // 页面中需要处理之后展示的数据，统一放这里
todoCount() {
return this.todos.length
}
},
components: {
Todos, TodoForm // 注册组件
}
}
</script>
<style></style>
- 增加./src/components/Todos.vue文件：
- 该文件对应Lesson3中的Vue.component('todo-items')部分
<template>
<!-- 将显示数组数据部分组件化： -->
<ul class="list-group">
<!-- 通过v-bind来根据数据的不同设置class样式；把index输出，是为了提供删除使用 -->
<li class="list-group-item"
v-bind:class="{ 'completed' : todo.completed}"
v-for="(todo,index) in todos">
{{todo.title}}
<button class="btn btn-success btn-xs pull-right"
v-bind:class="[todo.completed ? 'btn-danger' : 'btn-success']"
v-on:click="completedTodo(todo)">
{{ todo.completed ? 'undo' : 'done' }}
</button>
<button class="btn btn-warning btn-xs pull-right" v-on:click="delTodo(index)">Delete</button>
</li>
</ul>
</template>
<script>
export default {
name: 'Todos',
props: ['todos'], // 引入到组件中的数据/变量
methods: { // 逻辑方法
delTodo(index) {
this.todos.splice(index, 1)
},
completedTodo(todo){
todo.completed = !todo.completed
}
}
}
</script>
<style>
.completed {
color: #00a379;
text-decoration: line-through;
}
</style>
- 增加./src/components/TodoForm.vue文件
- 该文件对应Lesson3中的Vue.component('todo-from')部分
<template>
<!-- 增加数组数据部分组件化 -->
<form v-on:submit.prevent="addTodo(newTodo)"> <!-- 事件绑定；prevent是用来阻止form的默认提交行为 -->
<div class="from-group">
<input type="text" v-model="newTodo.title" class="form-control" placeholder="Add a new todo">
</div>
<div class="from-group">
<button class="btn btn-success" type="submit">Add Todo</button>
</div>
</form>
</template>
<script>
export default {
name: 'TodoForm',
props: ['todos'], // 引入到组件中的数据/变量
data() { // 注意组件中的数据是一个方法，不是一个对象
return {
newTodo: {id: null, title: '', completed: false}
}
},
methods: { // 逻辑方法
// 注意：这里使用了ES6的语法，如果IDE报错，请设置一下
// WebStorm设置方法：Preferences > Languages & Frameworks > JavaScript > ECMAScript 6
addTodo(newTodo) {
this.todos.push(newTodo)
this.newTodo = {id: null, title: '', completed: false}
}
}
}
</script>
<style></style>
3. 运行测试
$ npm run dev
效果图：
lesson4-vue-cli.png
The end.
网友评论