初识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的生命周期（钩子函数）

 

转载于:https://www.cnblogs.com/Kong-shuai/p/11448721.html