Vue常用指令及实例
常用指令
| 指令 | 作用 |
|---|---|
| v-model | 数据双向绑定，用于实现表单输入和应用状态数据绑定 |
| v-bind | 数据单向绑定，用于动态改变标签内的属性 ，可简写用：代替 |
| v-text | 用于更新标签包含的文本，它的作用跟双大括号{{}}效果是一样，当于innerText |
| v-on | 监听 DOM 事件，并在触发时运行一些 JavaScript 代码,通过v-on指令修饰click点击事件,可简写用@代替 |
| v-show | 前端样式块、元素在指令的表达式返回 true值的时候被渲染 ，不会重新进行DOM的删除和创建操作，只切换了元素的 display:none 样式 |
| v-if | 前端样式块、元素在指令的表达式返回 true值的时候被渲染 ，会重新进行DOM的删除和创建操作 |
| v-for | 相当于JS中的for in循环, 可以根据数据多次渲染元素 |
| v-else | 和v-if指令搭配使用，没有对应的值。当v-if的值false，v-else才会被渲染出来 |
| v-once | 界面不跟数据变化，只渲染一次 |
| v-cloak | 数据渲染后自动显示元素，可以解决插值表达式闪烁的问题 |
| v-html | 相当于innerHTML，绑定一些包含html代码的数据在视图上 |
应用实例
v-model及其修饰符：
v-model指令，可以实现表单元素和 Model 中数据的双向绑定，v-model 只能用在表单元素中。
<!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="vue.min.js"></script>
</head>
<body>
<div id="app">
<h3>v-model基本用法</h3>
<input type="text" v-model="msg">
<!-- HTML默认再多空格也只显示一个空格,因此我们在输入框中输入很多空格再输入内容时，下面显示的也看不出来空格-->
<p>{{msg}}</p>
<!-- 被包围在 pre 元素中的文本通常会保留空格和换行符。 这时在输入框中输入很多空格再输入内容时，空格都显示-->
<pre><p>{{msg}}</p></pre>
<h3>v-model修饰符</h3>
<h4>v-model.lazy</h4>
<p>只有在input输入框发生一个blur事件（失去焦点）时才触发，enter键也可以让输入框失去焦点</p>
<input type="text" v-model.lazy="msg1">
<p>{{msg1}}</p>
<h4>v-model.trim</h4>
<p>将用户输入的前后的空格去掉</p>
<input type="text" v-model.trim="msg2">
<p>{{msg2}}</p>
<h4>v-model.number</h4>
<p>默认输入的数字是字符串类型的;使用v-model.number，当输入数字时，将字符串转换成number类型</p>
<input type="text" v-model.number="msg3">
<p>{{msg3}}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: '数据双向绑定',
msg1: '.lazy',
msg2: '.trim',
msg3: '.number'
}
});
</script>
</body>
</html>
v-text:
<div id="app">
{{ message }}
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
v-if、v-else、v- else-if：
<div id="app">
<p v-if="score >= 80">优秀</p>
<p v-else-if="score >= 60">良好</p>
<p v-else>差</p>
</div>
<script>
let vue = new Vue({
el:"#app",
data:{//v-if从模型中获取数据
show:true,
hidden:false,
age:18,
score:60
}
});
</script>
v-if、v-show、v-bind（单向绑定）：
<div class="progress progress-striped" v-show="isShow">
<div class="progress-bar progress-bar-info" :style="{width:prc+'%'}">
<b class="font-light">{{prc}}%</b>
</div>
</div>
v-if和v-show区别？
- v-if: 只要取值为false就不会创建元素
- v-show: 哪怕取值为false也会创建元素,只是如果取值是false会设置元素的display为none。
所以: 如果企业开发中需要频繁切换元素显示隐藏, 那么推荐使用v-show, 否则使用v-if。
v-on：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<!--v-on: Vue中的事件绑定机制-->
<input type="button" value="按钮1" v-on:click="show"/>
<!-- v-on: 指令可以简写为 @要绑定的事件-->
<input type="button" value="按钮2" @click="show"/>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: '天天向上'
},
// methods属性中定义当前Vue实例中所有可用的方法
methods: {
show: function () {
alert('hello!');
}
}
});
</script>
</body>
</html>
v-for：
用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。
v-for循环的时候，key属性只能使用number或string类型，key使用时，必须使用v-bind属性绑定的形式，指定key的值。
在组件中，使用v-for循环的时候，或是在一些特殊情况下，如果v-for有问题，那么必须在使用的时候，指定唯一的 字符串或数字类型为key的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-for使用时绑定key值</title>
<script src="lib/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 指定每一项的key值为id的值 -->
<p v-for="item in list" :key="item.id">id: {{item.id}}===name: {{item.name}}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
list: [
{id: 1, name: 'name1'},
{id: 2, name: 'name2'},
{id: 3, name: 'name3'},
{id: 4, name: 'name4'},
{id: 5, name: 'name5'},
]
},
methods: {}
});
</script>
</body>
</html>
v-bind:
专门用于给"元素的属性"绑定数据。
格式一：v-bind:属性名称="绑定的数据"
<input type="text" v-bind:value="gender">
格式二：:属性名称="绑定的数据"
<input type="text" :value="name">
v-clock、v-html、v-text:
v-cloak 可以解决 v-text（ {{}} ）闪烁 的问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="app">
<p>{{msg}}</p>
<!--插值表达式只会替换自己的这个占位符，不会把整个元素的内容清空-->
<!-- v-cloak 可以解决 插值表达式闪烁 的问题-->
<p v-cloak>======{{msg}}======</p>
<!--默认v-text是没有闪烁问题的-->
<!--v-text会覆盖元素中原本的内容-->
<h2 v-text="msg">===========</h2>
<!--v-html输出带标签效果-->
<div v-text="msg2">=========</div>
<div v-html="msg2">=========</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: '好好学习',
msg2: '天天向上
'
}
})
</script>
</body>
</html>
链接: vue常用的指令实例
链接: Vue教程
END