(1)v-cloak
v-cloak的作用是防止插值在数据没有加载出来的时候闪烁,但是需要配合css中的属性选择器来使用
<div id="app">
<h2 v-cloak>{{msg}}</h2>
</div>
<script>
new Vue({
el:"#app",
data:{
msg:"好啊"
}
})
</script>
(2)v-text
v-text指令用于将数据填充到标签中,作用与插值表达式类似,但是没有闪动问题
需要注意的是:会替换原来的内容;如果数据中有html标签,会都当成文本一并输出
<div id="app">
<h3>文字{{msg}}</h3>
<h3 v-text="msg">文字</h3>
<h3 v-text="oHtml"></h3>
</div>
<script>
new Vue({
el:"#app",
data:{
msg:"接触vue",
oHtml:"<strong>文字</strong>"
}
})
</script>
(3)v-html
用法和t-text相似,但是可以将html片段填充到标签中,也就是会将代码当成html标签解析后输出。
<div id="app">
<h3>文字{{msg}}</h3>
<h3 v-html="msg">文字</h3>
<h3 v-html="oHtml"></h3>
</div>
<script>
new Vue({
el:"#app",
data:{
msg:"接触vue",
oHtml:"<strong>文字</strong>"
}
})
</script>
(4)v-pre
显示原始信息跳过编译过程
(5)v-once
只执行一次的操作,当数据变化时,不在执行
<div id="app">
<h3>文字{{msg}}</h3>
{{changeMangFn()}}
</div>
<script>
new Vue({
el:"#app",
data:{
msg:"接触vue"
},
methods:{
changeMangFn(){//定义一个方法来修改data中的msg数据
this.msg="文本"
}
}
})
</script>
(6) v-model
实现双向的数据绑定,主要作用是获取表单中输入的数据
<div id="app">
<!-- 可以将data中定义的msg数据绑定到input上 -->
<!-- 如果表单上边的值发生改变那么data中的msg也会跟着改变--视图修改了,数据也会发生变化 -->
<input type="text" v-model="msg">
<h3>{{msg}}</h3>
<!-- {{changeMsg()}} -->
</div>
<script>
new Vue({
el:"#app", //挂载元素(指定一个vm实例的作用范围)
data:{//定义数据的
msg:"接触vue"
},
methods:{//methods中定义的方法的
changeMsg(){//定义一个方法来修改data中的msg数据
this.msg="文本"
}
}
})
</script>
(7)v-on
v-on是用来绑定事件 的指令
v-on:事件名 如:点击事件---> v-on:click="fn"
可以简写: @事件名 如:点击事件--> @click="fn"
<div id="app">
<h2>msg的数据为:{{msg}}</h2>
<button v-on:click="changeMsg">点击修改msg的值</button>
<button @mouseover="changeMsg">鼠标经过修改msg</button>
<button @click="changeMsg2('天地','自然')">执行带参数的事件</button>
</div>
<script>
new Vue({
el: "#app",
data: {
msg: "学习"
},
methods: {
// 定义方法修改msg
changeMsg() {
this.msg = "快乐"
},
changeMsg2(args, args2) {
this.msg = args + args2
}
}
})
</script>
(8)v-bind
v-bind绑定属性的,基本形式:v-bind:属性="属性值" ,可以简写 :属性="属性值"
<div id="app">
<h2>{{msg}}</h2>
<!-- v-bind:属性="属性值" 绑定属性的 可以简写:属性="属性值" -->
<!-- v-bind:src="imgsrc" 给图片绑定src属性值 -->
<img v-bind:src="imgsrc" v-bind:title="msg">
<img :src="imgsrc" alt="">
</div>
<script>
new Vue({
el:"#app",
data:{
msg:"文字",
imgsrc:"一个图片的url"
}
})
</script>
v-bind的class样式
绑定class样式: 方法1--数组形式 :class=[类名1,类名2,...]
方法2--对象形式 :class="{类名1:布尔值1,类名2:布尔值2}" //布尔值为true的时候 使用该样式类,否则不使用
方法3--数组对象 :class=["类名",{类名:布尔值}]
方法4 :class='[三目运算]'
<style>
.red{
color: red;
}
.bggreen{
background: green;
}
.bgyellow{
background: yellow;
}
</style>
</head>
<body>
<!-- 绑定class样式 -->
<div id="app">
<h2 :class='["red","bggreen"]'>{{msg}}1</h2>
<h2 :class="{red:true,bggreen:1>0}">{{msg}}2</h2>
<h2 :class='["red",{bggreen:true}]'>{{msg}}3</h2>
<!-- styleArr data中定义的数组,数组的每一项元素是定义好的类名 -->
<h2 :class="styleArr">{{msg}}4</h2>
<h2 :class="styleObjArr">{{msg}}5</h2>
<h2 :class='["red",5>8?"bggreen":"bgyellow"]'>{{msg}}</h2>
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
msg:"文字",
styleArr:["red","bggreen"],
styleObjArr:["red",{bggreen:true}]
}
})
v-bind的style样式
<style>
.red{
color: red;
}
.bggreen{
background: green;
}
.bgyellow{
background: yellow;
}
</style>
</head>
<body>
<!-- 绑定style样式 -->
<div id="app">
<h2 style="color: red;">{{msg}}</h2>
<h2 :style="{color:'red',fontSize:'50px'}">{{msg}}</h2>
<h2 :style="{'font-size':size}">{{msg}}</h2>
<!-- styleObj data中定义的数据 -->
<h3 :style="styleObj">{{msg}}</h3>
<!-- 数组中的元素是data中定义的数据对象 -->
<h3 :style="[styleObj,styleObj2]">{{msg}}</h3>
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
msg:"文字",
size:"100px",
styleObj:{
color:'red'
},
styleObj2:{
fontSize:'50px'
}
}
})
(9)分支语句
分支语句: v-if可以控制元素的显示或者隐藏, 条件为true时渲染对应的DOM元素,如果条件为false,那么不会渲染DOM元素,v-else是配合v-if一起使用的,不能单独使用; v-if的条件为真时,v-else不执行,否则执行v-else。
(10)v-for
<!-- v-for重复一段html代码 -->
<div id="app">
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ul>
<h2>数据为数组</h2>
<ul>
<!-- 注意事项:使用v-for时,必须要绑定一个key属性,并且key的属性值是唯一的
key可以提高执行效率 diff算法
-->
<!-- (可以任意定义字符串,索引)in 数组 -->
<li v-for="(item,index) in arr":key="index">{{item}}--{{index}}</li>
</ul>
<h2>数据为数组对象</h2>
<ul>
<li v-for="item in list":key="item.id">{{item.title}}</li>
</ul>
<h2>数据为字符串</h2>
<ul>
<li v-for="(item,index) in str":key="index">{{item}}--{{index}}</li>
</ul>
<h2>数据为对象</h2>
<ul>
<li v-for="(value,key) in obj":key="key">{{value}}---{{key}}</li>
</ul>
<h2>数据为数字</h2>
<ul>
<li v-for="i in num":key="i">{{i}}</li>
</ul>
<h2>数组为嵌套数组</h2>
<ul>
<li v-for="carList in carLists":key="carList.id">
<h4>{{carList.title}}</h4>
<ul>
<li v-for="car in carList.children":key="car.id">
<h5>{{car.title}}</h5>
</li>
</ul>
</li>
</ul>
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
arr:["列表1","列表2","列表3","列表4"],
list:[{
id:1,
title:"标题001"
},{
id:2,
title:"标题002"
},{
id:3,
title:"标题003"
}],
str:"haogu",
obj:{
username:"好谷",
age:18,
student:"我们"
},
num:10,
carLists:[{
id:1,
title:"宝马",
children:[{
id:1001,
title:"宝马X1"
},{
id:1002,
title:"宝马X2"
},{
id:1003,
title:"宝马X3"
}]
},
{
id:2,
title:"大众",
children:[{
id:2001,
title:"宝来"
},{
id:2002,
title:"帕萨特"
},{
id:3003,
title:"速腾"
}]
}]
}
})