Vue.js 2.0记录01
2017-01-26 本文已影响71人
flycorn
Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。
** Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 **
参考链接：
Vue.js
Vue.js文档
Vue.js github
初探Vue.js (我的备忘录)
My todos
- 普通版本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs2.0</title>
<link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- 引入Vue.js -->
<script src="http://cdn.bootcss.com/vue/2.0.0/vue.min.js"></script>
<style>
<!-- 完成状态样式 -->
.completed{
color:green;
text-decoration: line-through;
}
</style>
</head>
<body>
<div class="container" id="app">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">Welcome Vue js</div>
<div class="panel-body">
<!-- 备忘录条目个数 -->
<h1>My todos {{todos.length}} </h1>
<ul class="list-group">
<!-- 遍历备忘录条目 -->
<li class="list-group-item" v-bind:class="{ 'completed' : todo.completed }" v-for="(todo, index) in todos">
{{todo.title}}
<button class="btn btn-xs pull-right btn-warning" v-on:click="deleteTodo(index)">Delete</button>
<button class="btn btn-xs pull-right" v-on:click="toggleCompletion(todo)" v-bind:class="[todo.completed ? 'btn-danger' : 'btn-success' ]">{{ todo.completed ? 'undo' : 'completed' }}</button>
</li>
</ul>
<!-- 添加备忘录条目 -->
<form v-on:submit.prevent="addTodo(newTodo)">
<div class="form-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>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<script>
<!-- 实例化Vue应用 -->
new Vue({
el: "#app",
data: {
message: "Hello World!",
todos: [
{id:1, title:"learn Vuejs", completed: false}
],
newTodo: {id:null,title:"", completed: false}
},
computed: {
todoCount() {
return this.todos.length;
}
},
methods: {
addTodo(newTodo) {
this.todos.push(newTodo);
this.newTodo = {id:null,title:"", completed: false}
},
deleteTodo(index) {
// this.todos.$remove(todo)
this.todos.splice(index, 1)
},
toggleCompletion(todo){
todo.completed = !todo.completed
}
}
})
</script>
- 普通组件版本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs2</title>
<link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/vue/2.0.0/vue.min.js"></script>
<style>
<!-- 完成状态样式 -->
.completed{
color:green;
text-decoration: line-through;
}
</style>
</head>
<body>
<div class="container" id="app">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">Welcome Vue js 2.0</div>
<div class="panel-body">
<!-- 备忘录条目个数 -->
<h1>My todos {{todoCount}}</h1>
<!-- 备忘录条目组件 -->
<todo-items :todos="todos"></todo-items>
<!--
# 等同
<todo-items v-bind:todos="todos"></todo-items>
-->
<!-- 添加备忘录条目组件 -->
<todo-form :todos="todos"></todo-form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<!-- 备忘录条目组件模板 -->
<script type="text/x-template" id="todo-items-template">
<ul class="list-group">
<li class="list-group-item" v-bind:class="{ 'completed' : todo.completed }" v-for="(todo, index) in todos">
{{todo.title}}
<button class="btn btn-xs pull-right btn-warning" v-on:click="deleteTodo(index)">Delete</button>
<button class="btn btn-xs pull-right" v-on:click="toggleCompletion(todo)" v-bind:class="[todo.completed ? 'btn-danger' : 'btn-success' ]">{{ todo.completed ? 'undo' : 'completed' }}</button>
</li>
</ul>
</script>
<!-- 添加备忘录条目组件模板 -->
<script type="text/x-template" id="todo-add-form-template">
<form v-on:submit.prevent="addTodo(newTodo)">
<div class="form-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>
</script>
<script>
<!-- 备忘录条目组件 -->
Vue.component('todo-items', {
template: "#todo-items-template",
props: ['todos'],
methods: {
deleteTodo(index) {
// this.todos.$remove(todo)
this.todos.splice(index, 1)
},
toggleCompletion(todo){
todo.completed = !todo.completed
}
}
})
<!-- 添加备忘录条目组件 -->
Vue.component('todo-form', {
template: "#todo-add-form-template",
data() {
return {
newTodo: {id:null,title:"", completed: false}
}
},
props: ['todos'],
methods: {
addTodo(newTodo) {
this.todos.push(newTodo);
this.newTodo = {id:null,title:"", completed: false}
}
}
})
<!-- 实例化Vue应用 -->
new Vue({
el: "#app",
data: {
todos: [
{id:1, title:"learn Vuejs", completed: false}
]
},
computed: {
todoCount() {
return this.todos.length;
}
}
})
</script>
- vue-cli版本
1、安装vue-cli、初始化项目
vue-cli
<code>npm install -g vue-cli //安装vue-cli</code>
<code>vue init webpack project //vue初始化项目</code>
<code>cd project //进入项目目录</code>
<code>npm install //安装依赖包</code>
<code>npm run dev //开启服务器</code>
2、主要模块源码
# project/index.html #主页面文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>project</title>
<link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div id="app"></div>
</body>
</html>
# project/src/components/Todos.vue //备忘录条目模块
<template>
<ul class="list-group">
<li class="list-group-item" v-bind:class="{ 'completed' : todo.completed }" v-for="(todo, index) in todos">
{{todo.title}}
<button class="btn btn-xs pull-right btn-warning" v-on:click="deleteTodo(index)">Delete</button>
<button class="btn btn-xs pull-right" v-on:click="toggleCompletion(todo)" v-bind:class="[todo.completed ? 'btn-danger' : 'btn-success' ]">{{ todo.completed ? 'undo' : 'completed' }}</button>
</li>
</ul>
</template>
<script>
export default {
props: ['todos'],
methods: {
deleteTodo(index) {
// this.todos.$remove(todo)
this.todos.splice(index, 1)
},
toggleCompletion(todo){
todo.completed = !todo.completed
}
}
}
</script>
# project/src/components/TodoForm.vue 添加备忘录模块
<template>
<form v-on:submit.prevent="addTodo(newTodo)">
<div class="form-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 {
data() {
return {
newTodo: {id:null,title:"", completed: false}
}
},
props: ['todos'],
methods: {
addTodo(newTodo) {
this.todos.push(newTodo);
this.newTodo = {id:null,title:"", completed: false}
}
}
}
</script>
# project/src/App.vue 主模块
<template>
<div id="app">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">Welcome Vue js 2.0</div>
<div class="panel-body">
<h1>My todos {{todoCount}}</h1>
<todos :todos="todos"></todos>
<todo-form :todos="todos"></todo-form>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import Todos from './components/Todos.vue'
import TodoForm from './components/TodoForm.vue'
export default {
name: 'app',
data() {
return {
todos: [
{id:1, title:"learn Vuejs", completed: false}
]
}
},
computed: {
todoCount() {
return this.todos.length;
}
},
components: {
Todos,
TodoForm
}
}
</script>
<style>
.completed{
color:green;
text-decoration: line-through;
}
</style>
