diff --git a/examples/docs/en-US/dialog.md b/examples/docs/en-US/dialog.md
index 6af77d76..ae575514 100644
--- a/examples/docs/en-US/dialog.md
+++ b/examples/docs/en-US/dialog.md
@@ -54,13 +54,13 @@ Dialog pops up a dialog box, and it's quite customizable.
 :::demo Set the `v-model` attribute with a `Boolean`, and Dialog shows when it is `true`. The Dialog has two parts: `body` and `footer`, and the latter requires a `slot` named `footer`. The optional `title` attribute (empty by default) is for defining a title. This example explicitly changes the value of `v-model` to toggle Dialog. In addition, we also provide `open` and `close` method, which you can call to open/close the Dialog.
 
 ```html
-<el-button type="text" @click.native="dialogVisible = true">click to open the Dialog</el-button>
+<el-button type="text" @click="dialogVisible = true">click to open the Dialog</el-button>
 
 <el-dialog title="Tips" v-model="dialogVisible" size="tiny">
   <span>This is a message</span>
   <span slot="footer" class="dialog-footer">
-    <el-button @click.native="dialogVisible = false">Cancel</el-button>
-    <el-button type="primary" @click.native="dialogVisible = false">Confirm</el-button>
+    <el-button @click="dialogVisible = false">Cancel</el-button>
+    <el-button type="primary" @click="dialogVisible = false">Confirm</el-button>
   </span>
 </el-dialog>
 
@@ -84,7 +84,7 @@ The content of Dialog can be anything, even a table or a form. This example show
 
 ```html
 <!-- Table -->
-<el-button type="text" @click.native="dialogTableVisible = true" type="text">open a Table nested Dialog</el-button>
+<el-button type="text" @click="dialogTableVisible = true" type="text">open a Table nested Dialog</el-button>
 
 <el-dialog title="Shipping address" v-model="dialogTableVisible">
   <el-table :data="gridData">
@@ -95,7 +95,7 @@ The content of Dialog can be anything, even a table or a form. This example show
 </el-dialog>
 
 <!-- Form -->
-<el-button type="text" @click.native="dialogFormVisible = true" type="text">open a Form nested Dialog</el-button>
+<el-button type="text" @click="dialogFormVisible = true" type="text">open a Form nested Dialog</el-button>
 
 <el-dialog title="Shipping address" v-model="dialogFormVisible">
   <el-form :model="form">
@@ -110,8 +110,8 @@ The content of Dialog can be anything, even a table or a form. This example show
     </el-form-item>
   </el-form>
   <span slot="footer" class="dialog-footer">
-    <el-button @click.native="dialogFormVisible = false">Cancel</el-button>
-    <el-button type="primary" @click.native="dialogFormVisible = false">Confirm</el-button>
+    <el-button @click="dialogFormVisible = false">Cancel</el-button>
+    <el-button type="primary" @click="dialogFormVisible = false">Confirm</el-button>
   </span>
 </el-dialog>
 
diff --git a/examples/docs/en-US/form.md b/examples/docs/en-US/form.md
index 1fc36da2..8025311b 100644
--- a/examples/docs/en-US/form.md
+++ b/examples/docs/en-US/form.md
@@ -737,7 +737,7 @@ Form component allows you to verify your data, helping you find and correct erro
       }
     }"
   >
-    <el-input v-model="domain.value"></el-input><el-button @click.native.prevent="removeDomain(domain)">Delete</el-button>
+    <el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">Delete</el-button>
   </el-form-item>
   <el-form-item>
     <el-button type="primary" @click="handleSubmit3">Submit</el-button>
