Vue常用系统指令

Posted mycblog

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue常用系统指令相关的知识,希望对你有一定的参考价值。

插值表达式

数据绑定最常见的形式,其中最常见的是使用插值表达式,写法是{{}} 中写表达式

例如:<span>Message: {{ msg }}</span>

注意:1.必须是一句话,必须是合法的js表达式(if else for switch都不能写)

         2.必须有返回值

 常用指令

v-cloak

 

解决插值表达式的闪烁问题,要和css样式结合使用

<style>
[v-cloak] { display: none }
</style>

<!-- 在span上加上 v-cloak和css样式控制以后,浏览器在加载的时候会先把span隐藏起来,知道 Vue实例化完毕以后,才会将v-cloak从span上移除,那么css就会失去作用而将span中的内容呈现给用户 -->
<span v-cloak>{{msg}}</span>

new Vue({
data:{
msg:‘hello ivan‘
}
})

 

v-text

 

用来替换标签的文本内容(会把原标签的内容完全替换,不识别html)

<!-- v-text可以将一段文本渲染到指定的元素中,例如: -->
<div v-text="msg"></div>
new Vue({
data:{
msg:‘hello world‘
}
});

<!-- 输出结果:-->
<div>hello world</div>

 

v-html:

 

用来替换标签的网页内容(会把原标签的内容完全替换)

<div v-html="rawHtml"></div>
new Vue({
data:{
rawHtml:‘<h1>hello world</h1>‘
}
})

 

 

v-bind:

 

可以给标签绑定属性,属性的值需要是一个变量/值类型,默认情况下,v-bind可以省略

1、img的src从imageSrc变量中取得
<img v-bind:src="imageSrc" >

2、从classA, classB两个变量的值作为class的值,
结果是:<div class="A B">classA, classB</div>
<div v-bind:class="[classA, classB]">classA, classB</div>

3、isRed变量如果为true,则class的值为red,否则没有
<div v-bind:class="{ red: isRed }">isred</div>

4、div的class属性值一定有classA变量的值,而是否有classB和classC变量的值取决于isB和isC是否为true,二者一一对应
<div v-bind:class="[classA, { classB: isB, classC: isC }]">数组对象</div>

5、变量加常量
<div v-bind:style="{ fontSize: size + ‘px‘ }">size22</div>

6、变量加常量的另一种写法
<img v-bind="{src:imageSrc+‘?v=1.0‘}" >

7、对象数组
<div v-bind:style="[styleObjectA, styleObjectB]">styleObjectA, styleObjectB</div>

 

缩写形式
<img :src="imageSrc">
<div :class="[classA, classB]">classA, classB</div>
<div v-bind:class="{ red: isRed }">isred</div>
<div v-bind:class="[classA, { classB: isB, classC: isC }]">数组对象</div>
<div v-bind:style="{ fontSize: size + ‘px‘ }">size22</div>
<img v-bind="{src:imageSrc+‘?v=1.0‘}" >
<div v-bind:style="[styleObjectA, styleObjectB]">styleObjectA, styleObjectB</div>


vue对象初始化
<script>
// 实例化vue对象(MVVM中的View Model)
new Vue({
// vm控制的区块为id为app的div,此div中的所有vue指令均可以被vm解析
el:‘#app‘,
data:{
// 数据 (MVVM中的Model)
imageSrc:‘http://157.122.54.189:8998/vue/vuebase/chapter1/imgs/d1-11.png‘,
isRed:true,
classA:‘A‘,
classB:‘B‘,
isB:true,
isC:true,
size:22,
styleObjectA:{color:‘red‘},
styleObjectB:{fontSize:‘30px‘}
},
methods:{

}
})
</script>

 

v-on

1、作用:可以给标签绑定事件我们可以给事件入参$event对象,然后在事件中就可以获取到当前绑定事件的元素了v-on和v-bind一样,v-on默认也可以省略

2、常用事件:
v-on:click
v-on:keydown
v-on:keyup
v-on:mousedown
v-on:mouseover
v-on:submit
....

3、示例:
<!-- 方法处理器 -->
<button v-on:click="doThis"></button>
<!-- 内联语句 -->
<button v-on:click="doThat(‘hello‘, $event)"></button>

<!-- 阻止默认行为,没有表达式 -->
<form v-on:submit.prevent></form>

5、v-on的缩写形式:可以使用@替代 v-on:
<button @click="doThis"></button>


