Vue.js常用指令
vue的指令写在HTML结构里面 同一个数据可以使用多次
在一个标签内同时写两个相同的指令则前面的生效
如果不同且都是插值操作那么后边的那个指令生效(<p v-text="msg" v-html="html"></p>)
v-text : 在页面中插值（文本,HTML标签会被转义，作为文本插入）和 {{}}一样效果
v-html : 在页面中插值（会将HTML标签插入）谨慎使用！
v-show : 当该值为true时表示显示，当值为false时 不显示 只是通过添加 display 来控制元素显示/隐藏
v-if : v-if和v-show表现相同，但原理不同 当if判断为false直接将dom移除，相反如果判断为true则将dom插入到结构中。
v-else :紧跟在v-if或者v-show后边，否则将不被识别。
v-else-if :表示多次，在v-if和v-else中间。
v-for :表示循环遍历。
v-on:绑定一个事件监听器,即我们说的事件绑定。
v-bind:用于绑定 html 属性。
v-pre:跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。
v-model:一般用于表单里面，双向绑定。
v-cloak : 这个指令用的比较少,一般是用来防止刷新页面出现闪烁。
v-once : 会将用户插入的值只渲染一次 渲染一次后，该插值操作将和对应数据解绑。
<!DOCTYPE html>
<html lang="en">
<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>vue指令</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<h3>{{msg}}</h3>
<hr>
<p v-text="msg"></p>
<hr>
<p v-html="msg"></p>
<hr>
<p v-text="msg" v-html="html"></p>
<hr>
<p v-text="msg" v-show="show"></p>
<hr>
<p v-text="msg" v-if="show"></p>
<!-- 循环数组 通过span显示 -->
<!-- 当改变数组内容时，页面上也会跟着改变 -->
<span v-for="value in arr">{{value}}</span>
<!--遍历对象 拿到值(value) 键 (key) -->
<li v-for="(v,k) in arr">{{v}}======={{k}}</li>
</div>
<script>
var app=new Vue({
el:"#app",
data:{
msg:"你好!",
html:"<em>你好</em>",
show:false,
arr:[1,2,3,4]
}
})
</script>
</body>
</html>
使用 v-cloak 要特别注意：因为该指令需要配合样式(style) 才可以生效,如下所示:
<style type="text/css">
[v-cloak]{
/* 使用v-cloak一定要配合该样式使用才能生效 */
display: none;
}
</style>
<body>
<div id="app">
<p v-cloak>{{msg}}</p>
<p v-cloak>{{msg}}</p>
<p v-cloak>{{msg}}</p>
</div>
<script src="./js/vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
msg:"v-cloak使用方法",
}
})
</script>
</body>
使用v-bind绑定相关HTML属性或dom属性 如果想要给HTML添加相关属性 属性值是data中的数据, 如果有修饰符要这样写：v-bind:属性名.修饰符="属性值" 我们可以看下下面的代码：
<!DOCTYPE html>
<html lang="en">
<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="./js/vue.js"></script>
<style type="text/css">
.aa {
color: #f00;
font-size: 20px;
background: blueviolet;
}
.bb {
background-color: #ccc;
}
</style>
</head>
<body>
<div id="app">
<!-- v-bind: 属性绑定-->
<span v-bind:title="message">鼠标悬停几秒钟查看此处动态绑定的提示信息！</span>
<a v-bind:href="baidu">百度一下</a>
<!-- 绑定css类 引用单个clss -->
<div :class="aa">aa </div>
<!-- 绑定css类 引用多个clss -->
<div :class="[aa,bb]">aabb</div>
</div>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
message: 'hello Vue',
baidu:"https://baidu.com"
}
})
</script>
</body>
</html>
在浏览器的运行效果如下：
image.png
v-on:click：该指令在Vue里面是用来绑定事件函数的，我们在项目中也可以简写成：@click="事件函数名"
<body>
<div id="app">
<p>{{message}}</p>
<button v-on:click="reverseMessage">反转字符串</button>
<button @click="action">简写的事件</button>
</div>
<script type="text/javascript">
var app=new Vue({
el:"#app",
data:{
message:"hello Vue",
name:"myname",
},
methods: {
reverseMessage: function () {
//实现将 message的值反转 this代表当前data下面的对象
this.message = this.message.split('').reverse().join('')
},
action:function(){
this.name="hisname"
}
}
})
</script>
</body>
在浏览器的运行效果如下：
image.png