diff --git a/examples/docs/en-US/installation.md b/examples/docs/en-US/installation.md
index 8ad49c02..a2eaa2db 100644
--- a/examples/docs/en-US/installation.md
+++ b/examples/docs/en-US/installation.md
@@ -30,7 +30,7 @@ If you are using CDN, a hello-world page is easy with Element. [Online Demo](htt
 </head>
 <body>
   <div id="app">
-    <el-button @click.native="visible = true">Button</el-button>
+    <el-button @click="visible = true">Button</el-button>
     <el-dialog v-model="visible" title="Hello world">
       <p>Try Element</p>
     </el-dialog>
diff --git a/examples/docs/en-US/loading.md b/examples/docs/en-US/loading.md
index cf7edea0..c4f77fc3 100644
--- a/examples/docs/en-US/loading.md
+++ b/examples/docs/en-US/loading.md
@@ -160,7 +160,7 @@ Show a full screen animation while loading data.
 <template>
   <el-button
     type="primary"
-    @click.native="openFullScreen"
+    @click="openFullScreen"
     v-loading.fullscreen.lock="fullscreenLoading">
     Full screen loading for 3 seconds
   </el-button>
diff --git a/examples/docs/en-US/message-box.md b/examples/docs/en-US/message-box.md
index 0811a0b1..c774b2d2 100644
--- a/examples/docs/en-US/message-box.md
+++ b/examples/docs/en-US/message-box.md
@@ -91,7 +91,7 @@ Alert interrupts user operation until the user confirms.
 
 ```html
 <template>
-  <el-button type="text" @click.native="open">Click to open the Message Box</el-button>
+  <el-button type="text" @click="open">Click to open the Message Box</el-button>
 </template>
 
 <script>
@@ -122,7 +122,7 @@ Confirm is used to ask users' confirmation.
 
 ```html
 <template>
-  <el-button type="text" @click.native="open2">Click to open the Message Box</el-button>
+  <el-button type="text" @click="open2">Click to open the Message Box</el-button>
 </template>
 
 <script>
@@ -160,7 +160,7 @@ Prompt is used when user input is required.
 
 ```html
 <template>
-  <el-button type="text" @click.native="open3">Click to open Message Box</el-button>
+  <el-button type="text" @click="open3">Click to open Message Box</el-button>
 </template>
 
 <script>
@@ -198,7 +198,7 @@ Can be customized to show various content.
 
 ```html
 <template>
-  <el-button type="text" @click.native="open4">Click to open Message Box</el-button>
+  <el-button type="text" @click="open4">Click to open Message Box</el-button>
 </template>
 
 <script>
diff --git a/examples/docs/en-US/message.md b/examples/docs/en-US/message.md
index 1d42e559..3d8c6ac7 100644
--- a/examples/docs/en-US/message.md
+++ b/examples/docs/en-US/message.md
@@ -69,7 +69,7 @@ Displays at the top, and disappears after 3 seconds.
 
 ```html
 <template>
-  <el-button :plain="true" @click.native="open">Show message</el-button>
+  <el-button :plain="true" @click="open">Show message</el-button>
 </template>
 
 <script>
@@ -91,10 +91,10 @@ Used to show the feedback of Success, Warning, Message and Error activities.
 :::demo When you need more customizations, Message component can also take an object as parameter. For example, setting value of `type` can define different types, and its default is `info`. In such cases the main body is passed in as the value of `message`. Also, we have registered methods for different types, so you can directly call it without passing a type like `open4`.
 ```html
 <template>
-  <el-button :plain="true" @click.native="open2">success</el-button>
-  <el-button :plain="true" @click.native="open3">warning</el-button>
-  <el-button :plain="true" @click.native="open">message</el-button>
-  <el-button :plain="true" @click.native="open4">error</el-button>
+  <el-button :plain="true" @click="open2">success</el-button>
+  <el-button :plain="true" @click="open3">warning</el-button>
+  <el-button :plain="true" @click="open">message</el-button>
+  <el-button :plain="true" @click="open4">error</el-button>
 </template>
 
 <script>
@@ -133,10 +133,10 @@ A close button can be added.
 :::demo A default Message cannot be closed manually. If you need a closable message, you can set `showClose` field. Besides, same as notification, message has a controllable `duration`. Default duration is 3000 ms, and it won't disappear when set to `0`.
 ```html
 <template>
-  <el-button :plain="true" @click.native="open5">message</el-button>
-  <el-button :plain="true" @click.native="open6">success</el-button>
-  <el-button :plain="true" @click.native="open7">warning</el-button>
-  <el-button :plain="true" @click.native="open8">error</el-button>
+  <el-button :plain="true" @click="open5">message</el-button>
+  <el-button :plain="true" @click="open6">success</el-button>
+  <el-button :plain="true" @click="open7">warning</el-button>
+  <el-button :plain="true" @click="open8">error</el-button>
 </template>
 
 <script>
diff --git a/examples/docs/en-US/notification.md b/examples/docs/en-US/notification.md
index d1037c38..6298d25c 100644
--- a/examples/docs/en-US/notification.md
+++ b/examples/docs/en-US/notification.md
@@ -65,12 +65,12 @@ Displays a global notification message at the upper right corner of the page.
 <template>
   <el-button
     plain
-    @click.native="open">
+    @click="open">
     Closes automatically
   </el-button>
   <el-button
     plain
-    @click.native="open2">
+    @click="open2">
     Won't close automatically
     </el-button>
 </template>
@@ -107,22 +107,22 @@ We provide four types: success, warning, info and error.
 <template>
   <el-button
     plain
-    @click.native="open3">
+    @click="open3">
     Success
   </el-button>
   <el-button
     plain
-    @click.native="open4">
+    @click="open4">
     Warning
   </el-button>
   <el-button
     plain
-    @click.native="open5">
+    @click="open5">
     Info
   </el-button>
   <el-button
     plain
-    @click.native="open6">
+    @click="open6">
     Error
   </el-button>
 </template>
diff --git a/examples/docs/en-US/popover.md b/examples/docs/en-US/popover.md
index be3f73b3..b7f77552 100644
--- a/examples/docs/en-US/popover.md
+++ b/examples/docs/en-US/popover.md
@@ -185,8 +185,8 @@ Of course, you can nest other operations. It's more light-weight than using a di
   v-model="visible2">
   <p>Are you sure to delete this?</p>
   <div style="text-align: right; margin: 0">
-    <el-button size="mini" type="text" @click.native="visible2 = false">cancel</el-button>
-    <el-button type="primary" size="mini" @click.native="visible2 = false">confirm</el-button>
+    <el-button size="mini" type="text" @click="visible2 = false">cancel</el-button>
+    <el-button type="primary" size="mini" @click="visible2 = false">confirm</el-button>
   </div>
 </el-popover>
 
diff --git a/examples/docs/en-US/steps.md b/examples/docs/en-US/steps.md
index 26d619b4..424141c6 100644
--- a/examples/docs/en-US/steps.md
+++ b/examples/docs/en-US/steps.md
@@ -31,7 +31,7 @@ Simple step bar.
   <el-step title="Step 3"></el-step>
 </el-steps>
 
-<el-button style="margin-top: 12px;" @click.native="next">Next step</el-button>
+<el-button style="margin-top: 12px;" @click="next">Next step</el-button>
 
 <script>
   export default {
diff --git a/examples/docs/en-US/tooltip.md b/examples/docs/en-US/tooltip.md
index 9c3321bd..1463e2ce 100644
--- a/examples/docs/en-US/tooltip.md
+++ b/examples/docs/en-US/tooltip.md
@@ -170,7 +170,7 @@ In fact, Tooltip is an extension based on [Vue-popper](https://github.com/elemen
 ```html
 <template>
   <el-tooltip :disabled="disabled" content="click to close tooltip function" placement="bottom" effect="light">
-    <el-button @click.native="disabled=true">click to close tooltip function</el-button>
+    <el-button @click="disabled=true">click to close tooltip function</el-button>
   </el-tooltip>
 </template>
 
diff --git a/examples/docs/zh-CN/dialog.md b/examples/docs/zh-CN/dialog.md
index 695a234e..6833e376 100644
--- a/examples/docs/zh-CN/dialog.md
+++ b/examples/docs/zh-CN/dialog.md
@@ -75,13 +75,13 @@ Dialog 弹出一个对话框，适合需要定制性更大的场景。
 :::demo 需要设置`v-model`属性，它接收`Boolean`，当为`true`时显示 Dialog。Dialog 分为两个部分：`body`和`footer`，`footer`需要具名为`footer`的`slot`。`title`属性用于定义标题，它是可选的，默认值为空。本例通过显式改变`v-model`的值来打开 Dialog，此外我们还为 Dialog 实例提供了`open`和`close`方法，可以通过调用它们来打开/关闭 Dialog。
 
 ```html
-<el-button type="text" @click.native="dialogVisible = true">点击打开 Dialog</el-button>
+<el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>
 
 <el-dialog title="提示" v-model="dialogVisible" size="tiny">
   <span>这是一段信息</span>
   <span slot="footer" class="dialog-footer">
-    <el-button @click.native="dialogVisible = false">取 消</el-button>
-    <el-button type="primary" @click.native="dialogVisible = false">确 定</el-button>
+    <el-button @click="dialogVisible = false">取 消</el-button>
+    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
   </span>
 </el-dialog>
 
@@ -104,7 +104,7 @@ Dialog 组件的内容可以是任意的，甚至可以是表格或表单，下
 :::demo
 ```html
 <!-- Table -->
-<el-button type="text" @click.native="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>
+<el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>
 
 <el-dialog title="收货地址" v-model="dialogTableVisible">
   <el-table :data="gridData">
@@ -115,7 +115,7 @@ Dialog 组件的内容可以是任意的，甚至可以是表格或表单，下
 </el-dialog>
 
 <!-- Form -->
-<el-button type="text" @click.native="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>
+<el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>
 
 <el-dialog title="收货地址" v-model="dialogFormVisible">
   <el-form :model="form">
@@ -130,8 +130,8 @@ Dialog 组件的内容可以是任意的，甚至可以是表格或表单，下
     </el-form-item>
   </el-form>
   <div slot="footer" class="dialog-footer">
-    <el-button @click.native="dialogFormVisible = false">取 消</el-button>
-    <el-button type="primary" @click.native="dialogFormVisible = false">确 定</el-button>
+    <el-button @click="dialogFormVisible = false">取 消</el-button>
+    <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
   </div>
 </el-dialog>
 
diff --git a/examples/docs/zh-CN/form.md b/examples/docs/zh-CN/form.md
index a3fca36b..584f6d2f 100644
--- a/examples/docs/zh-CN/form.md
+++ b/examples/docs/zh-CN/form.md
@@ -728,7 +728,7 @@
       }
     }"
   >
