最近这段时间不是很忙,多少想写点东西,思来想去,还是对平时开发项目中用到的vue框架做点小总结吧,总结的知识点会很杂很碎,但都是基础,对需要入门的伙伴,或者长时间不使用的伙伴都会有些帮助,也算是自己的一个复习吧。话不多说,下面开始,这个章节 主要写些vue中常用的指令,及插值语法(或者说是插值表达式):
1 插值语法(插值表达式)
由于vue是基于数据驱动的,所以当我们需要在页面中显示一段文本时,可以使用如下操作:
export default {
data(){
return{
msg:"hello vue"
}
},
methods:{
handleClick(){
this.msg = "hello change"
}
}
}
在模板中输出msg中的值:可以使用{{}},需要注意的是 我们的模板中必须有一个根节点,也只能有一个根节点 我们的操作都要在这个根节点中。
<template>
<div>{{msg}}</div>
</template>
2 v-html 指令
这个指令主要是帮助我们显示带有标签的文本,比如我们的数据是这样的 msg2:'<span>测试文本</span>'
这种形式的文本我们用插值语法是无法将span标签解析的,这时我们可以使用v-html指令 如下:
<span v-html="msg2"></span>
3 v-if (v-else)和v-show指令
这两个指令主要是用来进行条件判断的,但是这两个指令的区别在于,当我们使用v-if指令时,如果条件为假,节点不会创建(或者节点会被删除),而v-show指令,会创建(隐藏节点),只不过是将display属性设置成none,来进行节点的显示或者隐藏
<span v-if="isShow"> 显示节点</span>
<span v-else>显示节点2</span>
v-else 指令和v-if指令可以配合使用,使用方法和我们在js中的使用方式差不多,这里不做过多赘述;
4 v-for 指令
这个指令主要是用来做循环渲染的,类似于js中的for循环 ,使用方法如下: arr:['lisi','zhangsan','wangwu']
<ul>
<li v-for="(item,key) in arr" :key="key">
{{item}} ------------ {{key}}
</li>
</ul>
其中item代表的是我们循环出来的每一项,key代表的是改项在数组中的下标,复杂的数据循环同理,如果数据结构有多层的话,可以嵌套使用
5 v-bind指令
该指令主要用来绑定属性使用的 ,比如我们要渲染一张图片,我们可以绑定src属性,再比如我们要改变class类名,我们也可以使用该指令 使用方法如下:src:'https://xyylcdn.weein.cn/group1/M00/06/BF/rBUgBF8WtdWAKPOrAABgCedJ7gk388.jpg?filename=%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_1000750_gaitubao_367x275_gaitubao_345x275.jpg'
绑定src:
<img v-bind:src="src" alt="">
<!-- 简写如下 -->
<img :src="src" alt="">
绑定class:
<span v-bind:class="className">类名绑定</span>
<!-- 简写如下 -->
<span :class="className">类名绑定</span>
v-bind的指令有个简写形式,简写的时候可以把v-bind省略,只留下:即可
6 v-on指令
该指令主要是用来处理事件绑定的,我们在js中使用的事件都可以使用这种方式进行绑定 如下:
<button v-on:click="handleClick">处理点击事件</button>
<!-- 简写如下 -->
<button @click="handleClick">处理点击事件</button>
methods:{
handleClick(){
this.msg = "hello vue"
}
}
v-on指令也有简写形式,可以将v-on:替换成@符号即可
7 v-cloak指令
如果网速慢,而该标签内容是变量没有请求响应回来的时候,页面上先不显示该标签(vue给该标签加了css样式),当响应回来的时候改标签默认将css样式去除。此指令可以解决使用插值表达式页面闪烁问题
<div class="#app" v-cloak>
<p>{{name}}</p>
</div>
[v-cloak] {
display: none;
}
未完待续,欢迎交流!