环境配置

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 的建议学习顺序