1.v-cloak
基本使用方法,解决插值表达式闪烁问题
首先在使用插值表达式的时候
<body>
<div id="app">
<p>{{ msg}}</p>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
msg:'123'
},
methods:{}
});
</script>
</body>
如果网速太慢 首先在页面上显示的不是msg中的数据,而是显示插值表达式 {{ msg }}
这样对网速慢的用户体验就不是很好
这时使用v-cloak就能解决这个问题
<p v-cloak>{{ msg }}</p> <!--在P标签内加入v-cloak-->
<!--在样式内添加v-cloak属性-->
<style>[v-cloak]{
display:none;
}</style>
当msg中的数据被加载完成的时候 才将插值表达式渲染到页面上
———————————————————————————————————————————————
2.v-text
v-text其实和插值表达式差不多,直接在Dom元素内添加v-text就可以了 不过v-text默认是没有闪烁问题的
<h4 v-text="msg"></h4>
h4渲染出来的内容就是msg中的数据
但是v-text和插值表达式有一个不同
<p> ==={{ msg }}</p>
<p v-text="msg">===</p>
这样在页面中使用插值表达式的标签就会显示 ===123,使用v-text的标签会显示123
———————————————————————————————————————————————
3.v-html
就是把数据渲染为HTML格式
<body>
<div id="app">
<div v-html="msg"></div>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
msg:'<h4>我是一个H4</h4>'
},
methods:{}
});
</script>
</body>
页面中显示 我是一个H4
———————————————————————————————————————————————
4.v-bind
v-bind是vue中,提供用于绑定属性的指令
<body>
<div id="app">
<input type="button" v-bind:value="mytitle" v-bind:title="mytitle">
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
mytitle:'这是一个自定义title'
},
methods:{}
});
</script>
</body>
button的value和title都绑定为mytitle
简写:可以不写v-bind 直接写:
<input type="button" :value="mytitle" :title="mytitle">
v-bind中,可以写合法的JS表达式
———————————————————————————————————————————————
5.v-on
由于vue不提倡直接操作DOM 所以提供了v-on:事件绑定机制
<body>
<div id="app">
<input type="button" value="" v-on:click="show">
</div>
<script>
var vm=new Vue({
el:'#app',
data:{},
methods:{
show:function(){
alert("hello")
}
}
});
</script>
</body>
methods属性中定义了当前vue实例所有可用的方法
也就是说v-on绑定了方法
简写是@
<input type="button" value="" @click="show">
———————————————————————————————————————————————
6. v-for
循环数组
<body>
<div id="app">
<p v-for="item in list">{{item.id}} --{{item.name}}</p>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
list:[
{id:1,name:'zs1'},
{id:2,name:'zs2'},
{id:3,name:'zs3'},
{id:4,name:'zs4'},
{id:5,name:'zs5'},
]
},
methods:{
}
});
</script>
</body>
循环对象
<body>
<div id="app">
<p v-for="(val,key) in user">{{ val }}--{{key}}</p>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
user:{
id:'1',
name:'zs',
gender:'男'
}
},
methods:{
}
});
</script>
</body>
v-for循环的时候,key属性只能使用number获取String;
key在使用的时候,必须使用v-bind属性绑定的形式,指定key的值;
在组件中,使用v-for循环的时候,或者在一些特殊情况中,如果v-for有问题,必须在使用v-for的同时,指定唯一的字符串/数字类型 :key值
<p v-for="item in list" :key="item.id"></p>
———————————————————————————————————————————————
7. v-if
<body>
<div id="app">
<input type="button" value="开关" @click="flag=!flag">
<h3 v-if="flag">这是用v-if控制的元素</h3>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
flag:true
},
methods:{}
});
</script>
</body>
v-if的特点是每次都会重新删除和创建元素
点击前
点击后
v-show
v-show的特点:每次不会重新进行DOM的删除和创建操作,只是切换了元素的display:none样式
点击前
点击后
v-if有较高的性能消耗
v-show有较高的初始渲染消耗
如果元素涉及到频繁的切换,最好不要使用v-if;
如果元素永远不会被显示出来v-show就有较高的初始渲染消耗