vue-cloak 的学习
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue.js"></script>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app">
<!--使用v-cloak 能够解决插值表达式闪烁问题-->
<p v-cloak>{{ msg }}</p>
<!-- 默认v-text是没有闪烁问题的-->
<!-- v-cloak会覆盖元素中原本的内容,但是插值表达式 只会替换自己这个占位符,不会吧整个元素的内容清空-->
<h4 v-text="msg"></h4>
<div v-html="msg2">{{msg2}}</div>
<!-- v-bind 是Vue中,提供的用于绑定属性的命令-->
<!-- v-bind命令可以被简写成 : 要绑定的属性-->
<!-- v-bind中可以写合法的js表达式-->
<!-- vue中提供了v-on: 事件绑定机制 缩写是@-->
<!--<input type="button" value="按钮" v-bind:title="mytitle+'123'" id="btn">-->
<!--点击事件click-->
<!--<input type="button" value="按钮" v-on:click='show'>-->
<!-- 鼠标触发事件mouseover-->
<input type="button" value="按钮" v-on:mouseover='show'>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg:'123',
msg2:'<h1>我爱你!</h1>',
mytitle:'这是一个自己定义的title'
},
methods :{ //这个methods属性中定义了当前vue示例所有可用的方法
show:function(){
alert('Hello')
}
}
})
// 不用Vue操作dom的方法
/* document.getElementById('btn').onclick = function(){
alert('hell0');
}*/
</script>
</body>
</html>
1
671
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
