Gauss Zhou

# 起步

# Vue 应用实例

  1. 引入 Vue
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
  1. 声明式渲染

Vue 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统——虚拟DOM

<div id="app">{{ message }}</div>

var app = new Vue({
  el: "#app",
  data: {
    message: "Hello Vue!"
  }
});

# Vue 组件化应用构建

组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用，小型、独立和通常克服用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树

  1. 注册组件
// 定义名为 todo-item 的新组件
Vue.component('todo-item', {
  template: '<li>这是个待办项</li>'
})

var app = new Vue(...)
  1. 调用组件
<ol>
  <todo-item></todo-item>
</ol>
  1. 参数传递
Vue.component("todo-item", {
  props: ["todo"],
  template: "<li>{{ todo.text }}</li>"
});
  1. 进一步
<div id="app">
  <ol>
    <todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"></todo-item>
  </ol>
</div>

Vue.component("todo-item", {
  props: ["todo"],
  template: "<li>{{ todo.text }}</li>"
});

var app = new Vue({
  el: "#app",
  data: {
    groceryList: [
      { id: 0, text: "蔬菜" },
      { id: 1, text: "奶酪" },
      { id: 2, text: "随便其它什么人吃的东西" }
    ]
  }
});

将应用分割成了两个更小的单元。子单元通过 prop 接口与父单元进行了良好的解耦

Vue 应用实例
Vue 组件化应用构建