v-cloak,v-text,v-html,v-on的基本使用
v-cloak:可解决 插值表达式闪烁的问题(还要在style样式表中设计display:none;)
v-text:默认 不闪烁 (但v-text会覆盖元素中原本的内容,)
v-html:使msg内容中的HTML标签具有意义,而不会显示出来
v-bind: 是 Vue中,提供的用于绑定属性的指令
指令可以被简写为 :要绑定的属性
可以写合法的JS表达式
v-on: 事件绑定机制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-cloak,v-text,v-html的基本使用</title>
<script src="../../jQuery库/vue-2.4.0.js"></script>
<style>
[v-cloak]{
display: none;
/* 隐藏 */
}
</style>
</head>
<!-- 使用 v-cloak 能够解决 插值表达式闪烁的问题 -->
<!-- 默认 v-text 是没有闪烁问题的 -->
<!-- v-text会覆盖元素中原本的内容,但是 插值表达式v-cloak 只会替换自己的这个占位符,不会把 整个元素的内容清空 -->
<body>
<div id="app">
<p v-cloak>+++{{ msg }}---</p>
<p v-text="msg"></p>
<p v-text="msg">======</p> <!-- 标签中间的值会被msg替换掉 -->
<p v-text="msg2"></p>
<p v-text="msg2"></p>
<p v-html="msg2"></p>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
msg:'123',
msg2:'<h2>我想输出带有HTML格式的纯文本</h2>'
}
})
</script>
</body>
</html>
输出结果:
+++123—
123
123
<‘h2>我想输出带有HTML格式的纯文本</h2’>
<’h2>我想输出带有HTML格式的纯文本</h2 ‘>
我想输出带有HTML格式的纯文本
其实v-on后面跟的不止是click事件也可以是其他的事件,用法均相似。比如:v-on:click/mouseout/mouseover/mousedown…