-    <el-input v-model="domain.value"></el-input><el-button @click.native.prevent="removeDomain(domain)">删除</el-button>
+    <el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">删除</el-button>
   </el-form-item>
   <el-form-item>
     <el-button type="primary" @click="handleSubmit3">提交</el-button>
diff --git a/examples/docs/zh-CN/installation.md b/examples/docs/zh-CN/installation.md
index 30ba3868..c357fea0 100644
--- a/examples/docs/zh-CN/installation.md
+++ b/examples/docs/zh-CN/installation.md
@@ -30,7 +30,7 @@ npm i element-ui -D
 </head>
 <body>
   <div id="app">
-    <el-button @click.native="visible = true">按钮</el-button>
+    <el-button @click="visible = true">按钮</el-button>
     <el-dialog v-model="visible" title="Hello world">
       <p>欢迎使用 Element</p>
     </el-dialog>
diff --git a/examples/docs/zh-CN/loading.md b/examples/docs/zh-CN/loading.md
index 3bdde4d1..51ef62f2 100644
--- a/examples/docs/zh-CN/loading.md
+++ b/examples/docs/zh-CN/loading.md
@@ -164,7 +164,7 @@
 <template>
   <el-button
     type="primary"
-    @click.native="openFullScreen"
+    @click="openFullScreen"
     v-loading.fullscreen.lock="fullscreenLoading">
     显示整页加载，3 秒后消失
   </el-button>
