vue学习笔记系列（二）

逃离我推掉我的手 2022-03-12 08:10 207阅读 0赞

## 动手第一个demo ##

我们多少都会了解vue的核心就是数据，实现了数据的双向绑定。话不多说先上代码：

此时输入的表单的数据就会自动绑定到name这个值上面去，然后显示到页面上。  
![在这里插入图片描述][20190305174607184.png]  
**1 、 Vue实例与数据绑定**

创建实例，这里的构造函数Vue就创建了一个app实例

var app = new Vue({
    	el:'#app',
    	data:{
    		name:''	
    	}
    })

必不可少的就是el，用于指定一个已存在的DOM元素来挂载Vue实例，挂载成功后我们可以通过app.$el来访问该元素。Vue实例本身代理了data对象里的所有属性：

以上例子可以说明，显式声明的数据指向一个已有的变量，并且它们之间默认建立了双向绑定，修改任意一个另一个就会跟着改变。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjcyNDE3Ng_size_16_color_FFFFFF_t_70]  
**2 、 生命周期**

1.  beforeCreate：在实例初始化之后，数据观察者（data observer）和event/watcher事件配置之前调用。
2.  created：实例创建完成后立即调用。实例已完成数据观察者的运算，watch/event事件回调。然而，挂载阶段还没开始，`$el`属性不可见。
3.  beforeMount：在挂载开始之前调用，相关的render函数首次调用。
4.  mounted：el被新创建的`vm.$el`替换，并且挂载到实例上之后再调用该钩子。如果root实例挂载了一个文档内元素，当调用mounted时vm.$el也在文档内。
5.  beforeUpdated：在数据更新时调用，发生在虚拟DOM重新渲染和打补丁之前。
6.  updated：由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。
7.  beforeDestroy：实例销毁之前调用，此时实例完全可用。
8.  destroyed：实例销毁后调用，实例指示的所有东西都接触绑定，所有的事件监听器会被移除，子实例也会被销毁。
9.  activated：keep-alive组件激活时调用。
10. deactivated：keep-alive组件停用时调用。
11. ErrorCapture：捕获一个来自子孙组件错误时调用。

> 5和6这两个不常用，且不推荐使用

**3 、指令和事件**

*  v-if
 *  v-for
 *  v-show
 *  v-on
 *  v-model
 *  v-bind
 *  v-html

上面的指令为常用的指令，下面就来说一下它们的区别和用法：

1.  v-if 和 v-show的区别：v-show是CSS级别的display:none;和display:block;之间的切换，而v-if 决定是否显示代码块的内容，是属于DOM级别的操作。频繁操作时使用v-show，一次性渲染完成的时候选择v-if。对于v-if的优化，由于v-if为false的时候内部组件是不会渲染的，所以在特定时候需要渲染组件的时候（或异步，如`$nextTick`是在下次更新循环结束之后延迟执行回调，用于获得更新后的DOM）设置为true，优先渲染其他内容。
2.  v-bind用于动态更新HTML元素上的属性，如id、class等。而v-on表示给元素绑定一个点击事件，可以是原生的事件，如果绑定原生事件则需要`@click.native`这样写。它们的语法糖（简写）为：bind和 @click
3.  v-model主要是实现数据的双向绑定的，用于表单元素上。
4.  v-html主要是解析HTML文档，防止以字符串形式解析出来。

**ps：笔者最近开通了微信公众号，大家可以关注一下哦，谢谢大家的支持！**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjcyNDE3Ng_size_16_color_FFFFFF_t_70 1]

[20190305174607184.png]: /images/20220312/7b4b5fcb9119442f962f0a027f445adb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjcyNDE3Ng_size_16_color_FFFFFF_t_70]: /images/20220312/7a015563d77b4d7a903c99920efcff11.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjcyNDE3Ng_size_16_color_FFFFFF_t_70 1]: /images/20220312/c2667f044e664c579c081201b676e0bc.png