初识vue 指令 学习分享第二节
vue学习的第二节 （本节简写部分指令，如有错误请联系改正，谢谢。附 官方教程：https://cn.vuejs.org/v2/guide/conditional.html）
1. vue指令：即带有v-前缀的特殊属性。常用指令：v-show 、v-on 、v-for、v-bind 、v-if、v-else、v-else-if、v-model...
2. 指令的用途：当表达式的值改变时，将某些行为应用到DOM上，简化代码更方便的完成业务代码
3. 书写规范：可以写在任意HTML 元素的开始标签内
<p v-if="$imba">狮子王</p>
^-^ :一个开始标签内可以写入多个指令，多个指令间以空格分隔
<li v-for="item in goodslist" :key="item.id" class="flex">{{item.name}}</li>
简写（最喜欢这里了）：v-on简写为 @ v-bind 简写为 ： v-slot简写为 #
<button v-on:click="doThis"></button>
<button @click="doThis"></button>
<img v-bind:src="imageSrc">
<img :src="imageSrc">
<template v-slot:header>
v-slot必须使用在template和自定义组件上，不能使用在普通html标签上
</template>
<template #header>
template是不占用html节点的，因此不会再页面增加html节点的
</template>
指令的简介
v-if 被称为条件渲染指令，可以根据表达式的真假来插入和删除元素，表达式为true时显示为false时隐藏。(和js的if/else很像)
v-else 指令为v-if添加一个else块，v-else元素必须跟在v-if元素的后面，否则不会被识别，这个指令后面也不需要写表达式。
v-show 根据表达式的真假值来切换该元素的display 属性，所以v-show和v-if的区别是 v-show的值为false会渲染页面 只是该元素的css 样式的display 为none，故而页面不显示，而v-if值为false时页面不会被渲染。
v-for 看到for想到js的for循环了吧，没错，它一样是循环。只是必须使用特定语法item in expression，为当前遍历的元素提供别名
1 <div v-for="item in items">
2 {{ item.text }}
3 </div>
4 <div v-for="(item, index) in items"></div>
5 <div v-for="(val, key) in object"></div>
6 <div v-for="(val, name, index) in object"></div>
7
8 <div v-for="item in items" :key="item.id">
9 {{ item.text }} 添加特殊属性key会在优化索引代码，可以提高列表渲染的效率，提高性能
10 如果我们要利用key属性的优点，必须保证同一父元素的所有子元素有不同的key属性！！
11 </div>
v-on 是绑定事件监听器。
用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。
在监听原生 DOM 事件时，方法以事件为唯一的参数。如果使用内联语句，语句可以访问一个 $event属性。
v-on呢还有一些修饰符 比如阻止默认事件阻止冒泡之类的，记得去查哟
1 <button v-on:click="doThis"></button> 2 <button v-on:[event]="doThis"></button> 3 <button v-on:click="doThat('hello', $event)"></button> 4 5 <!-- 缩写 --> 6 <button @click="doThis"></button> 7 8 <!-- 动态事件缩写 (2.6.0+) --> 9 <button @[event]="doThis"></button> 10 11 <!--*** 修饰符 ****停止冒泡 --> 12 <button @click.stop="doThis"></button> 13 14 <!-- 阻止默认行为 --> 15 <button @click.prevent="doThis"></button> 16 <!--对象语法--》 17 <button v-on="{ mousedown: doThis, mouseup: doThat }"></button>
v-model 可以实现数据的双向绑定
当你改变input文本框内的数据时会看到外部的数据也一并被改变了，但是它只能作用于像input这种输入框，像div\p这种是不适用的。
<div id="app"> <input type="text" v-model="Simba">{{Simba}} </div> <script> var vm =new Vue({ el="#app", data{ Simba:"Hello Simba" } })
v-bind 是一种动态绑定指令，可以在其名称后面带一个参数，参数通常是HTML元素的特性，默认情况下自带属性的值是固定的，使用v-bind指令能够动态的改变属性值。方法是 v-bind:属性名=“表达式” 简写为 ：属性名=“表达式”， 表达式这里可以直接写一个变量名也可以写一个简单的表达式
还可以写成数组的样式。
1 <li @click="activeOrderTypeId=item.id"
:class="{active:item.id===activeOrderTypeId}" 2 v-for="item in orderlist" :key="item.id"> 3 {{item.name}} 4 </li>
v-cloak 使用 v-cloak 指令设置样式，这些样式会在 Vue 实例编译结束时，从绑定的 HTML 元素上被移除。当网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染，这时页面就会显示出 Vue 源代码。在简单项目中，使用 v-cloak 指令是解决屏幕闪动的好方法。
1 <div id="app" v-cloak >{{Simba}}... HTML...</div> 2 //下面的是css样式 3 [v-cloak]{display:none}
今天就写到这里咯 下次更新学习内容 Vue的生命周期（钩子函数）
