列表渲染
在Vue中,进行列表渲染使用的是v-for属性,可以理解为循环,具体使用如下:
<body>
<div id="demo">
<div v-for="item, index in items"> <!-- index可以获得索引值,用key也可以-->
{{ index }} : {{ item.information }}
</div>
<div v-for="obj, key in objects"> <!--key也可以获得对象中的属性值,index也可以-->
{{ key }} : {{ obj }}
</div>
</div>
<script type="text/javascript">
var v = new Vue({
el: '#demo',
data: {
items:[
{ information: 'i1'},
{ information: 'i2'},
{ information: 'i3'}
],
objects:{
name: '张三',
age: 12,
sex: '男'
}
}
})
</script>
</body>
输出结果:
一般情况下,我们在写循环的时候都会加上一个key值,如下:
<div v-for="item, index in items" :key="index">
{{ index }} : {{ item.information }}
</div>
<div v-for="obj, key in objects" :key="key">
{{ key }} : {{ obj }}
</div>
模板语法
v-once
在Vue框架中,数据是用{{}}来进行插入的,这里如果设置了v-once语句后,一次性插入之后就不会再进行更新:
<body>
<div id="app">
<div>{{msg}}</div>
<div v-once>{{msg}}</div>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
msg:"hello world"
}
})
</script>
</body>
这里在控制台改变值后,会发现,添加了v-once的div中的内容不会发生改变:
计算属性
计算属性会将计算结果进行缓存,若数据未进行更新,就不会重新加载数据,这样子可以提高效率。
<body>
<div id="app">
<!-- 一般写法 -->
<div>{{data1+data2}}</div>
<!-- 计算属性写法 -->
<div>{{dataSum}}</div>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
data1:"hello world",
data2:"hello vue"
},
computed:{
dataSum:function(){
// 会将计算的结果进行缓存,只要变量内容不改变,就不会重新计算
return this.data1 + this.data2
}
}
})
</script>
</body>
计算属性中含有get和set属性:
<body>
<div id="app">
<div>{{data1}}</div>
<div>{{data2}}</div>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
data1:"hello world"
},
computed:{
data2:{
get:function(){
return this.data1.split('').reverse().join('');
},
set:function(value){
console.log(value)
this.data1 = value;
}
}
}
})
</script>
</body>
进行数值的变动后:
侦听器
侦听器是用来监听数据是否发生了改变,当数据发生改变的时候,侦听器就会调用相应的方法,侦听器的是通过watch实现的:
<body>
<div id="app">
{{ msg }}
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
msg:'hello world'
},
methods:{
},
computed:{
},
watch:{
msg:function(val){
console.log("更新的值:"+val);
}
}
})
</script>
</body>
class和style的绑定
绑定属性我们使用的v-bind属性,在Vue.js中,对样式的绑定进行了增强,可以使用数组或对象的形式进行绑定:
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.active{
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div id="app">
<div :class="{active:isActive}"></div>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
isActive: true
}
})
</script>
</body>
将属性值设为false,样式就会失效:
样式还可以通过字符串、数组、对象的形式进行绑定:
<body>
<div id="app">
<div :class="styleObj"></div>
<div :class="styleArr"></div>
<div :class="styleStr"></div>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
styleObj:{style1:true, style2:false, style3:true},
styleArr:['style1', 'style2'],
styleStr:'style1 style2 style3'
}
})
</script>
</body>
结果: