Vue.js具有非常强大的功能，如虚拟dom，响应组件和状态管理。非常容易学习。与其他框架不同的是您不需要复杂的构建工具即可开始使用，安装它可以像添加脚本标记一样简单。在本课程中，我将带您了解使用该框架的不同方法。我们将创建一个购物车，这样您不仅可以了解Vue.js的功能，还可以获得真实有用的东西。如果你是那种喜欢边做边学的人，那就让我们开始吧。

将数据绑定到属性

在将数据保定到属性的时候我们不能使用{{}}这种形式，如<img src="{{}}">应该使用<img v-bind:src="image">。其中v-bind可以省略。

源码

循环

注意v-for="item in products"这块

源码

条件语句

注意v-if="item.price<=Number(maximum)"这块

源码

处理用户输入

v-model可以让你从前端改变值。

源码

使用事件和方法

源码

模板插值

v-html可以解析文本中的 html 标记 v-once 对应的值不会更新

源码

绑定属性

注意绑定的几种形式

源码

计算属性

方法每次都要重新计算，而计算属性只有当值发生变化以后的才会计算。注意beginTime属性和endTime()方法

源码

注意 {{cartQty}}和{{ cartTotal | currency }}

源码

CSS 调整

class绑定对象和数组

注意:class="labelArr"和:style="{'width': '60px', 'text-align':'center'}"

源码

class使用计算属性和表达式

注意 :class="sliderState"这块

源码

过度和动画

注意<transition name="fade">和 CSS 文件

源码 和 Vue.js 官方文档

使用第三方动画框架

以第三方框架Animate.css举例：

 <transition name="custom" 
  enter-active-class="animated fadeInDown"
  leave-active-class="animated slideOutRight">

源码

过度组

让列表产生动画效果 注意transition-group name="fade"

源码

通过 JS 控制过度

将上面的代码改写，注意 @beforeEnter="beforeEnter"、@enter="enter"、@leave="leave"

源码

filter

注意 {{ item.price | currency }}

源码

通过 key 绑定元素

注意 id="cartDropdown"这段

源码

组件基础

创建一个组件

这里将 0306源码中的价格显示单独做成一个组件，注意 Vue.component和<price></price> 。 源码

父子之间的事件传递

注意@click="$emit('add', item)"和@add="addItem"

源码

Vue CLI

将项目改为 Vue CLI，改变后代码

重组并添加结算页 代码

使用 Router

代码

代码段

单击 label 触发 checkbox，checkbox 触发 click

<input
type="checkbox" id="c1"
name="c1" value="c1"
/>

<label for="c1">点我</label>