1. 事件绑定

v-on

v-on:事件名=“执行内容”
v-on:click=“num=1”
简写方法:
@事件名=""
@click="num=2"
当单击的时候设置num值为2

   
  
  
  武汉加油中国加油

tab切换案例

   
    
    
   
   
  vue内容
  angular内容
  react内容

3. vue中的this指向

this在类中指向的是类的实例(new Vue)




       
    


  
   

   
   
        姓名:{{item.name}}--年龄:{{item.age}}岁

4. 表单绑定

v-model

你可以用 v-model 指令在表单、</code> 及 <code><select></code> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 <code>v-model</code> 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。</p> <p><code>v-model</code> 会忽略所有表单元素的 <code>value</code>、<code>checked</code>、<code>selected</code> attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 <code>data</code> 选项中声明初始值。</p> <p><code>v-model</code> 在内部为不同的输入元素使用不同的属性并抛出不同的事件：</p> <ul> <li>text 和 textarea 元素使用 <code>value</code> 属性和 <code>input</code> 事件；</li> <li>checkbox 和 radio 使用 <code>checked</code> 属性和 <code>change</code> 事件；</li> <li>select 字段将 <code>value</code> 作为 prop 并将 <code>change</code> 作为事件。</li> </ul> <p>对于需要使用输入法 (如中文、日文、韩文等) 的语言，你会发现 <code>v-model</code> 不会在输入法组合文字过程中得到更新。如果你也想处理这个过程，请使用 <code>input</code> 事件。</p> <h3>文本</h3> <pre><code><input v-model="message" placeholder="edit me"> <p>Message is: {{ message }}</p> </code></pre> <p><input placeholder="edit me"><br> Message is:</p> <h3>多行文本</h3> <pre><code><span>Multiline message is:</span> <p style="white-space: pre-line;">{{ message }}</p> <br> <textarea v-model="message" placeholder="add multiple lines">

Multiline message is:

在文本区域插值 ({{text}}) 并不会生效，应用 v-model 来代替。

表单修饰符

.lazy v-model默认只要是input事件就会触发视图更新, 添加 .lazy可以转变为使用change事件触发视图更新,进行同步。

.number把表单的值转换为Number数字类型

.trim 自动过滤用户输入的首尾空白字符

案例1-文本框




       
    表单绑定


 
     {{msg}}

案例2-checkbox-多选(霸王条款)




       
    表单绑定-checkbox


 
      {{canDo}}
      
      同意相关条款

不勾选则禁用

霸王条款.png

案例3-checkbox-单选下拉选




       
    表单绑定-单选框和下拉


 
我的性别:{{sex}}
  男 

  女 

  保密 

 我的学历:{{level}}

check.png

5. 简易计算器

计算器-2（自动）

6. 修饰符--事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。

为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。

.stop 停止事件冒泡
.prevent 阻止默认事件
.capture
.self
.once 只执行一次
.passive















...



...

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

2.1.4 新增

不像其它只能对原生的 DOM 事件起作用的修饰符，.once 修饰符还能被用到自定义的组件事件上。如果你还没有阅读关于组件的文档，现在大可不必担心。

2.3.0 新增

Vue 还对应 addEventListener 中的 passive 选项提供了 .passive 修饰符。

...

7. 表单绑定修饰符




       
    表单绑定修饰符


 
   {{v1}}
   
   
   {{v1+v2}}

8. vue事件绑定的修饰符

9. 按键修饰符

在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

你可以直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符。

在上述示例中，处理函数只会在 $event.key 等于 PageDown 时被调用。

按键码

keyCode 的事件用法已经被废弃了并可能不会被最新的浏览器支持。

使用 keyCode attribute 也是允许的：

为了在必要的情况下支持旧浏览器，Vue 提供了绝大多数常用的按键码的别名：

.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

有一些按键 (.esc 以及所有的方向键) 在 IE9 中有不同的 key 值, 如果你想支持 IE9，这些内置的别名应该是首选。

你还可以通过全局 config.keyCodes 对象自定义按键修饰符别名：

// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112

系统修饰键

2.1.0 新增

可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。

.ctrl
.alt
.shift
.meta

注意：在 Mac 系统键盘上，meta 对应 command 键 (⌘)。在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)。在 Sun 操作系统键盘上，meta 对应实心宝石键 ()。在其他特定键盘上，尤其在 MIT 和 Lisp 机器的键盘、以及其后继产品，比如 Knight 键盘、space-cadet 键盘，meta 被标记为“META”。在 Symbolics 键盘上，meta 被标记为“META”或者“Meta”。

例如：





Do something

请注意修饰键与常规按键不同，在和 keyup 事件一起用时，事件触发时修饰键必须处于按下状态。换句话说，只有在按住 ctrl 的情况下释放其它按键，才能触发 keyup.ctrl。而单单释放 ctrl 也不会触发事件。如果你想要这样的行为，请为 ctrl 换用 keyCode：keyup.17。

`.exact` 修饰符

2.5.0 新增

.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。

鼠标按钮修饰符

2.2.0 新增

.left
.right
.middle

这些修饰符会限制处理函数仅响应特定的鼠标按钮。

这个 .passive 修饰符尤其能够提升移动端的性能。

不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。请记住，.passive 会告诉浏览器你不想阻止事件的默认行为。

10. 美妙清单简单版

11. 表格案例（添加删除功能）




       
    表格案例

    
  
    
        编号: 

        商品名称 

        
    

    
        
            编号
            品牌名称
            创建时间
            操作
        
        
            {{item.no}}
            {{item.name}}
            {{item.time}}
             删除

编号	品牌名称	创建时间	操作
{{item.no}}	{{item.name}}	{{item.time}}	删除

12. 值类型与引用类型 (回顾)




       
    复习 值类型与引用类型

2--vue事件处理

1. 事件绑定

3. vue中的this指向

4. 表单绑定

v-model

表单修饰符

{{msg}}

我的性别:{{sex}}

我的学历:{{level}}

5. 简易计算器

计算器-2（自动）

6. 修饰符--事件修饰符

7. 表单绑定修饰符

{{v1}}

8. vue事件绑定的修饰符

9. 按键修饰符

按键码

系统修饰键

`.exact` 修饰符

鼠标按钮修饰符

10. 美妙清单简单版

美妙清单

11. 表格案例（添加删除功能）

12. 值类型与引用类型 (回顾)

你可能感兴趣的:(2--vue事件处理)

2--vue事件处理

1. 事件绑定

3. vue中的this指向

4. 表单绑定

v-model

表单修饰符

{{msg}}

我的性别:{{sex}}

我的学历:{{level}}

5. 简易计算器

计算器-2（自动）

6. 修饰符--事件修饰符

7. 表单绑定修饰符

{{v1}}

8. vue事件绑定的修饰符

9. 按键修饰符

按键码

系统修饰键

.exact 修饰符

鼠标按钮修饰符

10. 美妙清单简单版

美妙清单

11. 表格案例（添加删除功能）

12. 值类型与引用类型 (回顾)

你可能感兴趣的:(2--vue事件处理)

`.exact` 修饰符