vue常用标签简单运用
v-cloak:防止页面加载时，出现vue.js的变量名
用法：
<div v-cloak>
{{ message }}
</div>
CSS
[v-cloak] {
display: none!important;
}
！important:能够覆盖样式原本的权重，增加指定的样式的权重
v-bind:属性=”js语句”，将元素节点属性的特性和变量名保持一致
1、v-bind可以简写为一个‘’：”
如：
代码：
<body>
<div id="app">
<h2 :title="msg"></h2>
<p >{{msg}}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data:{
msg:'养老院智能服务系统'
}
})
</script>
</body>
运行结果：
v-text=””可以与{{}}替换使用
1、v-text没有vue因网速过慢导致加载的问题
2、{{}}前后可以加值，而v-text会覆盖元素中原来的内容
3、{{}}和v-text不能识别html语言,需要使用html
代码：
<body>
<div id="app">
<h2 v-text="msg"></h2>
<p >{{msg}}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data:{
msg:'养老院智能服务系统'
}
})
</script>
</body>运行结果：
v-html指令添加html元素
代码：
<body>
<div id="app">
<h2 v-html="msg"></h2>
<p >{{msg}}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data:{
msg:'<h2 style="color: maroon">养老院智能服务系统</h2>'
}
})
</script>
</body>
运行结果：
v-on:绑定事件
常用事件：click/mouseover/mouseup/
代码：
<body>
<div id="app">
<h2 v-html="msg"></h2>
<input type="button" value="点击报名" id="submit" v-on:click="result">
</div>
<script>
var vm = new Vue({
el: '#app',
data:{
msg:'<h2 style="color: maroon">养老院智能服务系统</h2>'
},
methods:{
result:function(){
alert('报名成功')
}
}
})
</script>
</body>
运行结果：