VueJS基础知识

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

介绍

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

使用方式

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

开发规范

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

生命周期

基本顺序

创建→挂载→更新→销毁

具体步骤

State	Description
`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 的表达式。

示例：

<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 事件

Name	Description	Name	Description
`click`	点击元素	`mouseenter`	鼠标移入元素
`dbclick`	双击元素	`mouseleave`	鼠标移出元素
`focus`	元素获得焦点	`mousemove`	鼠标在元素内移动
`blur`	元素失去焦点	`mousedown`	在元素上按下鼠标
`keydown`	按下键盘	`mouseup`	在元素上释放鼠标
`keyup`	释放键盘	`submit`	提交元素
`input`	在元素内输入内容	`scroll`	滚动元素

示例：

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

<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 跳过这个元素和它的子元素的编译过程

示例：

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

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

示例：

<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 事件的事件修饰符

Instructions	Description
`.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 是在重新渲染的时候，函数总会重新调用执行。

示例：

<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 实时监听数据变化并改变自身的值。
允许执行异步操作，限制执行该操作频率。

示例：

watch: {
  value(newVal, oldVal) {
    if (newVal != oldVal) {
      this.sum = newVal;
    } else {
      console.log(newVal, oldVal);
  }
}

组件

组件的定义使用

示例：

//定义一个 <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 也允许注册自定义指令。

钩子函数

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

钩子函数参数

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

binding属性

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

路由

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

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

过渡与动画

语法格式

<transition name="nameoftransition">
  <div></div>
</transition>

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

切换类

Class	Description
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

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

介绍

使用方式

开发规范

生命周期

基本顺序

具体步骤

父子组件执行顺序

常用指令

v-text 文本填充

v-html html填充

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

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

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

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

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

v-else 搭配v-if使用

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

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

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

常用属性

过滤器

计算属性和监听器

计算属性

监听属性

组件

组件的定义使用

父子组件的传值方式

自定义指令

钩子函数

钩子函数参数

binding属性

路由

相关属性

过渡与动画

语法格式

切换类

自定义过渡的类名

同时使用过渡和动画

其他