vue模板、指令与修饰符

Vue模板语法

1. Vue完整版，写在HTML里

   <div id="xxx">
       {{n}}
       <button @click="add">+1</button>
   </div>

new Vue({
    el: '#xxx',
    data: {
        n: 0
    },
    methods: {
        add(){
            this.n += 1
        }
    }
})

2. Vue完整版，写在选项里

   <div id="app"></div>
   
   new Vue({
       data: {
           n: 0
       },
       template: `
           <div>
               {{ n }}
               <button @click="add">+1</button>
           </div>
       `,
       methods: {
           add(){
               this.n += 1
           }
       }
   }).$mount('#app')

3. Vue非完整版，配合xxx.vue文件

   -- .vue文件 --
   <template>  // template标签里不是html而是xml（xml必须是闭合标签）
       <div>
           {{n}}
           <button @click="add">+1</button>
       </div>
   </template>
   
   <script>
       export default {
           data(){  <!--- vue组件里的data必须是函数 -->
               return {n: 0}
           },
           methods: {
               add() {
                   this.n += 1
               }
           }
       }
   </script>

-- main.js文件 --
import Xxx from './xxx.vue'  // Xxx是一个导出的options对象，一般规定首字母大写

new Vue({
    render: h => h(Xxx)
}).$mount('#app')

---

模板里有哪些语法

我们把html模板叫做template

一、展示内容：

1. 表达式

• 该表达式意为 把构造选项里data的 object.a 显示到HTML里
• NaN 可以写任何运算
• 可以调用函数，会在methods里找
• 若值为 null、undefined 就不显示

2. html内容

• 假设 data.x 值为 hi ，默认显示的时候就是 hi
• 若想展示粗体的 hi ，使用

3. 单纯想展示

<div v-pre> {{ n }} </div>

• v-pre 不会对模板进行编译，就只是单纯展示字符

二、绑定属性：

<!--绑定src-->
<img v-bind:src="xxx" />
<!--缩写-->
<img :src="xxx" />

<!--绑定对象-->
<div :style="{ border: '1px solid red', height: 100}"></div>

三、绑定事件：

v-on:事件名

<button v-on:click="add">+1</button>  <!-- 点击后 运行add()-->
<button v-on:click="xxx(1)">xxx</button>  <!-- 点击后运行xxx(1)-->
<button v-on:click="n+=1">yyy</button>  <!--- 点击后运行 n+=1 -->
<!-- 即发现函数就加括号调用它，否则将直接运行代码 -->
<!--缩写-->
<button @click="add">+1</button>

四、条件判断：什么时候出现在DOM数中

if…else

<div v-if="x>0"> 若x大于0，显示这个div </div>
<div v-else-if="x === 0"> x为0 </div>
<div v-else> x小于0 </div>

for循环

for(value,key) in 数组或对象

<!--数组例子-->
<ul>
    <li v-for="(u,index) in users" :key="index"></li>
    <!-- 将users里的每一项以u和index代替，u表示数组里的值value，index表示下标
    使用时: 索引: {{ index }}、值: {{ u.name }} -->
</ul>

<!-- 对象例子 -->
<ul>
    <li v-for="(value,name) in obj" :key="name"></li>
    <!-- 一般来说使用了v-for，就必须有一个:key=""，且key须用一个不会重复的值 -->
</ul>

显示、隐藏：

<div v-show="n%2 === 0"> n为偶数 </div>
<!-- 若v-show里的条件满足则展示这个div，下面与上面的写法等价 -->
<div :style="{ display: n%2 === 0 ? 'block' : 'none' }"> n为偶数 </div>

---

指令Directive

什么是指令

<!--以 v- 开头的就是指令-->
<div v-text="x"></div>
<div v-html="x"></div>

语法

• v-指令名:参数=值，如 v-on:click=’add’
• 如果值里没有特殊字符，则可以不加引号
• 有些指令没有参数和值，如 v-pre
• 有些指令没有值，如 v-on:click.prevent 阻止默认事件
  google

---

修饰符

一些指令支持修饰符

