Vue基本语法day02

v-if 和 v-show 切换元素的隐藏和显示

格式:　v-if / v-show='布尔值',		true  => 元素显示,  false  => 元素就隐藏

相同点: 都可以切换元素的显示和隐藏
不同点: 实现的方法不同
v-if : 显示 : 创建节点,,,隐藏 : 删除节点   通过不断的创建和删除节点来切换
v-show : 显示 : display: block  隐藏 : display: none

场景 :
	v-if  通过不断的创建和删除节点来切换显示和隐藏的,,,(重绘重排)  所以性能不好
	以后切换显示和隐藏  不频繁  => v-if  (配合条件渲染指令一块使用的 )
	................................频繁     => v-show

条件渲染指令
v-if
v-else-if
v-else

<div id="app">
  <!-- 一种情况的 -->
  <!-- <h1 v-if="age >= 30">老男人</h1> -->

  <!-- 两种情况的 -->
  <!-- <h1 v-if="age >= 30">老男人</h1>
  <h1 v-else>小鲜肉</h1> -->

  <!-- 三种以上情况 -->
  <h1 v-if="age >= 30">老男人</h1>
  <h1 v-else-if="age >= 10 && age < 30">小鲜肉</h1>
  <h1 v-else>吃奶的娃儿</h1>
</div>
<script src="./vue.js"></script>
<script>
  const vm = new Vue({
    el: '#app',
    data: {
      age: 60
    }
  })


  // 一种情况  v-if() {}
  // 两种情况  v-if...v-else...
  // 三种以上情况  v-if  ... v-else-if ....v-else....
  // 指令一般用在 标签上(头标签)
</script>

v-once : 只解析一次,以后不管数据怎么变化,都不会再变

<div id="app">
  <h1>没有v-once的 : {{ num }}</h1>
  <h1 v-once>添加v-once的 : {{ num }}</h1>
</div>
<script src="./vue.js"></script>
<script>
  const vm = new Vue({
    el: '#app',
    data: {
      num: 100
    }
  })
</script>

v-pre : 不解析(是什么样还是什么样)

<h1 v-pre>添加v-pre: {{ num }}</h1>        //   {{ num }}

遮盖 v-cloak

解决闪烁问题
{{ num }}   ===> 1000
1. 给要遮盖的元素添加 v-cloak  指令
2. 通过属性选择器,找到添加指令的所有的元素,设置样式 display: none
3. 当解析完成,vue会删除   v-clock 指令
注意点 :  如果子元素需要遮盖的比较多,给其父元素添加 v-cloak

	[v-cloak] {
	     display: none;
	}

	<div id="app" v-cloak>
	     <h1>{{ num }}</h1>
	     <h1>{{ num }}</h1>
	     <h1>{{ num }}</h1>
	     <h1>{{ num }}</h1>
	     <div>{{ num }}</div>
	 </div>

计算属性 : (computed, 跟data 平级) 计算属性也是一种属性, 只跟相关的数据变化而变化

使用:
	1. 计算属性写在 computed 里面
	2. 写起来像方法
	3. 用起来像属性

特点:
	1. 计算属性 必须要有一个 return 值,return 后面的值,就是计算属性得到的值
	2. 计算属性里面可以使用 data 已存在的值
	3. (重点) 计算属性会随着相关的数据(num1) 的变化,而重新计算
	计算属性 num , 它的相关数据 是 num1 , 所以只要num1 发生了变化,计算属性就重新计算

注意点:
	1. 一定要有 return
	2. 计算属性不能当 函数 / 方法来用
	3. 计算属性不能和data 里的数据重名

	以后什么情况下使用计算属性?
		1. 根据已知值 (data里的值) 得到是一个新值
		2. 新值只会随着其相关的数据变化而变化

@陈皮糖

Vue基本语法day02