Vue基础内容（目前写个大概，之后细化）

本文主要是介绍Vue基础内容（目前写个大概，之后细化），对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

1.Vue生命周期：
Vue实例从创建到销毁的过程，就是声明周期。从创建实例、初始化数据、编译模板、挂载DOM（->渲染）、更新（->渲染）、卸载等一系列过程，我们称之为Vue的生命周期。

共分为八个阶段，如下：
创建前/后，载入前/后，更新前/后、销毁前/后。

• beforeCreate：可以在这加个loading事件，在加载实例时触发
• created：初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用。
• beforeMount
• mounted：挂载元素，获取到DOM节点。
• beforeUpdate
• updated：如果对数据统一处理，在这里写上相应函数。
• beforeDestroy：可以做一个确认停止事件的确认框。
• destroyed

2.Vue的生命周期的作用：
它的生命周期中有很多事件钩子，让我们在控制整个Vue实例的过程时，更容易形成好的逻辑。

3.DOM渲染在哪个周期就已经完成：
DOM渲染在Mounted中就已经完成。

4.v-show和v-if的区别：
v-show是CSS切换，v-if是完整的销毁和重新创建；
使用频繁切换时用v-show，运行时较少改变用v-if；
v-if值为false的时候，不会有html标签生成，v-show值为false时html元素依然存在，只是css中的display显示或隐藏。

5.开发中常用的指令：
·v-model：一般用在表单输入，实现表单控件和数据的双向绑定；
·v-html：更新元素的innerHTML
·v-if和v-show：条件渲染
·v-on:click ： 可以简写为@click，@绑定一个事件。
·v-for：基于源数据多次渲染元素或模板快
·v-bind：当表达式的值发生改变时，将其产生的连带影响，响应式的作用于DOM。

v-bind:title="msg" 简写： :title="msg"

6.绑定class的数组用法：
·对象方法：v-bind:class="{ active: isActive, 'text-danger': hasError }"
当isActive和hasError为true时，才会将active和text-danger两个样式添加到class中。

·数组方法：<div v-bind:class="[activeClass, errorClass]"></div>

·绑定内联样式：

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

data: {
  activeColor: 'red',
  fontSize: 30
}

7.组件之间的传值通信：

这篇关于Vue基础内容（目前写个大概，之后细化）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！