0%

VueJS基础知识

2019年实习时的 VueJS基础知识 备份

介绍

  • Vue 是一套用于构建用户界面的渐进式框架,数据驱动视图,只关注视图层,采用自底向上增量开发的设计。

使用方式

1
2
// 原生引入
<script src="vue.min.js"></script>

开发规范

  • 组件名为多个单词
  • 私有 property 名使用 $_ 前缀,并附带一个命名空间以避免冲突。
  • 单文件组件的文件名始终单词大写开头,或者横线链接。
  • 特定样式和约定组件全部以一个特定的前缀开头
  • 和父组件紧密耦合的子组件应该以父组件名作为前缀命名
  • 组件名倾向完整单词,避免缩写。

生命周期

基本顺序

创建→挂载→更新→销毁

具体步骤

StateDescription
beforeCreate创建前:此阶段为实例初始化,此时的数据观察和事件机制都未形成,不能获得 DOM 节点。
created创建后:实例初始化完毕,页面还没开始渲染,但可以操作数据(data,prop,发送请求获取数据)。
beforeMount挂载前:在这一阶段,我们虽然依然得不到具体的 DOM 元素,但 vue 挂载的根节点已经创建,之后对 DOM 的操作将围绕这个根元素继续进行,这个阶段是过渡性的,一般一个项目只能用到一两次。
mounted挂载后:在这个阶段,数据和 DOM 都已被渲染。
beforeUpdate更新前:这一阶段遵循数据驱动 DOM 的原则,函数在数据更新后虽然没立即更新数据,但是 DOM 中的数据会改变
updated更新后:在这一阶段 DOM 会和更改过的内容同步。
beforeDestroy销毁前:在上一阶段 vue 已经成功的通过数据驱动 DOM 更新,当我们不再需要 vue 操纵 DOM 时,就要销毁 vue ,也就是清除 vue 实例与 DOM 的关联,调 destroy 方法可以销毁当前组件,在销毁前会触发 beforeDestroy 钩子函数。(此时记得解除绑定事件,销毁定时器与全局变量等等。)
destroyed销毁后:在销毁后,会触发 destroyed 钩子函数。

父子组件执行顺序

  • 加载渲染过程

父beforeCreate→父created→父beforeMount→子beforeCreated→子created→子beforeMount→子mounted→父mounted

  • 更新过程

父beforeUpdate→子beforeUpdate→子updated→父updated

  • 销毁过程

父beforeDestroy→子beforeDestroy→子destroyed→父destroyed

常用指令

v-text 文本填充

示例:

1
2
<span v-text="msg"></span>
<!--{{ 双大括号也会将数据解释为纯文本 }}-->

v-html html填充

示例:

1
<div v-html="rawHtml"></div>

v-bind 动态地绑定一个或多个特性,或一个组件 prop 的表达式。

示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div id="app">
<!--当data里面定义的isActive等于true时,is-active这个类才会被添加起作用-->
<!--当data里面定义的hasError等于true时,text-danger这个类才会被添加起作用-->
<!--也可以写表达式:例如三元运算符等等-->
<div :class="{'is-active':isActive, 'text-danger':hasError}"></div>
</div>
<!--其他写法-->
<!--<单个类可写 :class="{'bg-danger text-light':true}">-->
<!--<多个类可写 :class="{'bg-danger text-light':true}">-->
<div :class="xxx == xxxxx ? 'bg-danger' : 'bg-light'">
<span :class="['message-item-user', {'order-last': xxx == xxxxx}, {xxx == xxxxx ? 'bg-danger' : 'bg-light'}]">{{ message }}</span>
</div>

<script>
var app = new Vue({
el: '#app',
data: {
isActive: true,
hasError: false
}
});
</script>

v-on 用于监听指定元素的 DOM 事件,绑定事件监听器。

  • 常用 v-on 事件
NameDescriptionNameDescription
click点击元素mouseenter鼠标移入元素
dbclick双击元素mouseleave鼠标移出元素
focus元素获得焦点mousemove鼠标在元素内移动
blur元素失去焦点mousedown在元素上按下鼠标
keydown按下键盘mouseup在元素上释放鼠标
keyup释放键盘submit提交元素
input在元素内输入内容scroll滚动元素

示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="app">
<button @click="consoleLog"></button>
</div>

<script>
var app = new Vue({
el: '#app',
methods: {
consoleLog: function (event) {
console.log(1);
}
}
});
</script>

