基本指令
v-pre: 将内容原样输出
<div id="app" v-pre>
{{message}}
</div>
var vm = new Vue({
el : '#app',
data : {
message : 'hello world'
}
})
v-cloak: 解决初始化慢导致页面闪动
- v-cloak 指令一般要与 display: none 一起使用
<style>
/* vcloak一般与display：none进行结合使用 */
[v-cloak] {
display:none;
}
</style>
<div id="App">
<hr>
v-cloak: 解决初始化慢导致页面闪动 <br>
<p v-cloak>{{msg}}</p> <br>
</div>
<script>
var App = new Vue({
el: "#App",
data: {
msg: '你好',
}
})
</script>
这样就不会看到页面突然闪了一下;它会等到指令关联的实例结束编译，再一起显示。
v-once: 定义它的元素和组件只渲染一次
<div id="App">
<hr>
v-once : 定义它的元素或组件只渲染一次,后续都不会再重新渲染<hr>
<span v-once>{{oncedata}}</span>
</div>
<script>
var App = new Vue({
el: "#App",
data: {
oncedata:'他好'
}
</script>
条件渲染指令
v-if / v-else-if / v-else:跟 js 差不多
<div id="App">
v-if后面接的是等于号，等于后的内容必须是布尔值
<br>
v-if 的基本用法:
<p v-if="5 < 2">{{apple}}</p>
<!-- 判断5<2 是否为 true | false 不渲染 -->
<p v-else-if="7>3">{{pineapple}}</p>
<!-- //判断 7>3 是否为 true |true 渲染 凤梨 -->
<p v-else>{{banana}}</p>
<script >
var App = new Vue({
el: "#App",
data: {
apple: '苹果',
banana: '香蕉',
pineapple: '凤梨',
},
})
</script>
v-show: 根据布尔值，来决定是否显示元素
<div id="app">
<p v-show="6 > 3">{{ text }}</p> // v-show d的条件是true，所以会显示 text
</div>
var app = new Vue({
el: '#app',
data: {
text: '你好'
}
})
v-if 只渲染变化的元素
v-if 的实例：对不想让其复用的标签或者元素，加入 key 即可
需求:点击按钮，实现用户名输入框和密码框的切换
<div v-if="type === 'name'">
<!-- type = name 为true ,渲染用户名 -->
用户名：
<input type="text" placeholder="请输入用户名" key="name">
</div>
<div v-else>
密码：
<input type="text" placeholder="请输入密码" key="password">
</div>
<button v-on:click="toggleType">切换</button>
<script>
var App = new Vue({
el: "#App",
data: {
type: 'name', //初始值
},
methods: {
toggleType: function () {
//三目运算符
this.type = (this.type === 'name' ? 'password' : 'name')
//点击之后如果 this.typr = name 就将password 赋值给type，反之this.type ≠ name ,将 name 赋给 type
}
},
})
</script>
Vue 在渲染元素时 ，出于效率考虑，会尽可能地复用已有的元素而非重新渲染。
要解决 v-if 的复用问题，可以给被复用的元素（这里就是 input）加 key，而且是唯一的 key。
v-if 与 v-show 的比较
- v-if : 实时渲染，DOM页面显示就渲染，不显示，就不渲染。
- v-show: v-show的元素永远存在于DOM页面中，只是改变了css 的 display 的属性。
列表渲染指令
v-for:当需要将一个数组遍历或枚举一个对象属性循环显示时，就会用到列表渲染指令 v-for。
遍历多个对象（数组中的多个对象）；
遍历一个对象的多个属性。
div id="App">
<hr> v-for 的用法： v-for 一点是写在要遍历的元素上,v-for 后面接等号 ,类似于item in items
<br> 1. 遍历多个对象
<br> 遍历多个对象一定是数组 ：
<ul>
<li v-for="vueMth in vueMethods">{{vueMth.name}}</li>
<!-- vueMth 自己定义的变量 vueMethods 自己定义的数组 -->
</ul>
<hr> 带索引的写法：括号的第一个变量,代表item ，第二个代表index
<ul>
<li v-for="(vueMth,index) in vueMethods">{{index}}---{{vueMth.name}}</li>
</ul>
<br> 2.遍历一个对象多个属性：
<span v-for="value in nvshen"> {{value}} </span>
<br> 拿到 value key index 的写法 v-k-i ：
<div v-for="(value,key,index) in nvshen">第{{index}}个女神：--键是{{key}}：--{{value}} </div>
</div>
<script>
var App = new Vue({
el: "#App",
data: {
//每个对象对应一个 li
vueMethods: [
{ name: '多思考' },
{ name: '多练习' },
{ name: '听讲' }
],
nvshen: {
girl1: '刘亦菲',
girl2: '杨幂',
girl3: '舒畅'
}
}
})
</script>
