Vue指令（一）

指令（一）

指令

2.1. v-model 双向数据绑定

ref(https://www.cnblogs.com/goloving/p/9404099.html) <input type="text" ref="name" @keyup="show"/> console.log(this.$refs.name.value);//作用2：获取DOM元素 this.msg=this.$refs.name.value; <input type="text" v-model="title" />

数据 title 更新，视图中 input 的 value 就会更新。同时，当 input 中的 value 更新的时候，数据 title 也会更新，这就是我们说的 数据双向绑定 [与 React 中的受控组件类似]

2.2.v-for 数组，对象，数值 最后一位是索引

<li v-for="(value,index) in arr">{{value}}---{{index}}</li> <li v-for="(value,key,index) in obj">{{value}}--{{key}}----{{index}}</li> <h1 v-for="i in 10">{{i}}</h1> <template v-for="a in arr"> <h1>a</h1> <a href="">a</a> </template>

v-for 中也可以使用 of 语法，在 vue 中两者没有什么区别

：key

默认情况下，在渲染 DOM 过程中使用 原地复用 ，这样一般情况下会比较高效，但是对于循环列表，特别是依赖某种状态的列表，会有一些问题，我们可以通过 :key 属性，来给每个循环节点添加一个标识

1.当在组件中使用v-for 时，key 现在是必须的。 2.当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用 “就地复用 策略。 如果数据项的顺序被改变，Vue将**不是移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素， 并且确保它在特定索引下显示已被渲染过的每个元素。 3.为了给 Vue 一个提示，**以便它能跟踪每个节点的身份，从而重用和重新排序现有元素， 你需要为每项提供一个唯一 key 属性。

2.3.v-bind 绑定属性

缩写

有的一些常用指令会有对应的缩写，v-bind 对应的缩写为：:

<div :id="myId"></div> <a v-bind:href="ahref">baidu</a> 简写：<a :href="ahref">baidu</a> :style="{width:length+'%','background-color':'#ccc'}" :class="[aa,bb,cc]" 变量 :class="{aa:true,bb:true,cc:false}" <img v-for="v in src" :src="'img/'+v"/>

2.3.1样式的使用

### 使用class样式 1. 数组 <h1 :class="['red', 'thin']">这是一个邪恶的H1</h1> 2. 数组中使用三元表达式 <h1 :class="['red', 'thin', isactive?'active':'']">这是一个邪恶的H1</h1> 3. 数组中嵌套对象 <h1 :class="['red', 'thin', {'active': isactive}]">这是一个邪恶的H1</h1> 4. 直接使用对象 <h1 :class="{red:true, italic:true, active:true, thin:true}">这是一个邪恶的H1</h1> ### 使用内联样式 注意：font-size这样的一定要加'' 1. 直接在元素上通过 `:style` 的形式，书写样式对象 <h1 :style="{color: 'red', 'font-size': '40px'}">这是一个善良的H1</h1> 2. 将样式对象，定义到 `data` 中，并直接引用到 `:style` 中 + 在data上定义样式： data: { h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' } } + 在元素中，通过属性绑定的形式，将样式对象应用到元素中： <h1 :style="h1StyleObj">这是一个善良的H1</h1>

3. 在 :style 中通过数组，引用多个 data 上的样式对象

+ 在data上定义样式： data: { h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' }, h1StyleObj2: { fontStyle: 'italic' } } + 在元素中，通过属性绑定的形式，将样式对象应用到元素中： <h1 :style="[h1StyleObj, h1StyleObj2]">这是一个善良的H1</h1>