一、指令基本分析
1、v-cloak 解决 插值表达式闪烁的问题
2、v-text=“变量名” 替换文本
3、v-html=“变量名” 解析html代码
4、v-model =“变量名” 实现双向数据绑定
二、案例详解
在 VM 实例中，如果要访问 data 上的数据，或者要访问 methods 中的方法， 必须带 this
<style> [v-cloak] { display: none; } </style> <body> <div id="aa"> <!-- 使用 v-cloak 能够解决 插值表达式闪烁的问题，当网络的反应速度过慢时，页面会先弹出{{msg}}，再转换为值, 添加一个样式：[v-block]{ display:none; } 解决该问题 --> <!-- 插值表达式 只会替换自己的这个占位符，不会把 整个元素的内容清空 --> <div v-cloak> 0000-0--明天去哪里呀</div> <!-- 默认 v-text 是没有闪烁问题的，但是她在调用的时候会替换原div的内容 --> <div v-text="msg">eeeeeeeee</div> <!-- v-html 是可以把代码转换为样式输出，他在调用的时候也会替换原div的内容 --> <div v-html="msg2"></div> </div> </body> <script src="vue-2.4.0.js"></script> <script> var abc = new Vue({ el: "#aa", data: { msg: "你好", msg2: "<h1>我是一个h1</h1>" } }) </script>
三、v-bind指令
v-bind: 是 Vue中，提供的用于绑定属性的指令，在代码中运行示例如下：
<!-- v-bind的缩写是一个：符号，如：<input type="button" value="提交" :title="title+ '123'"> ---->
< div id="aa"> <!-- 通过数据渲染拿到title中的值，运用vue.js方法。 --> <input type="button" value="提交" v-bind:title="title"> <!-- v-bind 中，可以写合法的JS表达式 示例如下：--> <!-- <input type="button" value="提交" v-bind:title="title+ '123'"> --> </div> </body> <script src="vue-2.4.0.js"></script> <script> var abc = new Vue({ el: "#aa", data: { msg: "你好", msg2: "<h1>我是一个h1</h1>", title: "title显示效果" </script>
四、v-on绑定事件，当被点击时调用一个方法。
<!-- v-on的缩写是一个@符号 如：<input type="button" value="按钮" @click="show"> -->
<div>
<input type="button" value="提交" v-on:click="show">
</div>
<script src="vue-2.4.0.js"></script> <script> var abc = new Vue({ el: "#aa", data: { msg: "你好", msg2: "<h1>我是一个h1</h1>", title: "title显示效果" }, methods:{ // 这个 methods属性中定义了当前Vue实例所有可用的方法 show:function(){ alert("你好"); } } }) </script>
五、v-model双向数据绑定
v-model 指令，可以实现 表单元素和 Model 中数据的双向数据绑定
注意： v-model 只能运用在 表单元素中
input(radio, text, address, email....) select checkbox textarea
<body>
<div id="aa">
<h3>{{ msg }}</h3>
<input type="text" v-model="msg">
</div>
</body>
</html>
<script src="vue-2.4.0.js"></script>
<script>
var vm = new Vue({
el:"#aa",
data:{
msg:'这是一个双向绑定数据'
},
methods:{
}
})
</script>