v-model 实现表单输入和应用状态之间的双向绑定。

示例:

原理:<input type="text" :value="datax" @input="datax = $event.target.value">

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="app">
<input v-model.trim="somebody">
<p>hello {{somebody}}</p>
</div>

<script>
var app = new Vue({
el: '#app',
data: {
somebody: 'world'
}
});
</script>

v-for 循环遍历,基于一个数组或者对象渲染一个列表。

示例:

有以下两种遍历方式

1
2
3
<div v-for="(item,index) in items"></div> //使用in,index是一个可选参数,表示当前项的索引。
<div v-for="item of items"></div>//使用of。
//遍历对象时是按照Object.keys()的顺序进行遍历,即ascii顺序。

v-if 根据表达式的值的真假条件渲染元素

示例:

1
<div v-if="ok">yes</div>

v-else 搭配v-if使用

示例:

1
2
<div v-if="ok">yes</div>
<div v-else>No</div>

v-show 根据表达式的真假值展示元素

示例:

1
<h1 v-show="ok">hello world</h1>

v-pre 跳过这个元素和它的子元素的编译过程

示例:

1
2
3
4
<div id="app">
<span v-pre>{{message}}</span> //这条语句不进行编译
<span>{{message}}</span>
</div>

v-once 只渲染元素和组件一次

示例:

1
2
3
4
5
6
7
8
9
<span v-once>This will never change:{{msg}}</span> //单个元素
<div v-once>//有子元素
<h1>comment</h1>
<p>{{msg}}</p>
</div>
<my-component v-once:comment="msg"></my-component> //组件
<ul>
<li v-for="i in list">{{i}}</li>
</ul>

常用于处理 DOM 事件的事件修饰符

InstructionsDescription
.stop阻止事件继续传播
.prevent事件不再重载页面
.capture使用事件捕获模式,即元素自身触发的事件先在此处处理,然后才交由内部元素进行处理。
.self只当在 event.target 是当前元素自身时触发处理函数
.once事件将只会触发一次
.passive告诉浏览器你不想阻止事件的默认行为
  • @keyup.enter.native="toNextInput" 常用按键绑定

常用属性

  • el:指示 vue 编译器从什么地方开始解析 vue 语法,相当于一个占位符。
  • data:组织从 view 中抽象出来的属性,将视图的数据抽象出来存放在 data 中。
  • template:设置模板,可以用于替换页面元素。
  • method:放置页面中的业务逻辑,js 方法一般都放在 method 中。
  • render:创建真正的 Virtual Dom。
  • computed:根据已经存在的属性计算出新的属性,对于相同的数据会缓存,当依赖的属性值发生变化时,这个属性的值也会自动更新。
  • watch:监听 data 中的数据变化。

过滤器

  • 在两个大括号中
    • {{message | capitalize}}
  • 在 v-bind 指令中
    • v-bind:id="rawId | formatId"
  • 串联
    • {{message | filterA | filter}}
  • 接受参数
    • {{message | filterA('arg1',arg2)}}

计算属性和监听器

计算属性

  • computed
  • 属性默认只有 getter,不过在需要的时候也可以提供一个 setter。
  • computed 和 methods 的区别:computed 是基于依赖缓存,只有相关依赖发生改变时才会重新取值。methods 是在重新渲染的时候,函数总会重新调用执行。

示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<template>
<div id="app">
<div>first: {{first}}</div>
<div>last: {{last}}</div>
<div>result: {{result}}</div>
<button @click="onclick">更改</button>
</div>
</template>

<script>
export default {
data() {
return{
first: 10,
ast: 10
}
},
computed: {
result: {
// 监听 data 中的 first 和 last, 得到新变量 result。
// 注意:只有当值改变时才会执行。
get() {
return this.first + this.last;
},
// set方法作用:通过参数修改计算的依赖属性 first 和 last 值
set(newValue) {
this.first = newValue;
this.last = newValue;
}
}
},
methods: {
onclick() {
// 调用计算属性的 set 方法,修改 first 和 last 的值。
this.result = 15;
}
}
}
</script>

监听属性

  • watch 实时监听数据变化并改变自身的值。
  • 允许执行异步操作,限制执行该操作频率。

示例:

