fun2:function (event){
			alert("鼠标悬停在textarea上");
			event.stopPropagation();
		}
	}
});
//传统的js方式
function divmouseover(){
	alert("鼠标移动到div上了")
}
function textareamouseover(){
	alert("鼠标移动到了textarea上");
	event.stopPropagation();
}

##### 2.2 vue中的事件修饰符


`Vue.js`为`v-on`提供了事件修饰符来处理DOM事件细节，如：`event.preventDefault()`或`event.stopPropagation()`


Vue.js通过由点(.)表示的指令后缀来调用修饰符


* `.stop`：停止事件的传播，相当于`.stopPropagation()`
* `.prevent`：阻止默认事件起作用，相当于`.preventDefault()`
* `capture`
* `.self`
* `once`

##### 2.3 vue中的按键修饰符


vue允许为v-on在监听键盘事件时添加按键修饰符


全部的按键别名：


* `.enter`
* `.tab`
* `delete`：捕获（“删除”和“退格”键）
* `.esc`
* `.space`
* `up`
* `.down`
* `.left`
* `.right`
* `ctrl`
* `alt`
* `.shift`
* `.meta`

##### 2.4 v-text和v-html

##### 2.5 v-bind


###### 简化


直接使用:（冒号）

##### 2.6 v-model


取值，获取json（有点像对象的形式）的值

##### 2.7 v-for


###### 遍历数组

###### 遍历对象

	</table>
</div>

##### 2.8 v-if与v-show


v-if是根据表达式的值来决定是否渲染元素


v-show是根据表达式的值来切换元素的display css属性

#### 第三节： vue.js的生命周期


8个生命周期的执行点，4个基本的，4个特殊的


vue在生命周期中有这些状态，`beforeCreate`,`created`,`beforeMount`,`mounted`,`beforeUpdate`,`updated`,`beforeDestroy`,`destroyed`。Vue 在实例化的过程中，会调用这些生命周期的钩子，给我们提供了执行自定义逻辑的机会


vue对象初始化过程中，会执行到`beforeCreate`,`created`,`beforeMount`,`mounted` 这几个钩子的内容


* `beforeCreate`：数据还没有监听，没有绑定到vue对象实例，同时也没有挂载对象
* `created`：数据已经绑定到了对象实例，但是还没有挂载对象
* `beforeMount`：模板已经编译好了，根据数据和模板已经生成了对应的元素对象，将数据对象关联到了对象的el属性，el属性是一个`HTMLElement`对象，也就是这个阶段，vue实例通过原生的`createElement`等方法来创建这个html片段，准备注入到我们vue实例指明的el属性所对应的挂载点
* `mounted`：将el的内容挂载到了el，相当于我们在jquery执行了`(el).html(el)`，生成页面上真正的DOM，上面我们就会发现DOM的元素和我们el的元素是一致的。在此之后，我们能够用方法来获取到el元素下的DOM对象，并进行各种操作
* 当我们的data发生改变时，会调用`beforeUpdate`和`updated`方法
	+ `beforeUpdate`：数据更新到DOM前，我们可以看到`$el`对象已经修改，但是我们页面上DOM的数据还没有发生改变
	+ `updated`：DOM结构会通过虚拟DOM的原则，找到需要更新页面DOM结构的最小路径，将改变更新到DOM上面，完成更新
* `beforeDestroy`，`destroed`：实例的销毁，vue实例还是存在的，只是解绑了事件的监听还有watcher对象数据与viewde绑定，即数据驱动


![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/9750a41fdd174fbabc9b660dd5a7f299.png)

#### 第四节：VueJs ajax


##### 4.1 vue-resource


`vue-resource`是Vue.js的插件提供了使用`XMLHttpRequest`或`JSON`进行Web请求和处理响应的服务。当vue更新到2.0之后，作者就宣告不再对`vue-resource`更新，而是推荐axios。


vue-resource的github：http://github.com/pagekit/vue-resource


##### 4.2 Axios


Axios是一个基于promise的http库，可以用在浏览器和node.js中




### 紧跟潮流



大前端和全栈是以后前端的一个趋势，懂后端的前端，懂各端的前端更加具有竞争力，以后可以往这个方向靠拢。

这边整理了一个对标“阿里 50W”年薪企业高级前端工程师成长路线，由于图片太大仅展示一小部分

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

![](https://img-blog.csdnimg.cn/img_convert/8f4634e85dd904c95364c9d62e0e9eff.png)