diff --git a/examples/docs/zh-CN/message-box.md b/examples/docs/zh-CN/message-box.md
index c7ae6dfc..476c8762 100644
--- a/examples/docs/zh-CN/message-box.md
+++ b/examples/docs/zh-CN/message-box.md
@@ -89,7 +89,7 @@
 :::demo 调用`$alert`方法即可打开消息提示，它模拟了系统的 `alert`，无法通过按下 ESC 或点击框外关闭。此例中接收了两个参数，`message`和`title`。值得一提的是，窗口被关闭后，它默认会返回一个`Promise`对象便于进行后续操作的处理。若不确定浏览器是否支持`Promise`，可自行引入第三方 polyfill 或像本例一样使用回调进行后续处理。
 ```html
 <template>
-  <el-button type="text" @click.native="open">点击打开 Message Box</el-button>
+  <el-button type="text" @click="open">点击打开 Message Box</el-button>
 </template>
 
 <script>
@@ -120,7 +120,7 @@
 
 ```html
 <template>
-  <el-button type="text" @click.native="open2">点击打开 Message Box</el-button>
+  <el-button type="text" @click="open2">点击打开 Message Box</el-button>
 </template>
 
 <script>
@@ -157,7 +157,7 @@
 
 ```html
 <template>
-  <el-button type="text" @click.native="open3">点击打开 Message Box</el-button>
+  <el-button type="text" @click="open3">点击打开 Message Box</el-button>
 </template>
 
 <script>
@@ -195,7 +195,7 @@
 
 ```html
 <template>
