vue（三）模板语法

{{}}

数据绑定最常见的形式就是使用Mustache {{}}（双大括号）语法的文本插值

{{}} 还接受单个表达式，如加减运算、三元运算等。

一般配合js中的data()设置数据

<span>Message: {{msg}} </span>

export default {
    name:"tom",
    data(){
        return{
            msg:"消息提示" //msg为 <span> 中的变量
        }
    }
}

v-html

Mustache(双大括号会)将数据解释为普通文本，而非html代码，使用v-html指令输出为真正的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>"
        }
    }
}

v-bind

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 对象值，对应的是 HTML 元素的 style 属性

<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
​
// 直接绑定一个样式对象
<div :style="styleObject"></div>
//绑定一个包含多个样式对象的数组
<div :style="[baseStyles, overridingStyles]"></div>

v-if、v-show

• v-if指令用于条件性的渲染一块内容，这块内容只会在指令的表达式为true的时候被渲染.

使用 v-else 表达v-if的else块

<span v-if="flag">为true</span>
<span v-else>为false</span>

export default {
  data(){
    return{
      flag:false
    }
  }
}

• v-show 也可以用于条件性的展示元素

<span v-show="flag">为true</span>

• v-if和v-show的区别：

  • v-if是“真正”的条件渲染，它会确保在切换过程中，条件块内的事件监听和子组件适当地被销毁和重建。

  • v-if也是惰性的，如果初始渲染时条件为假，则什么也不做，一直到条件第一次变为真时，才会开始渲染条件块。

  • v-show不管初始条件是什么，元素总是会被渲染，只是简单的基于CSS进行切换。

v-if有更高的切换开销，如果在运行时条件很少改变，用v-if

v-show有更高的初始渲染开销，如果需要频繁的切换，用v-show

v-for

v-for指令基于一个数组来渲染一个列表，v-for需要使用item in items的特殊语法（类似for...in），items是源数组。

<span v-for="p in person">{{p.name}}</span>

export default {
  data(){
    return{
      person:[{id:100,name:"tom"}]
    }
  }
}

为了节省性能，每次渲染只渲染新增数据，存量数据不做渲染，使用:key指定每条数据的唯一标识。

<span v-for="p in person" :key="p.id">{{p.name}}</span>

v-on

v-on（通常简写为@）来监听DOM事件，并在触发事件时执行一些js，用法为：

v-on:click="methodName" (或@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)
      }
  }
}

event modifiers

Vue 有一个特殊的语法叫做 event modifiers 可以在我们的模板中为我们处理这个问题。修饰符被附加到事件的末尾，带有一个点，如下所示：@event.modifier。以下是事件修饰符列表：

• .stop：停止传播事件。等效于常规 JavaScript 事件中的 Event.stopPropagation()。阻止事件冒泡

• .prevent：阻止事件的默认行为。等效于 Event.preventDefault()。

• .self：仅当事件是从该确切元素分派时触发处理程序。

• {.key}：仅通过指定键触发事件处理程序。 MDN 有一个有效键值列表; 多词键只需转换为 kebab 大小写（例如 page-down）。

• .native：监听组件根（最外层的包装）元素上的原生事件。

• .once：监听事件，直到它被触发一次，然后不再触发。

• .left：仅通过鼠标左键事件触发处理程序。

• .right：仅通过鼠标右键事件触发处理程序。

• .middle：仅通过鼠标中键事件触发处理程序。

• .passive：等效于在 JavaScript 中使用 addEventListener() 创建事件监听器时传入 { passive: true } 参数。

v-model

用v-model指令在表单<input>,<textarea>,<select>元素上创建双向数据绑定，将输入的内容同步给v-model设置的value上。v-model 适用于所有不同的输入类型，包括复选框、单选框和选择输入。

v-model 会忽略任何表单元素上初始的 value、checked 或 selected attribute。它将始终将当前绑定的 JavaScript 状态视为数据的正确来源。你应该在 JavaScript 中使用data 选项来声明该初始值。

<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 在幕后所做的。