1.插值表达式和v-text
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="app">
<div>{{msg}}</div>
<!--v-text会覆盖元素中原本的内容-->
<div v-text="msg">---</div>
</div>
</body>
<script src="vue.min.js"></script>
<script>
new Vue({
el:'#app',
data:{
msg:'欢迎学习Vue',
}
});
</script>
</html>2.v-cloak
v-cloak能够解决插值表达式的闪烁问题。比如在下面的例子中，在网速比较慢时，页面会先显示---{{message}}+++，网络请求成功之后才将{{message}}替换。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app">
<!--v-colok能够解决插值表达式的闪烁问题-->
<p v-cloak>---{{ message }}+++</p>
<!--v-text默认没有闪烁问题-->
<h4 v-text="message">===</h4>
</div>
</body>
<script src="vue.min.js"></script>
<script>
new Vue({
el:'#app',
data:{
message:'Vue是最流行的前端技术',
}
});
</script>
</html>3.v-html
v-html指令用来将一段html文本显示在页面上。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app">
<div v-html="message">===</div>
</div>
</body>
<script src="vue.min.js"></script>
<script>
new Vue({
el:'#app',
data:{
message:'<h2>Vue是最流行的前端技术</h2>',
}
});
</script>
</html>如下图：
4.v-bind
Vue提供的属性绑定机制，缩写是：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="app">
<!--v-bind中可以写合法的表达式-->
<button type="button" v-bind:title="myTitle+'123'">按钮</button>
<!--v-bind 缩写是：-->
<button type="button" :title="myTitle+'123'">按钮2</button>
</div>
</body>
<script src="vue.min.js"></script>
<script>
new Vue({
el:'#app',
data:{
myTitle:'这是一个自定义的title'
}
});
</script>
</html>
5.v-on
Vue提供的事件绑定机制，缩写是@
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="app">
<!--v-on 缩写是@-->
<button type="button" v-on:click="show">按钮2</button>
<button type="button" @click="show">按钮3</button>
</div>
</body>
<script src="vue.min.js"></script>
<script>
new Vue({
el:'#app',
data:{
myTitle:'这是一个自定义的title'
},
//methods中实现v-on绑定的事件
methods:{
show:function(){
alert(5);
}
}
});
</script>
</html>