-  <el-button type="text" @click.native="open4">点击打开 Message Box</el-button>
+  <el-button type="text" @click="open4">点击打开 Message Box</el-button>
 </template>
 
 <script>
diff --git a/examples/docs/zh-CN/message.md b/examples/docs/zh-CN/message.md
index b6129bae..1d204c5c 100644
--- a/examples/docs/zh-CN/message.md
+++ b/examples/docs/zh-CN/message.md
@@ -69,7 +69,7 @@
 
 ```html
 <template>
-  <el-button :plain="true" @click.native="open">打开消息提示</el-button>
+  <el-button :plain="true" @click="open">打开消息提示</el-button>
 </template>
 
 <script>
@@ -91,10 +91,10 @@
 :::demo 当需要自定义更多属性时，Message 也可以接收一个对象为参数。比如，设置`type`字段可以定义不同的状态，默认为`info`。此时正文内容以`message`的值传入。同时，我们也为 Message 的各种 type 注册了方法，可以在不传入`type`字段的情况下像`open4`那样直接调用。
 ```html
 <template>
-  <el-button :plain="true" @click.native="open2">成功</el-button>
-  <el-button :plain="true" @click.native="open3">警告</el-button>
-  <el-button :plain="true" @click.native="open">消息</el-button>
-  <el-button :plain="true" @click.native="open4">错误</el-button>
+  <el-button :plain="true" @click="open2">成功</el-button>
+  <el-button :plain="true" @click="open3">警告</el-button>
+  <el-button :plain="true" @click="open">消息</el-button>
+  <el-button :plain="true" @click="open4">错误</el-button>
 </template>
 
 <script>
