环境配置
brew install node
npm install vue -g --registry=https://registry.npm.taobao.org
npm install webpack -g --registry=https://registry.npm.taobao.org
基础 —— 手撸Demo
TodoList
<!--
* @Author: 0aKarmA_骅文
* @Date: 2020-02-29 16:46:24
* @LastEditors : 0aKarmA
* @LastEditTime : 2020-02-29 18:05:06
* @Description: file content
-->
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.todo {
list-style: none;
}
.finished {
text-decoration: line-through;
}
</style>
<div id="app">
<p>Ez Todo List</p>
<!--
绑定表单,值动态改变
监听回车键,提交
-->
<input type="text" placeholder="add a todo" autofocus
v-model="todos.content"
@keydown.enter="addTodo"
>
<ul>
<!-- 遍历list输出内容 -->
<li v-for='(todo,index) in list' :key='index'>
<!-- 监听点击,添加元素 -->
<input type='checkbox' :check="todos.finished" @click="changeStatus(index)">
<!-- 若已完成,则添加finished的class帮助前端展示 -->
<span :class="{'finished':todo.finished}">{{ todo.content }}</span>
<!-- 监听点击,删除元素 -->
<button @click="delTodo(index)">delete</button>
</li>
</ul>
<p v-if='list.length===0'>Empty Todo List</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
todos: {
content: '',
finished: false
},
list: []
},
methods: {
addTodo() {
// 将当前元素压入数组
this.list.push(this.todos);
// 清空当前元素,供下个元素使用
this.todos={
content: '', //初始化内容为空,不能省略
finished: false //未完成
}
},
changeStatus(index) {
let c = this.list[index].finished;
this.list[index].finished = !c;
},
delTodo(index) {
this.list.splice(index,1);
}
}
})
</script>
</body>
</html>
进阶 —— Vue-router
资料
新手向:Vue 2.0 的建议学习顺序