Vue 条件渲染(v-if)·列表渲染(v-for)·事件渲染(v-on) -- 柚子真好吃

一、条件渲染

1. v-if
   官方文档解释
   v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。

    
   Vue is awesome!
   

   也可以用 v-else 添加一个“else 块”：

    
   Vue is awesome!
    
   Oh no 
   

   条件渲染其实就是一个if判断。

   代码如下。

	<template>
	  <div class="hello">
	    <div v-if="chicken">人生难得一只鸡</div>
	    <div v-else>人生难得二只鸡</div>
	    <div v-if="type === 'A'">
	      A
	    </div>
	    <div v-else-if="type === 'B'">
	      B
	    </div>
	    <div v-else-if="type === 'C'">
	      C
	    </div>
	    <div v-else>
	      Not A/B/C
	    </div>
	  </div>
	</template>
	
	<script>
	  export default {
     
	    name: 'HelloWorld',
	    data() {
     
	      return {
     
	        chicken:true,
	        type:"B",
	      }
	    },
	
	    methods: {
     
	
	    }
	  }
	</script>
	
	<style scoped>
	  .hello {
     
	    margin-left: 50px;
	  }
	</style>

效果如下。

	v-if 进行判断后面的值是否为true，如果为true则显示，否则不显示
	v-else 当 v-if不执行时，执行v-else
	v-else-if 类似else-if 使用

2. v-show
   v-show的作用为控制某部件的显隐。
   代码如下。

	<template>
	  <div class="hello">
	    <div v-show="show">A</div>
	    <div v-show="!show">B</div>
	  </div>
	</template>
	
	<script>
	  export default {
     
	    name: 'HelloWorld',
	    data() {
     
	      return {
     
	        show:false
	      }
	    },
	  }
	</script>

此时界面上仅仅展示一个“B”

3. v-if 与 v-show

    v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
   
    v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
   
    相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
   
    一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
   

二、列表渲染

我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，
其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。

这里我举2个例子，一个是循环数组，一个是循环对象。具体代码如下。

<template>
  <div class="hello">
    <div>
      <ul v-for="item,value in arrayDatas">
        <li>{
     {
     value}} | {
     {
     item}}</li>
      </ul>
    </div>
    <div>
      <ul v-for="value,key in objectDatas">
        <li>{
     {
     key}} | {
     {
     value}}</li>
      </ul>
    </div>
  </div>
</template>

<script>
  export default {
     
    name: 'HelloWorld',
    data() {
     
      return {
     
        arrayDatas: ["人是衣", "马是鞍", "一看长相", "二看穿"],
        objectDatas: {
     
          "text1": "白天想",
          "text2": "夜里哭",
          "text3": "做梦都想赴首都",
        },
      }
    },

    methods: {
     

    }
  }
</script>

<style scoped>
  .hello {
     
    margin-left: 50px;
  }
</style>

效果图如下。

	其中item，value，key 可自行更换任意变量。

三、事件渲染

1. 监听事件v-on

   可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。

   	<template>
   	  <div id="example-1">
   	    <button v-on:click="counter += 1">Add 1</button>
   	    <p>The button above has been clicked {
          {
           counter }} times.</p>
   	  </div>
   	</template>
   	
   	<script>
   	  export default {
          
   	    name: 'HelloWorld',
   	    data() {
          
   	      return {
          
   	        counter:0,
   	      }
   	    },
   	
   	    methods: {
          
   	
   	    }
   	  }
   	</script>
   

   每当点击一次按钮 counter的值便会加1.，效果如下。
   

2. 事件修饰符

   在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。

   	<!-- 阻止单击事件继续传播 -->
   	<a v-on:click.stop="doThis"></a>
   	
   	<!-- 提交事件不再重载页面 -->
   	<form v-on:submit.prevent="onSubmit"></form>
   	
   	<!-- 修饰符可以串联 -->
   	<a v-on:click.stop.prevent="doThat"></a>
   	
   	<!-- 只有修饰符 -->
   	<form v-on:submit.prevent></form>
   	
   	<!-- 添加事件监听器时使用事件捕获模式 -->
   	<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
   	<div v-on:click.capture="doThis">...</div>
   	
   	<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
   	<!-- 即事件不是从内部元素触发的 -->
   	<div v-on:click.self="doThat">...</div>
   

3. 按键修饰符

   在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

   	<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
   	<input v-on:keyup.enter="submit">
   

   你可以直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符。

   	<input v-on:keyup.page-down="onPageDown">
   

4. 鼠标按钮修饰符

   .left
   .right
   .middle

   这些修饰符会限制处理函数仅响应特定的鼠标按钮。

5. 为什么在 HTML 中监听事件?

   你可能注意到这种事件监听的方式违背了关注点分离 (separation of concern) 这个长期以来的优良传统。但不必担心，因为所有的 Vue.js 事件处理方法和表达式都严格绑定在当前视图的 ViewModel 上，它不会导致任何维护上的困难。实际上，使用 v-on 有几个好处：

   扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。

   因为你无须在 JavaScript 里手动绑定事件，你的 ViewModel 代码可以是非常纯粹的逻辑，和 DOM 完全解耦，更易于测试。

   当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除。你无须担心如何清理它们。