6、按键修饰符
触发像keydown这样的按键事件时,可以使用按键修饰符指定按下特殊的键后才触发事件

写法:
<input type="text" @keydown.enter="kd1"> 当按下回车键时才触发kd1事件

由于回车键对应的keyCode是13,也可以使用如下替代
<input type="text" @keydown.13="kd1"> 当按下回车键时才触发kd1事件

但是如果需要按下字母a(对应的keyCode=65)才触发kd1事件,有两种写法:
1、由于默认不支持a这个按键修饰符,需要Vue.config.keyCodes.a = 65 添加一个对应,所以这种写法为:

Vue.config.keyCodes.a = 65
<input type="text" @keydown.a="kd1"> 这样即可触发

2、也可以之间加上a对应的数字65作为按键修饰符
<input type="text" @keydown.65="kd1"> 这样即可触发

键盘上对应的每个按键可以通过 http://keycode.info/ 获取到当前按下键所对应的数字

 

v-on按键修饰符

在监听键盘事件时,我们经常需要监测常见的键值。 Vue 允许为 v-on 在监听键盘事件时添加按键修饰符:
.enter
.tab
.delete (捕获 “删除” 和 “退格” 键)
.esc
.space
.up
.down
.left
.right

 

v-for

 

item in Array
(item, index) in Array
value in Object
(value, key, index) in Object

:key属性具有唯一性,不能重复,它能够唯一标识数组的每一项
将来数据中的某一项的值发生了改变,则v-for只会更新当前项对应的这个dom元素的值,而不是更新整个数据,从而提高效率,参考https://www.zhihu.com/question/61064119/answer/183717717

注意:以下变动不会触发视图更新
1. 通过索引给数组设置新值
2. 通过length改变数组
解决:
1. Vue.set(arr, index, newValue)
2. arr.splice(index, 1, newValue)

<ul>
<li v-for="item in user">{{item.name}}</li>
<li v-for="(item, index) in user" :key="index">{{index}}.{{item.name}}</li>
<li>---------------华丽的分割线---------------</li>
<li v-for="value in boss">{{value}}</li>
<li v-for="(value, key, index) in boss"> {{index}}.{{key}}:{{value}}</li>
</ul>
<script>
var vm = new Vue({
el: ‘#app‘,
data: {
user: [
{name: ‘jack‘},
{name: ‘neil‘},
{name: ‘rose‘}
],
boss: {
name: ‘马云‘,
age: 50,
money: 1000000002030
}
}
})
</script>

v-if

1、作用:根据表达式的值的真假条件来决定是否渲染元素,如果条件为false不渲染(达到隐藏元素的目的),为true则渲染。在切换时元素及它的数据绑定被销毁并重建

2、示例:
<!-- Handlebars 模板 -->
{{#if isShow}}
<h1>Yes</h1>
{{/if}}

通常我们使用写法居多:
<h1 v-if="isShow">Yes</h1>

也可以用 v-else 添加一个 “else” 块:
<h1 v-if="isShow">Yes</h1>
<h1 v-else>No</h1>

注意:v-else 元素必须紧跟在 v-if 元素否则它不能被识别。

new Vue({
data:{
isShow:true
}
});

v-show

1、根据表达式的真假值,切换元素的 display CSS 属性,如果为false,则在元素上添加 display:none来隐藏元素,否则移除display:none实现显示元素

2、示例:
<h1 v-show="isShow">Yes</h1>

new Vue({
data:{
isShow:true
}
});

3、v-if和v-show的总结:
v-if和v-show 都能够实现对一个元素的隐藏和显示操作,但是v-if是将这个元素添加或者移除到dom中,而v-show
是在这个元素上添加 style="display:none"和移除它来控制元素的显示和隐藏的

v-model

1、在表单控件或者组件上创建双向绑定
2、v-model仅能在如下元素中使用:
input
select
textarea
components(Vue中的组件)

3、举例:
<input type="text" v-model="uname" />

new Vue({
data:{
uname:‘‘ //这个属性值和input元素的值相互一一对应,二者任何一个的改变都会联动的改变对方
}
})

 

 

 

 

以上是关于Vue常用系统指令的主要内容,如果未能解决你的问题,请参考以下文章

vue常用14个指令

Vue 常用的指令

Vue.js的常用指令

Vue.js的常用指令

07-利用Vue指令做一个简单的学生信息管理系统

vue-常用指令&条件渲染&列表渲染