Getting Started
  • Getting to know what Vue.js is and how to install it
  • Create our first Vue.js program and display text using it
  • Controlling attribute value using Vue.js
PROJECT: create our first Vue.js APP
  • Road Map of the Current Stage
  • Creating the news reading block used by BBC
Generating contents automatically using the V-FOR directive
  • Road Map of the Current Stage
  • The drawback of our BBC news reading program and the solution: V-FOR directive
  • V-FOR in a slightly more complicated application scenario
  • Apply V-FOR to the BBC news reading program we created before
Getting to know PROXY
  • Road Map of the Current Stage
  • Have you found a problem?
  • Introduction to the concept of PROXY
  • PROXY also works on methods, meaning you can proxy a method
  • How to communicated between VM.data and VM.methods
The V-ON directive - Vue's answer to handling events
  • Road Map of the Current Stage
  • Introduction to the V ON directive
Conditional rendering: using V-IF, V-ELSE, and V-SHOW
  • Conditional rendering
V-MODEL: collecting user-submitted data
  • Introduction to V-MODEL
  • Using V-MODEL in projects
  • Lazy modifier and number modifier
  • Using v-model in other tags: textarea, radio button, checked box, etc.
Combining v-for and v-model and creating a list DYNAMICALLY
  • Creating a list dynamically
Computed and Filter
  • The difference between COMPUTED and FILTER
  • Introduction to FILTER
  • Introduction to COMPUTED
  • Project: reversing letter order using COMPUTED
  • Two-way data exchange between DATA and COMPUTED
Controlling CSS using V-BIND
  • Controlling CSS Part 1
  • Controlling CSS Part 2
Porject: remaining character calculator
  • Project analysis
  • Creating the APP
Vue Components
  • Introduction to Components
  • Registering and installing our first component and component naming rules
  • Register a local component
Sending data into a componnet
  • Introduction to props
  • Demonstration of sending data into component using props
  • Review of how to use props
Sending data out of a component
  • An analysis of how to send data out of a component
  • Sending data out of component using $emit() and self-defined event
  • Sending multiple values simultanesouly
  • Clean a dead corner: using original event on component tags
The truth of V-MODEL
  • The truth of the V-MODEL directive
Project: creating a price calculator
  • Project analysis
  • Creating the price calculator
Slots
  • Introduction to slots
  • Using slots in news page
  • Named slots
Data exchange between sibling components: Central Event Bus
  • Data exchange between sibling components Part 1
  • Data exchange between sibling components Part 2
Creating a news reading and editing APP
  • Program analysis
  • Generate formatted data and time
  • Working on the project Part 1
  • Working on the project Part 2
VUE.JS: New contents added by Vue 2.3: .sync modifier and model option
  • The .sync modifier
  • Custom v-model
Scoped slots
  • Introduction to scoped slots
  • Demonstration of using scoped slots
  • Using scoped slots on lists
Component misellaneous
  • is, keep-alive, and v-once
  • Retrieving the object representing the component using ref
Vue API and reactivity in depth
  • Preface
  • API Part 1
  • API Part 2
  • API Part 3
  • API Part 4
  • API Part 5
  • Try something interesting
  • API Part 6
  • API Part 7
  • API Part 8
  • API Part 9
  • API Part 10
  • API Part 11
  • API Part 12
  • API Part 13
Transition Effects
  • Introduction to transition effects