1
2
3
4
5
6
7
8
watch: {
value(newVal, oldVal) {
if (newVal != oldVal) {
this.sum = newVal;
} else {
console.log(newVal, oldVal);
}
}

组件

组件的定义使用

示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//定义一个 <vue-demo> 组件
Vue.component('vue-demo', {
data: function () {
//do something
},
//设置显示模板
template: ''
});

//使用 <vue-demo> 组件
//HTML 文件中引入使用
<div id="app">
<vue-demo></vue-demo>
</div>
//JS 文件中初始化
new Vue({ el: '#app' });

父子组件的传值方式

  • props/$emit
    • 父组件传值给子组件:父组件通过一个属性,将其 data 上的值于该属性进行绑定,子组件通过 props 接受这个属性,就能获取这个属性的值。
    • 子组件传值给父组件:子组件通过实践触发的方式向父组件传值,当子组件的数值发生变化时,向外发射一个事件,然后父组件监听该事件名称,并在父组件的 data中去定义这个函数名的函数体
    • 注册组件
    • 全局组件:所有实例都能使用。
    • 局部组件:只能在实例的选项中使用。
    • Prop。
    • Prop 验证:type 可以是原生构造器,也可以是自定义构造器。
    • 自定义事件。
    • 父组件使用 props 传递数据给子组件,子组件将数据传递回去则需要使用到自定义事件。
    • 使用 v-on 绑定自定义事件,每个 Vue 实例都实现了事件接口(Events interface)。
    • 父组件可以在使用子组件的地方直接用 v-on 监听子组件触发的事件。
  • $children/$parent
  • provide/reject
  • ref
  • eventBus
  • Vuex
  • html5Storage
  • $attrs/$listeners

自定义指令

除了默认设置的核心指令( v-model 和 v-show),Vue 也允许注册自定义指令。

钩子函数

FuntionDescription
bind只调用一次,指令第一次绑定到元素时调用.
inserted被绑定元素插入父节点时调用
update被绑定元素所在的模板更新时调用
componentUpdated被绑定元素所在模板完成一次更新周期时调用
unbind只调用一次,指令与元素解绑时调用。

钩子函数参数

ParameterDescription
el指令所绑定的元素,可以直接用来操作 DOM。
binding一个对象
vnodeVue 编译生成的虚拟节点
oldVnode上一个虚拟节点,仅在 update 和 componentUpdateed 中可用。

binding属性

AttributeDescription
name指令名
value指令的绑定值
oldValue指令绑定的前一个值
expression绑定值的表达式或变量名
arg传给指令的参数
modifiers一个包含修饰符的对象

路由

router-link 是一个用于设置一个导航链接的组件,实现路由的跳转。

相关属性

AttributeDescription
to目标路由的链接
replace/push调用 router.replace(),导航后不会留下 history 记录。
append在当前(相对)路径前添加其路径
tag渲染成某种标签
active-class设置链接激活时使用的 CSS 类名
exact-active-class配置当链接被精确匹配的时候应该激活的 class
event声明可以用来除法导航的事件

router-view 是一个用于渲染页面的组件,实现指定路由对应组件的渲染,相当于一个占位的作用,配合 router-link 使用

过渡与动画

语法格式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<transition name="nameoftransition">
<div></div>
</transition>

// 定义进入前与离开后状态
.nameoftransition-enter, .nameoftransition-leave-to {
...
}
// 定义离开前与进入后状态
.nameoftransition-leave, .nameoftransition-enter-to {
...
}
// 定义进出过程
.nameoftransition-enter-active, .nameoftransition-leave-active {
...
}

切换类

ClassDescription
v-enter定义进入过渡的开始状态
v-enter-active定义进入过渡生效时的状态
v-enter-to定义进入过渡的结束状态
v-leave定义离开过渡的开始状态
v-leave-active定义离开过渡生效时的状态
v-leave-to定义离开过渡的结束状态

自定义过渡的类名

  • enter-class
  • enter-active-class
  • enter-to-class (2.1.8+)
  • leave-class
  • leave-active-class
  • leave-to-class (2.1.8+)

同时使用过渡和动画

  • 必须设置相应的时间监听器来知道过渡的完成
  • 监听器可以是 transitionend 或 animationend
  • 同时设置两种过渡效果时,需使用 type 特性设置 animation 或 transition 来明确声明需要监听的类型

其他

  • 自定义指令
  • 更多传值方式(前面提到未[举栗子])
  • 混入
  • 插槽
  • 路由钩子与鉴权机制实现
  • nextTick
  • Vuex
  • SSR
  • Vue-cli

篇幅有限,这些需自己深入了解啦。

bulb