一. 邂逅Vuejs

1.1. 认识Vuejs

  • 为什么学习Vuejs
  • Vue的读音
  • Vue的渐进式
  • Vue的特点

1.2. 安装Vue

  • CDN引入
  • 下载引入
  • npm安装

1.3. Vue的初体验

  • Hello Vuejs
    • mustache -> 体验vue响应式
  • Vue列表展示
    • v-for
    • 后面给数组追加元素的时候, 新的元素也可以在界面中渲染出来
  • Vue计数器小案例
    • 事件监听: click -> methods

1.4. Vue中的MVVM

MVVM

1.6. Vue的声明周期

Vue生命周期

1.7. 创建Vue时, options可以放那些东西

  • el
  • data
  • methods
  • 生命周期函数
  • computed

二.插值语法

  • mustache语法 ：变量、表达式

  • v-once

  • v-html

  • v-text

  • v-pre:

  • v-cloak: 斗篷

三. v-bind

3.1. v-bind绑定基本属性

  • v-bind:src
  • :href

3.2. v-bind动态绑定class

  • 对象语法: class='{类名: boolean}'
  • 数组语法: class='[类名]'

3.3. v-bind动态绑定style

  • 对象语法:style="{css属性名:属性值}"
  • 数组语法:[{css属性名:属性值}]

四. 计算属性

  • computed
  • 案例一: firstName+lastName
  • 案例二: books -> price