Vue_Day1

模板语法

插值

1. 文本

   1. 数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：

   <span>Message: {{ msg }}</span>
   //只要data中的msg发生变化，{{msg}}就会动态的发生变化
   

   2. 通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定：

   <span v-once>这个将不会改变: {{ msg }}</span>
   

2. {{}}会直接将数据值翻译成字符串，要想翻译成html，就应该使用v-html指令，它会将所在的html标签的所有内容用我们自定义的html内容代替

   1. <label>{{message}}</label>
      data: {
           message:'<span style="color: red"> 我是被翻译成了html哦</span>',
      }
      

      结果：

   2. <label v-html="message">{{message}}</label>
      data: {
           message:'<span style="color: red"> 我是被翻译成了html哦</span>',
      }
      

      结果：

   3. 想一想：1. 会不会有什么问题（XSS攻击）2. 可不可以这样子来进行组件服复用

3. 绑定属性

   1. 由于绑定属性不能使用{{}}来实现，所以我们应该使用v-bind指令来实现

      <div v-bind:id="dynamicId"></div
      

      这个id会和属性dynamicId动态绑定，id的值就等于属性dynamicId的值

4. 高级插值（使用javascript表达式）

   1. 例如：

      {{ number + 1 }}
      
      {{ ok ? 'YES' : 'NO' }}
      
      {{ message.split('').reverse().join('') }}
      
      <div v-bind:id="'list-' + id"></div>
      

      注意：

      1. 这里面的JavaScript表达式只能是单个表达式，如果是多个表达式是不会生效的

      {{ var a = 1 }}    //不会生效
      

      2. 模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如 Math 和 Date 。你不应该在模板表达式中试图访问用户定义的全局变量。

指令

指令的作用：

指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

1. 参数

   1. 一个指令可以接受一个参数，在指令后用:参数名称的形式表示

      ​ 例如：

      <a v-bind:href="url">...</a>      //href就是v-bind指令带着的一个参数，与后面的url动态绑定
      <a v-on:click="doSomething">...</a>    //click就是v-on绑定的一个参数，与后面的doSomething动态绑定
      

   2. 动态参数：前面的参数都是指定了要绑定的属性或者事件名称都是固定了的，例如上面的例子中这两的绑定的参数就是href和click，如果我们要可以动态的更换的话就可以使用动态参数

      <a v-bind:[attributeName]="url"> ... </a>
      <!--可以用方括号括起来的 JavaScript 表达式作为一个指令的参数：-->
      <!--这里的 attributeName 会被作为一个 JavaScript 表达式进行动态求值，求得的值将会作为最终的参数来使用。例如，如果你的 Vue 实例有一个 data property attributeName，其值为 "href"，那么这个绑定将等价于 v-bind:href。-->
      <a v-on:[eventName]="doSomething"> ... </a>
      <!--在这个示例中，当 eventName 的值为 "focus" 时，v-on:[eventName] 将等价于 v-on:focus-->
      

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

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

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

      在 DOM 中使用模板时 (直接在一个 HTML 文件里撰写模板)，还需要避免使用大写字符来命名键名，因为浏览器会把 attribute 名全部强制转为小写：

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

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

缩写

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>

它们看起来可能与普通的 HTML 略有不同，但 : 与 @ 对于 attribute 名来说都是合法字符，在所有支持 Vue 的浏览器都能被正确地解析。而且，它们不会出现在最终渲染的标记中。缩写语法是完全可选的，但随着你更深入地了解它们的作用，你会庆幸拥有它们。