VUE模板语法二

1、事件修饰符与按键修饰符

1.事件修饰符

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

为了解决这个问题，Vue为v-on提供了事件修饰符。修饰符是由点开头的指令后缀来表示的。看看都有哪些修饰符：

.stop：调用event.stopProgagation()，阻止冒泡事件。

.prevent：调用event.preventDefault()，阻止默认事件。

.capture：捕获冒泡，即有冒泡发生时，有该修饰符的dom元素会先执行，如果有多个，从外到内依次执行，然后再按自然顺序执行触发的事件。

.self：将事件绑定到自身，只有自身才能触发，通常用于避免冒泡事件的影响。

.once：事件只能触发一次，比如只能单击按钮一次。

.passive：执行默认方法。一般用在滚动监听比如：@scoll，@touchmove，@mousemove等事件，因为在滚动监听过程中，移动每个像素都会产生一次事件，每次都使用内核线程查询prevent会使滑动卡顿。我们通过passive将内核线程查询跳过，可以大大提升滚动的流畅度。

.left：按鼠标左键时触发。

.right：按鼠标右键时触发。

.middle：按鼠标中间键时触发。

注：passive和prevent冲突，不能同时绑定在一个监听器上。

<!-- 添加事件监听器时使用事件捕获模式 -->

<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->

<div @click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->

<!-- 即事件不是从内部元素触发的 -->

<div @click.self="doThat">...</div>

<!--会阻止所有单击-->

<div @click.prevent.self="doThis">...</div>

<!--只会阻止对元素自身的单击-->

<div @click.self.prevent="doThis">...</div>

按键修饰符

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

.enter：enter键

.tab：tab键

.delete：(捕获“删除”和“退格”按键) 删除键

.esc：取消键

.space：空格键

.up：上

.down：下

.left：左

.right：右

系统修饰符

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

.ctrl：ctrl键

.alt：alt键

.shift：shift键

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

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

alt+c = alt.67

3、css样式的多种用法

操作HTML元素的class列表和内联样式是数据绑定的一个常见需求。所以Vue可以用v-bind处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将v-bind用于class和style时，Vue 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

1.对象语法

<div :class="{active:true}">class样式</div>

也可以在对象中传入更多字段来动态切换多个 class。此外，v-bind:class 指令也可以与普通的class属性共存。代码示例如下：

<div :class="{active:true,’my-box’:isBox}">class样式</div>

绑定对象

绑定的数据对象不必内联定义在模板里，在data方法里面定义一个对象也可以。代码如下：

<div :class="objClass">class样式</div>
data(){
          return {
                objClass:{
                    active:true,
                    'my-box':true
                }
            }
     }

我们也可以在这里绑定一个返回对象的computed计算属性。这是一个常用且强大的模式，代码如下：
<div :class="objClass">class样式</div>
data(){
    return {
        isActive:true,
        isBox:true
    }
}
computed:{
    objClass(){
        return {
            active:this.isActive,
            'my-box':this.isBox
        }
    }
}

数组语法

v-bind:class除了可以传递对象外，还可以传递一个数组，代码如下：
<div :class="[activeClass,myBox]">class样式</div>
data(){
      return {
           activeClass:'active',
           myBox:'my-box'
          }
 }

三元运算符

如果你也想根据条件切换列表中的 class，可以用三元表达式，代码如下：       <div :class="[isActive?activeClass:'',myBox]">class样式</div>
data(){
         return {
                activeClass:'active',  
                myBox:'my-box',
       isActive:true
           }
  }

4、内联Style

使用v-bind:style可以给元素绑定内联样式，不过在实际开发中尽量避免内联样式的出现，内联样式不便于维护。
1.对象语法
v-bind:style的对象语法十分直观，看着非常像CSS，但其实是一个JavaScript对象。CSS属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名，代码示例如下：
<div :style="{width:'100px',height:'100px',fontSize:'14px','background-color':'#FF0000'}">style样式</div>

内联样式直接用对象字面量的方式设置，可读性较差，直接绑定到一个样式对象通常更好，这会让模板更清晰，代码如下：
<div :style="styleObj">style样式</div>
data(){
           return {
                  styleObj:{
                          width:"100px",
                          height:"100px",
                          fontSize:'14px',
                          "background-color":"#FF0000"
                     }
            }
}
2.数组语法

<div :style="[styleObj,borderObj]">style样式</div>
data(){
        return {
                styleObj:{
                      width:"100px",
                      height:"100px",
                      fontSize:'14px',
                      "background-color":"#FF0000"
                },
              borderObj:{
                      border:'1px solid #0000FF'
                }
            }
        }

5、v-model表单输入绑定

v-model指令在表单<input>、<textarea>及<select>元素上创建双向数据绑定。
它会根据控件类型自动选取正确的方法来更新元素。
尽管有些神奇，但v-model本质上不过是语法糖。
它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

注意：对于需要使用输入法 (如中文、日文、韩文等) 的语言，你会发现 v-model 不会在输入法组合文字过程中得到更新。如果你也想处理这个过程，请使用input事件。
在文本中使用，代码如下：
<div id="app" v-cloak>
      <input type="text" v-model="msg" />{{msg}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.min.js"></script>
<script>
    new Vue({
        el:"#app",
            data(){
                return {
                  msg:""
                }
          }
    })
</script>

多行文本里使用

在多行文本里使用，代码如下：
<div id="app" v-cloak>
    <textarea v-model="msg"></textarea>
    {{msg}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.min.js"></script>
<script>
  new Vue({
  el:"#app",
  data(){
  return {
  msg:""
  }
  }
  })
</script>

在单个复选框中使用

在单个复选框中使用，代码如下：

<div id="app" v-cloak>

      <input type="checkbox" id="checkbox" v-model="checked">

      <label for="checkbox">{{ checked }}</label>

</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.min.js"></script>
<script>
      new Vue({
          el:"#app",
          data(){
              return {
                  checked:false
              }
          }
      })
</script>

两种监听方式

多个复选框中使用

<div id="app" v-cloak>
      <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
      <label for="jack">Jack</label>
      <input type="checkbox" id="john" value="John" v-model="checkedNames">
      <label for="john">John</label>
      <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
      <label for="mike">Mike</label>
      <br>
      <span>Checked names: {{ checkedNames }}</span>
</div>
<script>
      new Vue({
          el:"#app",
          data(){
              return {
                  checkedNames:[]
              }
          }
      })
</script>