Vue.js 模板语法

2022-04-21
javascript vue3.0

Vue.js主要使用了基于HTML的模板语法，允许开发者声明式的将DOM绑定至底层的Vue实例数据，由于Vue.js基于HTML模板语法，所以所编写的自然而然能被浏览器所解析（除了远古浏览器）。

插值

插值(interpolation) 在数学领域中表示了一个有限的数值函数其中自变量的值，而在 Vue 中可以表示在元素中所使用的自变量，根据这些子变量可以通过双向绑定来实现其最终效果。

Mustache

Mustache(小胡子) 是一个模板系统(template system)，支持了如 C++、Java、JavaScript、PHP、Python 等众多主流语言。

Available in Ruby, JavaScript, Python, Erlang, Elixir, PHP, Perl, Raku, Objective-C, Java, C#/.NET, Android, C++, CFEngine, Go, Lua, ooc, ActionScript, ColdFusion, Scala, Clojure[Script], Clojure, Fantom, CoffeeScript, D, Haskell, XQuery, ASP, Io, Dart, Haxe, Delphi, Racket, Rust, OCaml, Swift, Bash, Julia, R, Crystal, Common Lisp, Nim, Pharo, Tcl, C, ABAP, Elm, Kotlin, and for SQL

Works great with TextMate, Vim, Emacs, Coda, and Atom

他也被描述为 “无逻辑” 系统，因为缺少任何明确的控制流语句，这主要取决与他是一个大量使用的符号 “**{}**” ，类似与一个横向的小胡子因此而得名。

Vue 为此支持了这种方法，Mustache 标签将会替代对应组件中的属性值，但无论如何绑定组件上的属性发生了改变，所以插值处还是会被更新。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <script src="https://unpkg.com/vue@next"></script></head>
<body>
<div id="app">
    <span>{{message}}</span>
</div>
<script>
    var App = {
        data() {
            return {
                message: 'hey,world!'
            }
        }
    }
    Vue.createApp(App).mount("#app")
</script>
</body>
</html>

v-once

为此、Vue 还提供了 v-once 指令，该指令类似于 Object.freeze() 阻止修改的方法，但主要作用就是只渲染元素和组件一次，随后元素/组件及其子节点将会被视为静态内容并跳过：

Vue 渐进式主要体现在其文档中，通常 Vue 文档写一个实例会出现你认知以外的方法，因此你需要阅读之后的文档在折回来学习目前的实例才可理解

<div id="app">
    <p v-once>{{message}}</p>
    <input type="button" value="upgrate message" v-on:click="message ='hey,v-on'"/>
</div>
<script>
    var App = {
        data() {
            return {
                message: 'hey,world!'
            }
        }
    }
    Vue.createApp(App).mount("#app")
</script>

上述的例子中，主要通过使用 v-once 来阻止 v-on 指令来进行修改，从而整个 v-on 事件失败。

v-html

需要注意的是，Mustache 将会被 Vue 解析为普通的文本，并不是正常的 HTML 代码，因此如果需要输出 HTML 则需要使用 v-html 指令

<div id="app">
    <p>{{message}}</p>
    <p v-html="message">{{message}}</p>
</div>
<script>
    var App = {
        data() {
            return {
                message: '<h1>Hello,world!</h1>'
            }
        }
    }
    Vue.createApp(App).mount("#app")
</script>

JavaScript 表达式

需要注意的是虽然在 Vue 模板中使绑定的一直都是属性插值，但实际上对于所有的数据绑定(Data Bigings) 都完全的支持了 JavaScript 表达式：

<div id="app">
    <p>{{'This is ' + message}}</p>
    <p>{{gender ? '我是女孩！' : '我不是女孩'}}</p>
</div>
<script>
    var App = {
        data() {
            return {
                message: 'Hello,world!',
                gender: false
            }
        }
    }
    Vue.createApp(App).mount("#app")
</script>

但在 Mustache 的限制下每个绑定的都只能包含单个表达式，所以向类似与 Lareavel 那种 Mustache 是不会生效的，如：

1	{{ if (ok) { return message } }}

Attribute

属性(Attribute) 语法是一个在元素层级之下，通常被指令包含在其中的都会被称之为 Attribute。

v-bind

v-bind 是一个富有很多 Attribute 的指令之一，他最为常用的就是 src\class\style 三种，并支持使用 : 作为简写。

<style type="text/css">
    .logo-size {
        width: 3em;
    }
    .logo-layout {
        border: 1px solid #e3e3e3;
    }
</style>
<div id="app">
    <p>{{message}}</p>
    <img v-bind:src="logo" :class="[logo_size,logo_layout]"/>
    <img :src="title" :style="{ width: title_size + 'em' }"/>
    <a :href="home">to Jiangxue Team Home</a>
