Vue基础教程
![](/img/icons/default_cover.jpg)
Vue基础教程
吴华锦开发工具准备:
- 根据个人喜欢选择
IDE
,我使用的是WebStorm
,推荐使用Atom
和VSCode
; - 安装
git base
和node.js
; - 安装
vue-cli
,命令npm i -g @vue/cli
; - 新建
vue-cli
项目:- 方法一:通过图形界面进行安装
vue ui
; - 方法二:通过命令行安装
vue create project-name
- 方法一:通过图形界面进行安装
- 运行项目
npm run serve
,端口8080
。
双向绑定v-model
双向绑定大多用于表单事件,通过监听使用者输入的事件来更新内容。
现阶段大部分工作在App.vue
上,template
与普通写法一致,js
写法:
1 | export default { |
去掉空白符.trim
直接在v-model
后加上.trim
即可。
1 | <input type="text" v-model.trim="name" value="name"> |
懒加载.lazy
在离开input
时才更新输入的内容,在v-model
后加上.lazy
即可。
限定输入数字.number
在v-model
后加上.number
即可。
遍历v-for
遍历有一个基本的模板:
1 | <div id="app"> |
组件component
在App.vue
中引入components
中的组件:
1 | <template> |
数据传递props
1 | <template> |
其中:cardData="cardData"
是这个组件的核心,用于绑定属性cardData
。其他数据展示工作放在Card.vue
组件中进行。
See the Pen props接收数据 by whjin (@whjin) on CodePen.
这里解析一下<div class="card_wall"></div>
包裹<div class="card"></div>
主要是方便后期应用扩展,以及让应用整体更稳定。
生命周期
我不喜欢用官网的生命流程图来讲解这个内容,使用文字表达更加让思维清晰。
- 初始化:设置数据监听,编译模板,挂载到
DOM
并在数据变化时更新DOM
等; - 生命周期钩子:其实就是一个过程处理,类似于服务站。
生命周期钩子简介
beforeCreate
:实例初始化created
:实例建立完成(可以取得$data
)beforeMount
:模板挂载之前(还没有生成html
)mounted
:模板挂载完成beforeUpdate
:如果data
发生变化,触发组件更新,重新渲染updated
:更新完成beforeDestroy
:实例销毁之前(实例还可以使用)destroyed
:实例已销毁(所有绑定被解除、所有事件监听器被移除、所有子实例被移除)
生命周期钩子用得最多的是mounted
,主要用在调用属性、方法的时候,
指令
v-once指令
第一次渲染完成后变为静态内容,其下的所有子元素都是这样的效果。
v-pre指令
v-pre
指令会让指定元素被忽略。
v-cloak指令
v-cloak
指令用于去除页面渲染数据时出现闪现的情况,使用方法:
1 | <template> |
v-html指令
v-html
指令会把html
标签渲染成DOM
显示在页面上。
v-html
指令只能对可信任的用户使用,否则容易受到XSS
攻击。
动画
Vue动画一般在真正需要使用的情况下才加入页面,推荐在CSS中使用动画。
加入渐变的时机
v-if
条件渲染v-show
条件显示- 动态组件
- 组件的根节点
渐变的分类
v-enter
定义进入渐变时开始的样式。- 只存在组件插入前,组件插入后就移除。
v-enter-active
定义进入渐变的过程效果,可以设定渐变过程的时间(duration
)和速度曲线(easing curve
)。- 在组件被插入前生效,在完成动画时移除。
v-enter-to
定义进入渐变后结束的样式。- 在组件被插入后生效,同时
v-enter
被移除,并在完成进入渐变动画时移除。
- 在组件被插入后生效,同时
v-leave
定义离开渐变时开始的样式。- 在触发组件离开渐变时生效,接着马上移除。
v-leave-active
定义离开渐变的过程效果,可以设定渐变过程的时间(duration
)和速度曲线(easing curve
)。- 在触发组件离开渐变时生效,在完成动画时移除。
v-leave-to
定义离开渐变后结束的样式。- 在触发组件离开渐变时生效,同时
v-enter
被移除,并在完成离开渐变动画时移除。
- 在触发组件离开渐变时生效,同时
transition自定义名称
1 | <template> |
1 | .zoom-enter, .zoom-leave-to { |
animation
可以使用CSS中的animation
动画设计更为华丽的效果。
1 | .zoom-leave-active { |
transition自定义动画类别
除了在<transition>
中设定name
自定义前缀(属性),还可以预设动画类别。
enter-class
定义进入动画时开始的样式。enter-active-class
定义进入动画的过程效果。enter-to-class
定义进入动画后结束的样式。leave-class
定义离开动画时开始的样式。leave-active-class
定义离开动画的过程效果。leave-to-class
定义离开动画后结束的样式。
以上六个自定义属性优先级别高于一般渐变类别。
CSS动画库:Animation.css
JavaScript钩子
<transition>
还可以绑定JavaScriptHooks,除了单独使用,也能结合CSS transition
和animations
一起使用。
beforeEnter(el)
在进入渐变或动画前生效。enter(el,callback)
在进入渐变或动画的组件插入时生效。afterEnter(el)
在进入渐变或动画结束时生效。enterCanceled(el)
在未完成渐变或动画时取消。beforeLeave(el)
在离开渐变或动画前生效。leaveCancelled(el)
在未完成渐变或动画时取消。
1 | <transition |
在enter
和leave
中必须使用done
,不然它们会同时生效,动画也会瞬间完成。
设定初始载入时的渐变
如果想要设定一开始载入画面时组件的渐变效果,可以通过设定appear
属性来实现。
appear-class
载入时开始的样式。appear-to-class
载入过程的样式。appear-active-class
载入结束时样式。
1 | <transition |
先在<transition>
标签内加入appear
,接着类似自定义动画可以给class name
命名。
初始载入JavaScript Hooks
beforeAppear
载入前appear
载入时afterAppear
载入后appearCancelled
取消载入(载入开始后)
1 | <div id="app"> |
key
对相同的标签元素使用key
进行区分。
渐变模式in-out和out-in
in-out模式
- 新加入的元素做渐变进入。
- 渐变进入结束后,原存在的元素再渐变离开。
out-in模式
- 原存在的元素渐变离开。
- 渐变离开结束后,新元素再渐变进入。
1 | <transition mode="out-in"></transition> |
列表过渡
<transition-group>
会渲染出一个html
标签,预设是<span>
,也可以选择自定义tag
为其他标签。- 无法使用(渐变模式
in-out
和out-in
),因为不再是元素之间来回切换。 - 每个元素需要设定一个
key
值,不能重复。
列表乱数排序
<transition-group>
能够改变数组的排序,使用前需要先安装shuffle
1 | npm i --save lodash.shuffle |
过滤器filter
filters串联
filter
可以同时串联多个filter
函数。
filters参数
$emit
- 父组件可以使用
props
把数据传递给子组件。 - 子组件可以使用
$emit
触发父组件的自定义事件。