Vue.js中ref 及 $event 事件对象

在使用vue.js框架过程中，我们经常会听到有人说数据驱动视图，一切操作皆为操作数据，这句话没什么大毛病，只是个人感觉说这句话的人是一根筋罢了，因为js很大一部分核心就是操作DOM。即使是在框架时代，我们也无法避免这个问题。简单举个例子，如果在你渲染一个列表li，想在用户点击这个li时候增加一个一个背景颜色，那你是否需要拿到后端的数据，然后一顿循环在每个item的属性上添加一个变量开关，然后在页面去绑定这个开关，接着在点击后开始改变当前序列号index下的数据中对应的那个开关，这时候你还会遇到如果是对象属性操作，数据改变视图不更新问题，于是你还要手动更新视图。。。怎么一看，真心麻烦，vue本身就给我们提供了一系列的DOM操作方式

ref

在标签上添加 ref = “name” ，表示获取当前元素节点

获取

注意，该方式异常强大，通过该方法可以直接在父组件中操作子组件内部的data，从而进行父子组件单向通信。比如在实际项目的element ui弹窗组件中，如果在外部想展示该弹窗就需要弹窗组件中的:visible.sync="dialogVisible"，这时候我们可以直接通过ref方式修改，超级简便

获取事件对象 ， 方法参数传递 $event

获取

打印结果：

也可以获取执行事件的节点

比如，我想给 button 按钮 添加背景颜色

也可以通过事件对象获取自定义属性，比如，button 按钮上自定义一个属性：

结果：