文章目录
一、Vue指令
1、什么是指令?
- 在vue中提供了一些对于页面+数据的更为方便的输出,这些操作就叫做指令。
- vue的指令格式为
v-xxx
- 指令中封装了一些DOM行为,结合属性作为一个暗号,暗号有对应的值,根据不同的值,框架会进行相关的DOM操作的绑定。(学号声明指令,vue会帮你做复杂操作)
2、常用指令
v-text
:元素的inneText
属性,必须是双标签,跟{{}}效果一样,使用不多v-html
:元素的innerHTML
v-if
指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。v-else-if
:用作v-if
的else-if
块。可以链式的多次使用:v-else
:可以用v-else
指令给v-if
添加一个 “else” 块:v-show
:与v-if
类似条件性渲染,不同的是带有v-show
的元素始终会被渲染并保留在 DOM 中。v-show
只是简单地切换元素的 CSS 属性 display。(注意,v-show
不支持<template>
元素,也不支持v-else
。)
3、v-if 与 v-show辨析
v-if
是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if
也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。
相比之下,v-show
就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。
类比于普通的js语句,v-if
相当于(条件为真时appendChild
, 条件为假时removeChild
),而v-show
控制display:none
这个属性,是先渲染,再决定是否显示,无论如何都是需要渲染的,
所有一般来说,v-if
有更高的切换开销,而 v-show
有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show
较好(滚动的);如果在运行时条件很少改变,则使用 v-if
较好。
4、实例
<body>
<div id="app">
<h2>{{msg}}</h2> <!--以下的命令中""包裹的并不是字符串,而是数据-->
<p v-text="msg"></p> <!--利用v-text改变标签的文本元素-->
<p v-text = "1+1"></p> <!--v-text还可以进行简单的运算-->
<div v-html="msg2"></div> <!--利用 v-html在div内部加上msg2包含的语句-->
<div v-if="isShow">真的我就显示</div><!--利用v-if进行动态的渲染,修改变量决定是否显示-->
<div v-if="!isShow">假的我就不显示</div>
<div v-if="Math.random()>0.5">已显示</div>
<div v-else>已关闭</div><!--v-else可以用在v-if下面,相当于一个else语句-->
<div v-show="!isShow">真的我就显示</div><!--v-show控制的是display属性-->
</div>
<script type="text/javascript">
//如果template中定义了内容,那么优先加载模板,无定义内容才加载#app的内容
var vm = new Vue({
el: "#app", //绑定的Dom对象,#一定要有
data:function(){
return{
//数据属性
msg:"指令系统",
msg2: "<h2>v-html指令</h2>",
isShow:true,
}
}
//template:"<div>{{msg}}</div>"
})
</script>
</body>
看一看运行结果
重点辨析一下v-if v-show
,对v-show
而言div
依然存在只是display
改变了,而v-if
而言,变成了<!---->
,等待之后的渲染。
贴上可以直接执行的源代码,有详细的注释。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>myVue</title>
<script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
<h2>{{msg}}</h2> <!--以下的命令中""包裹的并不是字符串,而是数据-->
<p v-text="msg"></p> <!--利用v-text改变标签的文本元素-->
<p v-text = "1+1"></p> <!--v-text还可以进行简单的运算-->
<div v-html="msg2"></div> <!--利用 v-html在div内部加上msg2包含的语句-->
<div v-if="isShow">真的我就显示</div><!--利用v-if进行动态的渲染,修改变量决定是否显示-->
<div v-if="!isShow">假的我就不显示</div>
<div v-if="Math.random()>0.5">已显示</div>
<div v-else>已关闭</div><!--v-else可以用在v-if下面,相当于一个else语句-->
<div v-show="!isShow">真的我就显示</div><!--v-show控制的是display属性-->
</div>
<script type="text/javascript">
//如果template中定义了内容,那么优先加载模板,无定义内容才加载#app的内容
var vm = new Vue({
el: "#app", //绑定的Dom对象,#一定要有
data:function(){
return{
//数据属性
msg:"指令系统",
msg2: "<h2>v-html指令</h2>",
isShow:true,
}
}
//template:"<div>{{msg}}</div>"
})
</script>
</body>
</html>
二、稍微高级一点的指令
1、v-bind用法解析:动态渲染
v-bind
:绑定标签上的属性(内置属性或者自定义属性,包括但不限于img的arc
,超链接的href
,Dom元素的class
等等,加上参数的话,我们很容易的可以进行页面的动态渲染),简写:
(就是一个:)
基本样式是这样的
<div v-bind:class="{ active: isActive }"></div>
上面的语法表示 active
这个 class
存在与否将取决于数据属性 isActive
的 truthiness
。
将代码写成如下形式
<head>
<meta charset="UTF-8">
<title>myVue</title>
<!-- <script src="/assets/js/vue.js"></script> -->
<script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script>
<!-- <script src="C:\Users\10690\Desktop\StudyDocument\软工课设\myVue\myvue\static\jsDocument/vue.js"></script>-->
<style>
.box{
width:30px;
height: 30px;
background-color: red
}
.active{
background-color:green;
}
</style>
</head>
<body>
<div id="app">
<div class = "box active"></div><!--两个class默认显示后者,我们也可以active先不显示-->
<div class = "box" v-bind:class="{active:isGreen}"></div><!--将active绑定为一个bind,可以动态的改变样式-->
<div class = "box" :class="{active:!isGreen}"></div>
</div>
<script type="text/javascript">
//如果template中定义了内容,那么优先加载模板,无定义内容才加载#app的内容
var vm = new Vue({
el: "#app", //绑定的Dom对象,#一定要有
data:function(){
return{
//数据属性
isGreen:false,
}
}
//template:"<div>{{msg}}</div>"
})
</script>
</body>
重点在这里
<div id="app">
<div class = "box active"></div><!--两个class默认显示后者,我们也可以active先不显示-->
<div class = "box" v-bind:class="{active:isGreen}"></div><!--将active绑定为一个bind,可以动态的改变样式-->
<div class = "box" :class="{active:!isGreen}"></div><!--缩写-->
</div>
看一看运行效果,显然使用v-bind
绑定一个class之后,我们就可以使用isGreen参数来随时调整什么时候显示什么class,相应的可以对图片,超链接等也做这样的绑定。
2、v-on:监听 DOM 事件
v-on
的一般用法v-on:click='clickHandle'
,先绑定一个事件,再绑定一个方法,clickHandle是要在vue对象中声明的方法,比如
<div id="app">
<div class = "box" v-on:click='clickHandle' v-bind:class="{active:isGreen}"></div><!--将active绑定为一个bind,可以动态的改变样式-->
<div class = "box" :class="{active:!isGreen}"></div><!--缩写-->
</div>
<script type="text/javascript">
//如果template中定义了内容,那么优先加载模板,无定义内容才加载#app的内容
var vm = new Vue({
el: "#app", //绑定的Dom对象,#一定要有
data:function(){
return{
//数据属性
isGreen:false,
}
},
//template:"<div>{{msg}}</div>"
methods:{
clickHandle(e){
this.isGreen = !this.isGreen;//这里的this就是vm对象
}
}
})
每点击一次颜色两个矩形的颜色就会发生转换。
将div中的第一句换成如下形式也是可以正常运行的,@
是v-on:
的简写
<div class = "box" @click='clickHandle' v-bind:class="{active:isGreen}"></div><!--将active绑定为一个bind,可以动态的改变样式-->
3、json或列表数据处理:v-for
我们可以用 v-for
指令基于一个数组来渲染一个列表。v-for
指令需要使用 item in items
形式的特殊语法,其中 items
是源数据数组,而 item
则是被迭代的数组元素的别名。(激动的心,这不就是python嘛)
demo:
<ul id="example-1">
<li v-for="item in items">
{{ item.message }}
</li>
</ul>
var example1 = new Vue({
el: '#example-1',
data: {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})
在 v-for
块中,我们可以访问所有父作用域的属性。v-for
还支持一个可选的第二个参数,即当前项的索引index
。
<ul id="example-2">
<li v-for="(item, index) in items">
{{ parentMessage }} - {{ index }} - {{ item.message }}
</li>
</ul>
var example2 = new Vue({
el: '#example-2',
data: {
parentMessage: 'Parent',
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})
结果: