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

源码

注意 {{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>

参考

Vue源码解析-了解vue插槽slot篇

Vue.js 中的实用工具方法

0条评论
avatar