Vue.js（讀音 /vju?/, 類似于 view） 是一套構(gòu)建用戶界面的 漸進式框架券犁。與其他重量級框架不同的是，Vue 采用自底向上增量開發(fā)的設(shè)計殿较。Vue 的核心庫只關(guān)注視圖層舌狗，并且非常容易學(xué)習，非常容易與其它庫或已有項目整合咐柜。另一方面，Vue 完全有能力驅(qū)動采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫開發(fā)的復(fù)雜單頁應(yīng)用。
** Vue.js 的目標是通過盡可能簡單的 API 實現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件犁罩。 **
參考鏈接：
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 rel="stylesheet">
<!-- 引入Vue.js -->
<script src="http://cdn.bootcss.com/vue/2.0.0/vue.min.js"></script>
<style>
<!-- 完成狀態(tài)樣式 -->
.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">
<!-- 備忘錄條目個數(shù) -->
<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應(yīng)用 -->
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 rel="stylesheet">
<script src="http://cdn.bootcss.com/vue/2.0.0/vue.min.js"></script>
<style>
<!-- 完成狀態(tài)樣式 -->
.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">
<!-- 備忘錄條目個數(shù) -->
<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應(yīng)用 -->
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 //開啟服務(wù)器</code>
2昼汗、主要模塊源碼
# project/index.html #主頁面文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>project</title>
<link 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>
