VUE简介
- Vue:渐进式javaScript框架
- 第一个Vue程序:显示hello world
<body>
<div id="app">
{{message}}
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
message: "hello world"
}
})
</script>
指令
v-cloak 解决表达式存在“闪动”的问题,原理是先隐藏,内存中替换好值后在显示值
- 用法:
<style>
[v-cloak] {
display: none;
}
</style>
<div v-cloak>{{message}}</div>
v-text:填充纯文本
v-html:填充HTML片段
v-pre:填充原始信息,调过编译过程,直接显示{{message}}
<div id="app" v-pre>
{{message}}
</div>
v-once:只编译一次,使用场景为那些不需要修改的内容,可以提高性能
v-model:双向数据绑定
v-on:事件绑定,简写为@,传递事件对象格式是固定的:@click=“handle("普通参数",$event)”