vue（三）模板语法-JZTXT

{{}}

数据绑定最常见的形式就是使用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
        }
    }
}

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 适用于所有不同的输入类型，包括复选框、单选框和选择输入。

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