Vue基础之v-cloak、v-text、v-html、v-bind、v-on的基本使用

标签：简化   问题   +++   事件绑定   ++   img   strong   作用   按钮   

1、使用 v-cloak 能够解决 插值表达式闪烁的问题

<style>
[v-cloak] {
}
</style>
<p v-cloak>++++++++ {{ msg }} ----------</p>

2、v-html的作用？

输出data中的html的内容的

<div v-html="msg2">1212112</div>

    var vm = new Vue({
      el: ‘#app‘,
      data: {
        msg2: ‘<h1>哈哈，我是一个大大的H1， 我大，我骄傲</h1>‘,
      },
    })

3、v-bind的作用？

用于绑定属性的指令：input type="button" value="按钮" v-bind:title="mytitle + ‘123‘"

v-bind: 指令可以被简写为 : 要绑定的属性

4、v-on的作用？

* 用于事件绑定机制：比如click，mouseover等：input type="button" value="按钮" :title="mytitle + ‘123‘" v-on:click="alert(‘hello‘)"

* 缩写是 @

5、Vue指令之v-bind的三种用法？

直接使用指令v-bind

使用简化指令 :

在绑定的时候，拼接绑定内容：:title="btnTitle + ‘ , 这是追加的内容 ‘  "

Vue基础之v-cloak、v-text、v-html、v-bind、v-on的基本使用

标签：简化   问题   +++   事件绑定   ++   img   strong   作用   按钮   

原文地址：https://www.cnblogs.com/JonaLin/p/12890638.html