vue

✍️ Tangxt ⏳ 2020-07-17 🏷️ 模板、指令、修饰符

05-模板、指令与修饰符

文档：模板语法 — Vue.js

★模板

  1. Vue 完整版，写在HTML里
  2. Vue 完整版，写在template选项里
  3. Vue 非完整版，配合 xxx.vue 文件，即写在xxx.vue里边的template -> data必须为函数 -> 使用需要render:h => h(Xxx)

★内容展示

1）插值

2）`v-text` & `v-html`

<div v-text="表达式"></div> -> 这也是展示内容的 -> 等价于 <div>🟡🟡表达式🟡🟡</div>

v-text

<div v-html="msg"></div> -> 可以把msg的内容渲染成html

v-html

3）如果想展示`🟡🟡n🟡🟡`？

v-pre不会对模板进行编译

v-pre

★指令

什么是指令？

以 v- 开头的属性就是指令 -> 指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM

其语法是怎样的？

v-指令名[:参数]=值，如v-if="xxx"、v-bind:href="url"、v-on:click="doSomething"

注意，2.6.0版本：

参数可以动态的，如v-on:[eventName]="doSomething"，eventName可以是click、focus等值，说白了eventName是个变量哈（值类型是字符串）！ -> 如果不是字符串值，那就是null值，而且是null值的话，那么意味着这个指令的绑定是无效的！即等于没写一样！

参数的取值，如果是表达式的话，请不要有空格或引号，如v-bind:['foo' + bar]，当然你也可以用计算属性替代复杂的表达式！

浏览器会把 attribute 名全部强制转为小写，请不要用大写字符来命名属性名，如someAttr -> someattr

动态参数的缩写（2.6.0+）：<a :[key]="url"> ... </a>、<a @[event]="doSomething"> ... </a>

指令的取值？

单个 JavaScript 表达式 (v-for 是例外情况）

1）绑定属性

  1. v-bind:src="xxx" -> 简写 :src="xxx"
  2. <div :style="{border:'1px solid red',height:'100px'}">hi</div> -> 注意，样式值得是字符串值哈，不然，「编译模板就会出错」 -> 对了，如果你把:style的值替换成变量，是不起效的！总之，我们这么写，是在为元素添加行内样式

Tips：

在绑定class或style属性时，支持其它类型的值，如数组或对象

如：

<!-- class绑定 -->
<div :class="{red:ture}"></div>
<div :class="[classA, classB]"></div>

<!-- style 绑定 -->
<div :style="{color:ture}">111</div>
<div :style="[styleObjectA, styleObjectB]"></div>

2）绑定事件

3）条件判断

条件判断

4）循环

使用v-for就必须要在后面加上:key，否则会一直出现警告

5）显示 & 隐藏

v-show

相较于v-if，v-show的元素并咩有从DOM树中移出，而v-if则是从DOM树中移出了，意味着元素被销毁了！

根据表达式真假值，切换元素的display CSS属性

6）其它指令

➹：API — Vue.js

★修饰符

1）是什么？

修饰符 (modifier) 是以半角英文句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定

如：.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()

<form v-on:submit.prevent="onSubmit">...</form>

相当于是给onSubmit方法里边插入了一段特殊的万金油代码！

语法：

v-指令名:参数.modifier=值 -> 如v-on:click.prevent

2）事件修饰符

@click.stop="add" //表示阻止事件传播/冒泡
@click.prevent="add" //表示阻止默认动作
@click.stop.prevent="add" //修饰符可以串联，同时表示两种意思
@click.once="doThis"  // 点击事件将只会触发一次

3）按键修饰符

<input @keyup.13 = "submit"> // 按下enter键执行该函数
  
为了在必要的情况下支持旧浏览器，Vue提供了绝大多数常用的按键码的别名

.enter (回车)
.tab (Tab)
.delete (delete(删除)/BackSpace(退格))
.space  (空格键)
.up (上箭头)
.down (下箭头)
.left (左箭头)
.right (右箭头)

4）一共有多少修饰符？

5）理解vue中的`.sync`修饰符

1、概述

在使用vue的过程中，我们有时会遇到如下场景：子组件需要引用父组件的一个属性，并且修改。由于vue是不允许对外部的数据直接修改的，所以便需要在两个组件之间建立一个通信，让父组件去监听子组件发出的请求，然后再对相应的值做出改变。

2、用法

  1. 我们首先需要在子组件上面，建立一个事件，然后写上事件名和变化的值
  2. vue内置了EventBus为$emit，可以用来触发事件
this.$emit("update:money",money-100)
  1. 然后在父组件上面监听这个事件的触发，将变化的值传回来
  2. 同时vue将子组件改变的那个值，存进了$event这个内置变量中，这样父组件中就能获取到这个值
v-on:update:money="total=$event"
  1. vue又将监听的部分写集成.sync修饰符，这样看起来更加的简洁，于是上面这一行代码也可以简写为如下形式：
:money.sync="total"

3、示例

<!DOCTYPE html>
<html lang="zh-Hans">

<head>
  <meta charset="utf-8">
  <title>index2</title>
  <style>
    .green {
      border: 3px solid lightgreen;
    }

    .red {
      border: 3px solid lightcoral;
      padding: 30px;
    }
  </style>
</head>

<body>
  <div class="red">
    Father 还有🟡🟡total🟡🟡
    <child :money="total" v-on:update:money="fn"></child>
    <!-- v-on:update:money="fn" <=> v-on:update:money="total=$event" -->
    <!-- 上面 v-on:update:money="fn" 等价于 :money.sync="total" -->

    <child :money.sync="total"></child>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    Vue.component('child', {
      template: `
        <div class="green">
        <button @click="$emit('update:money',money-100)">花钱</button>
        <span>🟡🟡money🟡🟡</span>
      </div>
      `,
      props: ["money"]
    })

    let vm = new Vue({
      el: '.red',
      data() {
        return {
          total: 10000
        };
      },
      methods: {
        fn(event) {
          // event 是子组件传递过来的值，天生就存在
          console.log(event)
          this.total = event;
        }
      }
    })
  </script>
</body>

</html>

效果：

测试用法

运行过程是：

click 「btn」(花钱) -> 触发「update:money」事件 -> 通知父组件 -> 父组件监听了「update:money」事件，执行fn方法，fn的第一个参数值就是money-100，改变父组件的total的状态为money-100 -> 更新子组件的money -> 完成花钱动作

这是一个完整的发布订阅模式

注意：这是先更新了在父组件这个区域内，写在子组件上的:money，然后再去更新子组件里边的money，也就是说total计算完后，子组件的money才确定有多少钱！

所以：

vue 修饰符sync的功能是：当一个子组件需要改变了一个 prop 的值时，会通知其父组件进行同步的修改。

Vue 发明了一种修饰符 .sync （可以封装监听事件的操作） -> 本质来说 .sync 其实是一个 语法糖

关于 $event ，为啥有$，以防data旗下有个event属性！

Tips：

  1. 组件不能修改 props 外部数据
  2. $emit 可以触发事件，并传参
  3. $event 可以获取到 $emit 传入的参数

★了解更多

➹：Vue全解 - 上帝之兵的文章 - 知乎

➹：42.vue全解(模板、指令与修饰符) - 掘金

➹：自定义事件 — Vue.js

➹：Vue 的语法糖 .sync修饰符 - 知乎

➹：深入理解 Vue 的 .sync 修饰符 - 知乎

➹：Vue的.sync修饰符 - 知乎

➹：Vue 解析：.sync 修饰符

➹：《.sync 修饰符用法》 - 知乎

★总结