vue（三）模板语法
数据绑定最常见的形式就是使用Mustache {{}}（双大括号）语法的文本插值
{{}} 还接受单个表达式，如加减运算、三元运算等。
一般配合js中的data()设置数据
<span>Message: {{msg}} </span>
export default {
name:"tom",
data(){
return{
msg:"消息提示" //msg为 <span> 中的变量
}
}
}
Mustache(双大括号会)将数据解释为普通文本，而非html代码，使用v-html
<p> {{rawHtml}} </p> //显示为原文本，不解释html代码 <a href='...>百度</a>
<p v-html="rawHtml"></p> //显示为 百度
export default {
data(){
return{
rawHtml:"<a href='http://www.baidu.com'> 百度 </a>"
}
}
}
Mustache语法不能在html属性中使用，可以使用v-bind设置HTML标签的属性，v-bind:可以简写成
<div v-bind:id="idvalue"></div> export default { data(){ return{ idvalue:100 } } }
<div v-bind:id="dynamicId"></div>
-
绑定多个值
data() {
return {
objectOfAttrs: {
id: 'container',
class: 'wrapper'
}
}
}
<div v-bind="objectOfAttrs"></div>
-
调用函数
<time :title="toTitleDate(date)">
</time>
-
动态参数
<!--
注意，参数表达式有一些约束，
参见下面“动态参数值的限制”与“动态参数语法的限制”章节的解释
-->
<a v-bind:[attributeName]="url"> ... </a>
<!-- 简写 -->
<a :[attributeName]="url"> ... </a>
动态参数值的限制：
1、动态参数中表达式的值应当是一个字符串，或者是 null。特殊值 null 意为显式移除该绑定。其他非字符串的值会触发警告。
动态参数语法的限制：
1、动态参数表达式因为某些字符的缘故有一些语法限制，比如空格和引号，在 HTML attribute 名称中都是不合法的
-
绑定css
可以给 :class (v-bind:class 的缩写) 传递一个对象来动态切换 class：
<div :class="{ active: isActive }"></div>
-
绑定数组
可以给 :class 绑定一个数组来渲染多个 CSS class
<div :class="[activeClass, errorClass]"></div>
-
绑定内联样式
:style 支持绑定 JavaScript 对象值，对应的是
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
// 直接绑定一个样式对象
<div :style="styleObject"></div>
//绑定一个包含多个样式对象的数组
<div :style="[baseStyles, overridingStyles]"></div>
-
v-if指令用于条件性的渲染一块内容，这块内容只会在指令的表达式为true的时候被渲染.
使用 v-else 表达v-if
<span v-if="flag">为true</span> <span v-else>为false</span> export default { data(){ return{ flag:false } } }
<span v-show="flag">为true</span>
-
-
v-if是“真正”的条件渲染，它会确保在切换过程中，条件块内的事件监听和子组件适当地被销毁和重建。 -
v-if也是惰性的，如果初始渲染时条件为假，则什么也不做，一直到条件第一次变为真时，才会开始渲染条件块。 -
v-show不管初始条件是什么，元素总是会被渲染，只是简单的基于CSS进行切换。
-
v-if有更高的切换开销，如果在运行时条件很少改变，用v-if
v-show有更高的初始渲染开销，如果需要频繁的切换，用
v-for指令基于一个数组来渲染一个列表，v-for需要使用item in items
<span v-for="p in person">{{p.name}}</span> export default { data(){ return{ person:[{id:100,name:"tom"}] } } }
<span v-for="p in person" :key="p.id">{{p.name}}</span>
v-on（通常简写为@）来监听DOM事件，并在触发事件时执行一些js，用法为：
v-on:click="methodName" (或@click="methodName"
<button @click="clickHandler"> 按钮1 </button> export default { data(){ return{ msg:"按钮1" } }, // 通过export methods导出函数 methods:{ clickHandler(){ this.msg="按钮2" // 通过this调用data()中的属性 }, handler(event){ //event 是原生的DOM event alert(event.target.tagName) } } }
Vue 有一个特殊的语法叫做 event modifiers 可以在我们的模板中为我们处理这个问题。修饰符被附加到事件的末尾，带有一个点，如下所示：@event.modifier。以下是事件修饰符列表：
-
.stop：停止传播事件。等效于常规 JavaScript 事件中的 -
.prevent：阻止事件的默认行为。等效于 -
.self：仅当事件是从该确切元素分派时触发处理程序。 -
{.key}：仅通过指定键触发事件处理程序。 -
.native：监听组件根（最外层的包装）元素上的原生事件。 -
.once：监听事件，直到它被触发一次，然后不再触发。 -
.left：仅通过鼠标左键事件触发处理程序。 -
.right：仅通过鼠标右键事件触发处理程序。 -
.middle：仅通过鼠标中键事件触发处理程序。 -
.passive：等效于在 JavaScript 中使用
用v-model指令在表单<input>,<textarea>,<select>元素上创建双向数据绑定，。v-model
<input type="text", v-model="msg"> //在输入框中双向绑定数据，获取输入框的内容 <p>{{msg}}<p> //文本随着上面输入框内容变化而变化，既可以设置也可以读取，即双向数据绑定 export default { data(){ return{ msg:"按钮1" } } }
-
.lazy：默认情况下，
v-model在每次input事件触发后将输入框的值与数据同步，可以添加.lazy修饰符从而转为在change事件（change事件为回车或失去焦点之后）之后进行同步
<input v-model.lazy="msg">
-
.trim：过滤用户输入的首尾空格，使用
.trim
备注： 你还可以通过事件和
v-bind属性的组合将数据与<input>值同步。事实上，这就是v-model
