vue02 基础-模板语法

数据绑定

① {{普通文本/JS表达式}} => 在标签体中使用
② v-once => 一次性插值。数据改变后，插值处内容不会被改变。

<span v-once> 不会改变: {{ message }}</span> 

③ v-html => 渲染html数据，因为{{}}直接渲染html会直接输出一串字符。但是为了安全，v-html无法渲染<script>标签。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值。

<span v-html="htmlString"></span>

var vm = new Vue({
     el: '#app', 
     data: { 
        message: 'haha', 
        number: 1, //
        htmlString '<span style="color:red">红色字体内容</span>' 
      } 
}) 

④ v-bind 简写（:） =>Mustache 语法{{ }}不能作用在 HTML attribute 上，遇到这种情况应该使用v-bind指令

<!\--  红色字体是正常的  --> 
<img v-bind:src="imgUrl" > 
<!\-- 缩写 --> 
<img :src="imgUrl" alt="VueLogo">

*补充 alt属性的作用是：如果无法显示图像，浏览器将显示替代alt=" "中的文本

指令

参数

指令 (Directives) 是带有 v- 前缀的特殊 attribute。一些指令能够接收一个“参数”，在指令名称之后以冒号表示。例如，v-bind 指令可以用于响应式地更新 HTML attribute。
从 2.6.0 开始，可以用方括号括起来的 JavaScript 表达式作为一个指令的参数。可以使用动态参数为一个动态的事件名绑定处理函数。

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

在这个示例中，当 eventName 的值为 "focus" 时，v-on:[eventName] 将等价于 v-on:focus。动态参数预期会求出一个字符串，异常情况下值为 null。这个特殊的 null 值可以被显性地用于移除绑定。任何其它非字符串类型的值都将会触发一个警告。
★动态参数表达式有一些语法约束，因为某些字符，如空格和引号，放在 HTML attribute 名里是无效的。还需要避免使用大写字符来命名键名，因为浏览器会把 attribute 名全部强制转为小写。

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

修饰符

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

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

总结

对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。但是只能包含单个表达式。

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

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

v-bind 缩写 ： v-on缩写 @