重走vue之模块语法

模块语法

概述：vue使用了基于HTML的模板语法，允许开发者声明式地将DOM绑定至底层Vue实例的数据。所有 Vue的模板都是合法的 HTML，所以能被遵循规范的浏览器和HTML解析器解析。

在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组 件，并把 DOM 操作次数减到最少。

插值

文本

使用“Mustache”语法 (双大括号) 进行文本插值
实例：<span>Message: {{ msg }}</span>
在上述代码中Mustache 标签将会被替代为对应数据对象上 msg property 的值。无论何时，绑定的数据对象上 msg property 发生了改变，插值处的内容都会更新。

通过使用 v-once 指令，可以执行一次性地插值，当数据改变时，插值处的内容不会更新。
实例： <span v-once>这个将不会改变: {{ msg }}</span>

原始html

双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令：

<div v-html="htmlStr">

</div>
<script></script>
new Vue({
            el: "#app",
            data: {
                msg: 'hello',
                htmlStr: '<span>123</span>'
            },
)}

Attribute

Mustache 语法不能作用在 HTML attribute 上，遇到这种情况应该使用 v-bind 指令：
<div v-bind:id="dynamicId"></div>

注意点:对于布尔 attribute (它们只要存在就意味着值为 true)，v-bind 工作起来略有不同，在这个例子中：

如果 isButtonDisabled 的值是 null、undefined 或 false，则 disabled attribute 甚至不会被包含在渲染出来的 <button>元素中

使用 JavaScript 表达式

对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id"></div>

这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。

<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}

<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}

指令

指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute的值预期是单个 JavaScript 表达式

指令的作用:当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM

<p v-if="seen">现在你看到我了</p>
这里，v-if 指令将根据表达式 seen 的值的真假来插入/移除 <p>元素。

参数

一些指令能够接收一个“参数”，在指令名称之后以冒号表示。例如，v-bind 指令可以用于响应式地更新 HTML attribute：

<a v-bind:href="url">...</a>

在这里 href 是参数，告知 v-bind 指令将该元素的 hrefattribute 与表达式 url 的值绑定

另一个例子是 v-on 指令，它用于监听 DOM 事件：

<a v-on:click="doSomething">...</a>

在这里参数是监听的事件名

动态参数

可以用方括号括起来的 JavaScript 表达式作为一个指令的参数：

<!--
注意，参数表达式的写法存在一些约束
-->
<a v-bind:[attributeName]="url"> ... </a>

这里的attributeName会被作为一个 JavaScript 表达式进行动态求值，求得的值将会作为最终的参数来使用。例如，如果你的 Vue 实例有一个 data property attributeName，其值为 "href"，那么这个绑定将等价于 v-bind:href。
同样地，你可以使用动态参数为一个动态的事件名绑定处理函数：

<a v-on:[eventName]="doSomething"> ... </a>

在这个示例中，当 eventName 的值为 “focus” 时，v-on:[eventName]将等价于 v-on:focus。

对动态参数的约束

动态参数预期会求出一个字符串，异常情况下值为 null。这个特殊的 null 值可以被显性地用于移除绑定。任何其它非字符串类型的值都将会触发一个警告。

1. 动态参数表达式有一些语法约束，因为某些字符，如空格和引号，放在 HTML attribute 名里是无效的。

<!-- 这会触发一个编译警告 -->
<a v-bind:['foo' + bar]="value"> ... </a>

变通的办法是使用没有空格或引号的表达式，或用计算属性替代这种复杂表达式.

2. 在 DOM 中使用模板时 (直接在一个 HTML 文件里撰写模板)，还需要避免使用大写字符来命名键名，因为浏览器会把 attribute 名全部强制转为小写（微信小程序也会出现这样的情况）：

!--
在 DOM 中使用模板时这段代码会被转换为 `v-bind:[someattr]`。
除非在实例中有一个名为“someattr”的 property，否则代码不会工作。
-->
<a v-bind:[someAttr]="value"> ... </a>

修饰符

修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

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

缩写

v-bind 缩写

<!-- 完整语法 -->
<a v-bind:href="url">...</a>

<!-- 缩写 -->
<a :href="url">...</a>

<!-- 动态参数的缩写 (2.6.0+) -->
<a :[key]="url"> ... </a>

v-on 缩写

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>

<!-- 缩写 -->
<a @click="doSomething">...</a>

<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>

条件渲染

v-if

<h1 v-if="exp">Vue is awesome!</h1> 
<h1 v-else>Oh no</h1>

当exp返回true的时候h1的内容会被渲染，否则渲染v-else指令中的内容，v-if可以单独使用

v-show

<h1 v-show="ok">Hello!</h1>

v-show 只是简单地切换元素的CSS property display。如果需要非常频繁地切换，使用v-show 比较好
注意点：不推荐同时使用 v-if 和 v-for。当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。

列表渲染

用于将列表数据进行渲染。v-for 指令需要使用 item in items形式的特殊语法，其中 items 是源 数据数组，而 item 则是被迭代的数组元素的别名

<ul> <li v-for="item in items" :key="item.message"> {{ item.message }} </li> 
</ul> 
<!-- 当items为数组的时候，item为数组元素 -->
 <ul> 
     <li v-for=“(item,index) in items" :key="item.message"> {{ item.message }} 
 </li>
  </ul> index表示索引 
  <ul> 
    <li v-for= "(value,key,index) in obj" :key="value"> {{ value}} 
  </li> 
  </ul> 
  <!-- 当obj为对象的时候，value为属性值，key为属性名,index为索引 -->

key

Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做可以使 Vue 变得 非常快。但是有些时候，我们却不希望vue复用，这时候Vue 为你提供了一种方式来表达“这两个元 素是完全独立的，不要复用它们”。只需添加一个具有唯一值的 key

class绑定

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

<div v-bind:class="{ active: isActive }"></div>
<!-- 当isActive 为true，该div具有active这个class  -->
<div v-bind:class="[activeClass, errorClass]"></div> 
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

属性绑定

v-bind 指令可以用于响应式地更新 HTML attribute，v-bind指令名称之后以冒号表示要接受的参数

<a v-bind:href="url"></a>
 <!-- url为变量，表示将url变量的值动态赋值给a标签的href属性，注意，这里url在vue中是什么类型就传递给 href属性什么类型。 -->
<a :href="url"></a> 
<!-- 由于属性绑定在vue中使用概率较大，所以这里提供了简写形式 -->

style绑定

v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名

实例:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 测试样式 -->
        <div :style="styleObj">Hello</div>
        <!-- 冒号后面的style只能跟数组和对象 -->
        <div :style="{color: currentColor}">World</div>
        <div :style="[styleObj,styleObj2]">Hello World</div>

    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                currentColor: 'blue',
                msg: 'hello',
                styleObj: {
                    color: 'red',
                    "font-size": "30px"  //fontSize
                },
                styleObj2: {
                    "background-color": 'pink',
                    fontSize: "30px"  //fontSize
                }
            },
            methods: {

            }
        })
    </script>
</body>

</html>