This website requires JavaScript.

Vue.js 基础教程(一):概览

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()方法

源码

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">

源码

过度组

让列表产生动画效果

源码

通过 JS 控制过度

注意 @beforeEnter="beforeEnter"@enter="enter"@leave="leave"

源码

0条评论
avatar