标签：error font pre name isa com 语法 books 变化
1、v-cloak :他会在Vue实例借宿编译时从绑定的HTML元素上移除，经常和display：none结合使用
例子：
<style>
[v-cloak]{
display:none;
}
</style>
<div id="app" v-cloak>
{{message}}
</div>
<script>
var app = new Vue({
el:"#app",
data:{
message:"这是一段文字"
}
})
</script>
作用：
当网速慢的时候，Vue.js 文件还没有加载完全,页面就会显示{{message}},直到加载完全才会替换，这个过程屏幕会闪动，加上v-cloak和display:none,就可以解决了。
2、v-once:所在的元素及内容只被渲染一次，首次渲染后，不会因为数据变化而渲染，被视为静态内容。
3、Vue出于效率考虑，会尽可能的复用已有的元素而非重新渲染。也就是切换内容，但是标签不变，如果要也替换标签，就需要使用key属性，key属性必须是唯一的。
4、v-if 和v-show 基本一致，区别：v-if是真正的根据条件重新渲染，而v-show只是变换display的属性none ，block,
v-if适用于不经常变化的，v-show适用于经常变换的条件的。注意：v-show不能在<template>上使用
5.v-for,循环遍历,对象和数组都可以循环遍历
<ul>
<li v-for="book in books">{{book.name}}</li>
</ul>
<ul>
<li v-for="book of books">{{book.name}}</li>
</ul>
<ul>
<li v-for="(book,index) in books">{{index}}-{{book.name}}</li>
</ul>
<ul>
<li v-for="(book,key,index) in books">{{index}}-{{book.name}}</li>
</ul>
<ul> <template v-for="book in books"> <li>{{book.name}}</li> <li>{{book.author}}</li> </template> </ul>
5 v-bind 一般用于
<a :href="url">
<img :src="imgSrc"/>
对象语法：true,false
1.<div :class="{‘active‘:isActive}"></div> //active
2.<div :class="{‘active‘:isActive,‘error‘:isError}"></div> //active
3.<div class="static" :class="{‘active‘:isActive,‘error‘:isError}"></div> // static active
数组语法：
4.<div :class="[activeCls,errorCls]"></div> //active error
5.<div :class="[{‘active‘:isActive},errorCls]"></div> //active error
6.<div :class="[isActive?activeCls:‘‘,errorCls]"></div> //active error
在组件上使用
<my-component :class="[activeCls,errorCls]"></my-component>
内联样式：
<div :style="{‘color‘:color,"fontSize":fontSize+‘px‘}"></div>
标签：error font pre name isa com 语法 books 变化
原文地址：https://www.cnblogs.com/xuqp/p/9175131.html
