本教程分为三部分 ： 基础 进阶 实战 ，深入浅出Vue.js
基础篇持续 更新中
第五章 Vue.JS中的内置指令
------ 基本指令
- v-clock
一般与
display:none进行结合使用 作用：解决初始化慢导致页面闪动的最佳实践.
示例代码如下：
v-clock的应用场景
<div id="App">
{{msg}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
while (true) {
}
var APP = new Vue({
el: '#App',
data: {
msg: '有个姑娘叫小花'
}
})
</script>
页面会一直加载 对用户体验不好
image.png
这个时候 要优化一下 ！
<style>
[v-click]: {
display: none
}
</style>
v-clock的应用场景 解决初始化慢导致的页面闪动问题
<div id="App">
<p v-clock>{{msg}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
//模拟网速不好 导致页面渲染不出来
while (true) {
}
var APP = new Vue({
el: '#App',
data: {
msg: '有个姑娘叫小花'
}
})
</script>
隐藏
-
v-once
定义它的元素和组件只渲染一次
<div id="App">
v-clock的应用场景 解决初始化慢导致的页面闪动问题
<p v-cloak>{{msg}}</p>
<hr>
<!-- v-once: -->
v-once:定义它的元素和组件只渲染一次 <br>
<span v-once>{{oncedata}}</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
//模拟网速不好 导致页面渲染不出来
// while (true) {
// }
var APP = new Vue({
el: '#App',
data: {
msg: '有个姑娘叫小花',
oncedata: '长得真漂亮'
}
})
</script>
渲染一次
------ 条件渲染指令
-
vif, velesif ,velse
和js中的判判断条件一样 看个小栗子 当6 < 3的时候 就渲染apple否则当9 > 3的时候就渲染pingapple不然就渲染banana
<div id="APP">
v-if后面接的是等号 ：等号后面的内容必须是布尔值
<p v-if="6<3">{{apple}}</p>
<p v-else-if="9>3">{{pingapple}}</p>
<p v-else>{{banana}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#APP',
data: {
apple: 'apple',
banana: 'banana',
pingapple: 'pinapple'
}
})
</script>
用法： 必须跟着屁股走
v-if的弊端 :
Vue 在渲染元素时 ，出于效率考虑，会尽可能地复用已有的元素而非重新渲染， 因此会出现乌龙,只会渲染变化的元素，也就是说，nput元素被复用了
<div id="APP">
v-if后面接的是等号 ：等号后面的内容必须是布尔值
<p v-if="6<3">{{apple}}</p>
<p v-else-if="9>3">{{pingapple}}</p>
<p v-else>{{banana}}</p>
<hr>
<!-- v-if的实例用法 -->
v-if的实例用法 需求 ：点击按钮，实现用户名输入框和密码框的切换
<div v-if="type ==='name'">
用户名：<input type="text" placeholder="请输入用户名">
</div>
<div v-else>
密码：<input type="text" placeholder="请输入密码">
</div>
<button v-on:click="toggleType">点我切换</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#APP',
data: {
apple: 'apple',
banana: 'banana',
pingapple: 'pinapple',
type: 'name'
},
methods: {
toggleType: function() {
// 三目运算法则
this.type = (this.type === 'name' ? 'password' : 'name')
}
}
})
</script>
乌龙演示
v-if的弊端 :Vue 在渲染元素时 ，出于效率考虑，会尽可能地复用已有的元素而非重新渲染， 因此会出现乌龙
只会渲染变化的元素，也就是说，
input元素被复用了解决方案 ：加·
key，唯一，提供key值可以来决定是否复用该元素
<div v-if="type ==='name'">
用户名：<input type="text" placeholder="请输入用户名" key='name'>
</div>
<div v-else>
密码：<input type="text" placeholder="请输入密码" key='psd'>
</div>
<button v-on:click="toggleType">点我切换</button>
key.gif
- v-show
只改变了
css属性display
<div id="APP">
v-show 用法：-显现-与否取决于布尔值
<p v-show="9 > a">我被渲染</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#APP',
data: {
a: 3
}
})
</script>
v-if和v-show的比较
v-if:
实时渲染：页面显示就渲染，不显示。我就给你移除
v-show:
v-show的元素永远存在也页面中，只是改变了css的display的属性
v-show.gif
网友评论