@@ -133,10 +133,10 @@
 :::demo 默认的 Message 是不可以被人工关闭的，如果需要可手动关闭的 Message，可以使用`showClose`字段。此外，和 Notification 一样，Message 拥有可控的`duration`，设置`0`为不会被自动关闭，默认为 3000 毫秒。
 ```html
 <template>
-  <el-button :plain="true" @click.native="open5">消息</el-button>
-  <el-button :plain="true" @click.native="open6">成功</el-button>
-  <el-button :plain="true" @click.native="open7">警告</el-button>
-  <el-button :plain="true" @click.native="open8">错误</el-button>
+  <el-button :plain="true" @click="open5">消息</el-button>
+  <el-button :plain="true" @click="open6">成功</el-button>
+  <el-button :plain="true" @click="open7">警告</el-button>
+  <el-button :plain="true" @click="open8">错误</el-button>
 </template>
 
 <script>
diff --git a/examples/docs/zh-CN/notification.md b/examples/docs/zh-CN/notification.md
index a3bbcf72..d93330f7 100644
--- a/examples/docs/zh-CN/notification.md
+++ b/examples/docs/zh-CN/notification.md
@@ -66,12 +66,12 @@
 <template>
   <el-button
     plain
-    @click.native="open">
+    @click="open">
     可自动关闭
   </el-button>
   <el-button
     plain
-    @click.native="open2">
+    @click="open2">
     不会自动关闭
     </el-button>
 </template>
@@ -108,22 +108,22 @@
 <template>
   <el-button
     plain
-    @click.native="open3">
+    @click="open3">
     成功
   </el-button>
   <el-button
     plain
-    @click.native="open4">
+    @click="open4">
     警告
   </el-button>
   <el-button
     plain
-    @click.native="open5">
+    @click="open5">
     消息
   </el-button>
   <el-button
     plain
-    @click.native="open6">
+    @click="open6">
     错误
   </el-button>
 </template>
diff --git a/examples/docs/zh-CN/popover.md b/examples/docs/zh-CN/popover.md
index 99af36ef..13252ec7 100644
--- a/examples/docs/zh-CN/popover.md
+++ b/examples/docs/zh-CN/popover.md
@@ -212,8 +212,8 @@ Popover 的属性与 Tooltip 很类似，它们都是基于`Vue-popper`开发的
   v-model="visible2">
   <p>这是一段内容这是一段内容确定删除吗？</p>
   <div style="text-align: right; margin: 0">
-    <el-button size="mini" type="text" @click.native="visible2 = false">取消</el-button>
-    <el-button type="primary" size="mini" @click.native="visible2 = false">确定</el-button>
+    <el-button size="mini" type="text" @click="visible2 = false">取消</el-button>
+    <el-button type="primary" size="mini" @click="visible2 = false">确定</el-button>
   </div>
 </el-popover>
 
diff --git a/examples/docs/zh-CN/steps.md b/examples/docs/zh-CN/steps.md
index f864a0b5..e4876462 100644
--- a/examples/docs/zh-CN/steps.md
+++ b/examples/docs/zh-CN/steps.md
@@ -29,7 +29,7 @@
   <el-step title="步骤 3"></el-step>
 </el-steps>
 
-<el-button style="margin-top: 12px;" @click.native="next">下一步</el-button>
+<el-button style="margin-top: 12px;" @click="next">下一步</el-button>
 
 <script>
   export default {
diff --git a/examples/docs/zh-CN/tooltip.md b/examples/docs/zh-CN/tooltip.md
index cc9d95d2..acbf78da 100644
--- a/examples/docs/zh-CN/tooltip.md
+++ b/examples/docs/zh-CN/tooltip.md
@@ -189,7 +189,7 @@ Tooltip 组件提供了两个不同的主题：`dark`和`light`。
 ```html
 <template>
   <el-tooltip :disabled="disabled" content="点击关闭 tooltip 功能" placement="bottom" effect="light">
-    <el-button @click.native="disabled=true">点击关闭 tooltip 功能</el-button>
+    <el-button @click="disabled = true">点击关闭 tooltip 功能</el-button>
   </el-tooltip>
 </template>
 ```