• @click.stop=”add” 阻止事件传播/冒泡
• @click.prevent=”add” 阻止默认动作
• @click.stop.prevent=”add” 既阻止事件传播，也阻止默认动作

  new Vue({
      data:{
          n:0
      },
      template:`
      <div>
          {{n}}
          <a @click.prevent="x" href="https://google.com">google</a>
          <input @input="y"/>
          <input @keypress="z" />
          <button @click=add>+1</button>
      </div>
      `,
      methods:{
          add(){
              this.n += 1
          },
          x(){
              console.log('xxx')
          },
          y(e){
              console.log(e.target.value)
          },
          z(e){
              if(e.keyCode === 13)
              console.log('用户打了回车')
          }
      }
  }).$mount("#app")

上述例子用修饰符的简单写法

new Vue({
    template:`
        <input @keypress.13 === "y" /> 
        <input @keypress.enter === "y" />
    `,
    methods:{
        y(e){
            console.log('用户打了回车')
        }
    }
// keyCode很难记，比如 13是回车，1是49，所以使用 alias别名，如 @keypress.enter
})

具体可参考官方文档：

https://cn.vuejs.org/v2/guide/events.html?#%E6%8C%89%E9%94%AE%E4%BF%AE%E9%A5%B0%E7%AC%A6

有多少修饰符呢？

• v-on 支持的有 .{keyCode | keyAlias} .stop .prevent .capture(在捕获阶段监听) .self .once（只会触发一次的事件） .passive .native
• 快捷键相关 .ctrl .alt .shift .meta .exact
• 鼠标相关 .left .right .middle
• v-bind 支持的有 .prop .camel .sync
• v-model 支持的有 .lazy .number .trim

Vue需要重点了解的修饰符

@click.stop=”xxx” 阻止事件冒泡

• 由于冒泡机制，给元素绑定点击事件的时候，也会触发父级元素的绑定事件

  <div @click="shout(2)">
      <button @click="shout(1)">ok</button>
  </div>
  
  shout(e){
      console.log(e)
  }
  
  // 1
  // 2

• @click.stop 可以阻止事件冒泡，相当于调用了 event.stopPropagation()

  <div @click="shout(2)">
      <button @click.stop="shout(1)">ok</button>
  </div>
  // 只输出1

@click.prevent=”xxx” 阻止默认事件

• @click.prevent用于阻止默认事件，相当于写 event.preventDefault()

  <a @click.prevent href="https://google.com">google</a>
  //  点击链接不会跳转

.sync 修饰符

场景描述:

• 爸爸给儿子钱，儿子要花钱怎么办？ 儿子打电话(触发事件)，向爸爸要钱

Vue规则:

• 组件不能修改 props 外部数据
• this.$emit 可以触发事件，并传参
• $event 可以获取 $emit 传来的参数

// 父组件 App.vue
<template>
    <div class="app">
        App.vue 我现在有 {{total}}
        <hr>
        <Child :money="total" v-on:update:money="total = $event"/>
        // 等价于 <Child :money.sync="total" />
    </div>
</template>

<script>
    import Child from './Child.vue'
    export default {
        data(){
            return {total:10000}
        },
        components: {Child}
    };
</script>

<style>
    .app{
        border: 3px solid red;
        padding: 10px;
    }
</style>

// 子组件Child.vue
<template>
    <div class="child">
        {{money}}
        <button @click="$emit('update:money',money - 100)">
            <span>花钱</span>
        </button>
    </div>
</template>

<script>
    export default {
        props:["money"]
    }
</script>

<style>
    .child {
        border:3px solid green
    }
</style>

<button @click="$emit('update:money', money - 100)"></button>
第一步： 儿子用 $emit 触发'update:money'事件，并传入参数 'money - 100', 告诉父亲钱还剩 money - 100

<Child :money="total" v-on:update:money="total = $event"/>
第二步： 父亲用 v-on:'update:money' 绑定事件，监听 update:money, 并用 $event 获取参数

由于这样的代码场景非常常见，为了简化，便有了语法糖 .sync
<Child :money.sync="total" /> 等价于 <Child :money="total" v-on:update:money="total = $event"/>