Vue 模板的三种写法

Vue 模板共有三种写法：

直接写在html文件中（完整版写法）
写在js文件的template中（完整版写法）
写在vue文件中，使用loader转换（非完整版写法）

Vue指令

指令的意思是：指示/命令，在vue中，以v-开头的都是指令。

指令的一般结构为：v-指令名:参数=值

接下来我们了解一下啊Vue中的几个指令

v-text

写法：

<template>
  <section>
    <div v-text="obj.a"></div>
  </section>
</template>

<script>
  export default {
    data() {
      return {obj: {a: 1, b: 2}}
    }
  }
</script>

当然，一般情况下，我们都不会这么写，而是使用 {{}} 占位符

<template>
  <section>
    {{obj.a}}
  </section>
</template>

<script>
  export default {
    data() {
      return {obj: {a: 1, b: 2}}
    }
  }
</script>

在Vue中，如果 {{}} 或者 v-text 中的值为 null 或者 undefined ，则不会显示。

v-html

如果我们需要在模板(template)中显示富文本，那么就不能使用v-text，需要使用v-html。

<template>
  <section>
    <div v-html="obj.a"></div>
  </section>
</template>

<script>
  export default {
    data() {
      return {obj: {a: `<strong>hello</strong>`}}
    }
  }
</script>

v-pre

在某些特殊情况下，我们可能需要显示 {{n}}

那么就需要使用v-pre ，不对模板继续编译

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

绑定属性

绑定src

<template>
  <section>
    <img v-bind:src="x" />
    //可以简写为
    //<img :src="x" />
  </section>
</template>

<script>
  export default {
    data() {
      return {x: 'https://xxxx.png'}
    },
  }

绑定对象

<template>
  <section>
    <div v-bind:style="{border:'1px solid red'}" >
     //可以简写为
    //<div :style="{border:'1px solid red'}" >
      绑定属性——css
    </div>
  </section>
</template>

绑定事件

绑定事件有三种写法

//第一种写法
<button v-on:click='fn'> btn </button>
//若不需要传参，则直接写函数名即可,vue会自动帮你加括号调用

//第二种写法
<button v-on:click='fn(arg)'> btn </button>
//若需要传参，则要写括号

//第三种方法
<button v-on:click='表达式'> btn </button>
//这种方法可以直接在引号中写表达式
//不能写if else 但可以写问号冒号表达式

//简写
<button @click='fn'> btn </button>

上面的几种写法其实有一个问题，那就是如果函数返回的是另一个函数的话该怎么办？

如果出现这种情况，我们可以先将fn赋给变量x，在绑定监听事件x。

条件判断

使用条件判断时，不符合条件的元素不会出现在DOM树中

<div v-if="n%2 === 0 && n !== 0">
      n 是偶数 且n不为0 
</div>

<div v-else-if="n === 0 && n === 0">
      n 是0
</div>

<div v-else>
      n 是奇数
</div>

显示/隐藏

<div v-show="n % 2 === 0">{{n}}</div>

v-show 与 v-if 一些相似之处，但是v-show是改变display，而v-if是将决定是否将元素渲染到DOM中

循环语句

<template>
  <section>
    <ul>
      <li v-for=" (user,number) in users " :key="number">
        下标: {{number}}
        名字: {{user.name}}
      </li>
    </ul>


  </section>
</template>

<script>
  export default {
    data() {
      return {users: [{name: 'jack'}, {name: 'tom'}, {name: 'alice'}]}
    },
  }
</script>

注意点：:key 要具有唯一性，最好不要写index

v-cloak

在使用vue搭建的项目中，有一个问题，那就是如果用户的网络很慢，那么vue创建的实例在加载时会出现页面闪烁的情况，使用cloak可以解决这一问题。

v-cloal常常和display:none一起使用

<template>
  <section v-cloak>
    ..........................
  </section>
</template>

<style>
  [v-cloak] {
    display: none;
  }
</style>

v-once

v-once 表示组件/元素(包括所有子节点) 只被渲染一次，之后的重新渲染将被视为静态内容并被跳过，使用v-once有利于性能。

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

修饰符

在js中，我们常常需要使用 event.preventDefault() 和 event.stopPropagation() 等函数。

在vue中，我们依然可以通过methods来实现，但是，vue还提供了一种更简单的方法，那么就是修饰符。

下面，我来简单的介绍一下常见的几个修饰符

v-on 支持的修饰符

.keycode

<input  @keypress.13="fn" />
// 按下回车(回车keycode = 13)，执行fn

.keyAlias

在使用keycode时，我们还需要记得其ASCLL码，所以vue还提供了一种Alias方法，可以直接使用案件名

<input  @keypress.enter="fn" />
// 按下回车执行fn

.stop

.stop修饰符是用来阻止冒泡的

.prevent

.prevent修饰符是用来阻止默认事件的

v-bind 支持的修饰符

.sync

.sync 修饰符是一个语法糖功能，当我们需要在组件内部修改外部数据是可以用到它

在vue中，规定了组件内部是不能直接修改外部的数据的，所以，我们需要使用到订阅。

//parent中
<App2 :money="total" v-on:update:money="total = $event"/>
//监听事件，监听到事件后更新数据
//$event会获取$emit传过来的参数

//children中
<button @click="$emit('update:money',money - 100)">花钱</button>
//发布事件 update:useMoney 并给出数据
//$emit会触发一个事件，并传参

上面的代码略显复杂，每次修改就要手动发布订阅一次，所以，vue提供了.sync操作符来替代订阅事件

//parent中
<App2 :money.sync="total" />

//children中不变
<button @click="$emit('update:money',money - 100)">花钱</button>

浅析Vue中的模板、指令与修饰符

Vue 模板的三种写法

Vue指令

修饰符