Vue.js 基础教程
Vue.js
2019-05-20
1062
0
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
文件
使用第三方动画框架
以第三方框架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>