</div>
<script>
    var App = {
        data() {
            return {
                message: 'Hello,world!',
                logo: 'logo: 'https://gitee.com/analysis-of-river-snow/drawing-bed/raw/master/20210918011632.png',
                title: 'https://gitee.com/analysis-of-river-snow/drawing-bed/raw/master/20210918002526.png',
                logo_size: 'logo-size',
                logo_layout: 'logo-layout',
                title_size: '5'，
                home: 'https://www.jiangxue.team/'
            }
        }
    }
    Vue.createApp(App).mount("#app")
</script>

需要注意的是 DOM 模板 v-bind property 支持陀峰命名

当元素上是指一个绑定的时候 Vue 将会默认通过 in 操作检测元素是否有一个被定义的属性的 key，如果属性被定义了则个值也就被设置为一个 DOM Propetry 而不是单纯的 Attribute。

指令

指令(Directives) 指的是 Vue 中带有 v- 前缀的特殊 Attribute，指令是预期的单个 JavaScript 表达式。主要的作用是当表达式的值发生改变的时候，同样会响应式的作用与 DOM 。

通常指令的 attribute 预期值是单个的 JavaScript 表达式，但 v-for 和 v-on 是特殊的情况

v-if

指令的 DOM 传递可直接通过 v-if 来根据表达式 Attribute 的值来决定是否出现这个元素。

<div id="app">
    <p>{{'This is ' + message}}</p>
    <p v-if="gender">This is true</p>
</div>
<script>
    var App = {
        data() {
            return {
                message: 'Hello,world!',
                gender: true
            }
        }
    }
    Vue.createApp(App).mount("#app")
</script>

参数

参数通常在指令的冒号之后表示(:)，在 Vue 中最为常用到参数的指令就是 v-bind ，如下述 code 中的 :href 就是一个参数

<div id="app">
    <p>{{'This is ' + message}}</p>
    <a :href="home">to Jiangxue Team Home</a>
</div>
<script>
    var App = {
        data() {
            return {
                message: 'Hello,world!',
                home: 'https://www.jiangxue.team/'
            }
        }
    }
    Vue.createApp(App).mount("#app")
</script>

修饰符

修饰符(Access modifiers) 是一个面向对象语言中的关键字，用于设置类或方法和其他成员的可访问性，在 Vue 中主要使用到修饰符的指令是 v-on

v-on

v-on 的缩写为 @，其参数为 event即监听对应的事件是否被触发，这主要用法就是绑定事件监听器，事件的类型都由修饰符进行指定。

ID	DA	FA
click.stop	调用 event.stopPropagation()	阻止捕获和冒泡阶段中当前事件的进一步传播
click.prevent	调用 event.preventDefault()	阻止默认的点击事件执行
.capture	添加事件侦听器时使用capture(捕获) 模式
.self	只当事件从侦听器绑定元素本身触发时才进行回调
```.{keyCode	keyAlias}```	只当事件从特定键触发时才进行回调
.once	只触发一次回调
.left	只当点击鼠标左键时触发
.right	只当鼠标点击右键时触发
.middle	当鼠标中键时触发
.passive	以 { passive: true } 模式添加侦听器

我们主要以 prevent 为例，监听其 submit 元素是否被触发，并组织默认的单击事件执行：

<div id="app">
    <form v-on:click.prevent="doThis">
        <a :href="home">{{message}}</a>
    </form>
</div>
<script>
    var App = {
        data() {
            return {
                message: 'Go Jiangxue Team',
                home: 'https://www.jiangxue.team/'
            }
        }
    }
    Vue.createApp(App).mount("#app")
</script>

或者通过 v-on 的简写 @ 来实现没有表达式的阻止默认行为：

<div id="app">
    <form @click.prevent>
        <a :href="home">{{message}}</a>
    </form>
</div>
<script>
    var App = {
        data() {
            return {
                message: 'Go Jiangxue Team',
                home: 'https://www.jiangxue.team/'
            }
        }
    }
    Vue.createApp(App).mount("#app")
</script>

可参考下 Vue 官方文档中所提供的实例：

<!-- 方法处理器 -->
<button v-on:click="doThis"></button>

<!-- 动态事件 -->
<button v-on:[event]="doThis"></button>

<!-- 内联语句 -->
<button v-on:click="doThat('hello', $event)"></button>

<!-- 缩写 -->
<button @click="doThis"></button>

<!-- 动态事件缩写 -->
<button @[event]="doThis"></button>

<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>

<!-- 阻止默认行为 -->
<form @submit.prevent></form>	/ <form @click.prevent></form>

<!-- 阻止默认行为，没有表达式 -->
<form @click.prevent></form>

<!-- 串联修饰符 -->
<button @click.stop.prevent="doThis"></button>

<!-- 键修饰符，键别名 -->
<input @keyup.enter="onEnter" />

<!-- 点击回调只会触发一次 -->
<button v-on:click.once="doThis"></button>

<!-- 对象语法 -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>

⬅️ Go back