1.简介
Vue.js使用基于HTML的模板语法，可以将DOM绑定到Vue实例中的数据 模板就是{{}}，用来进行数据绑定，显示在页面中 也称为Mustache语法(双大括号)。
2. 数据绑定的方式
a.双向绑定
v-model
b.单向绑定
方式1：使用双大括号，可能会出现闪烁的问题，可以使用v-cloak来解决
用法： 这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
示例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="../css/mui.min.css" rel="stylesheet" />
<style>
/* 必须配置css样式，否则不生效 */
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div class="mui-content" id="content">
<h3>解决双大括号闪烁的问题:
<span v-cloak>{{msg}}</span>
</h3>
</div>
<script src="../js/vue.js"></script>
<script src="../js/mui.min.js"></script>
<script type="text/javascript">
mui.init();
var vm=new Vue({
el:"#content",
data:{
msg:"利用v-cloak指令，需配置css样式"
},
created:function(){
//这个是vue生命周期里开始创建的方法
alert("延时一下，看闪烁效果");
}
})
</script>
</body>
</html>
方式2：使用v-text,v-html
3. 其他指令
- v-once 只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
<!-- 单个元素 -->
<span v-once>This will never change: {{msg}}</span>
<!-- 有子元素 -->
<div v-once>
<h1>comment</h1>
<p>{{msg}}</p>
</div>
<!-- 组件 -->
<my-component v-once :comment="msg"></my-component>
<!-- `v-for` 指令-->
<ul>
<li v-for="i in list" v-once>{{i}}</li>
</ul>
- v-pre 跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。
<span v-pre>{{ this will not be compiled }}</span>