Vue之系统指令2

Posted 2020-12-13 dangjf

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue之系统指令2相关的知识，希望对你有一定的参考价值。

一、v-model：双向数据绑定

> 重点：**双向数据绑定，只能用于表单元素，或者用于自定义组件**。

之前的文章里，我们通过v-bind，给`<input>`标签绑定了`data`对象里的`name`属性。当`data`里的`name`的值发生改变时，`<input>`标签里的内容会自动更新。

可我现在要做的是：我在`<input>`标签里修改内容，要求`data`里的`name`的值自动更新。从而实现双向数据绑定。该怎么做呢？这就可以利用`v-model`这个属性。

**区别**：

- v-bind：只能实现数据的**单向**绑定，从 M 自动绑定到 V。

- v-model：只有`v-model`才能实现**双向**数据绑定。注意，v-model 后面不需要跟冒号，

**注意**：v-model 只能运用在**表单元素**中，或者用于自定义组件。常见的表单元素包括：input(radio, text, address, email....) 、select、checkbox 、textarea。

代码举例如下：

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">

</form>
</div>
</body>

</html>
```

此时，便可实现我们刚刚要求的双向数据绑定的效果。

## v-model举例：实现简易计算器

题目：现在两个输入框，用来做加减乘除，将运算的结果放在第三个输入框。

实现代码如下：

```html
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="vue2.5.16.js"></script>
</head>

//上面的逻辑判断，可能有点啰嗦，我们还可以采取下面的这种方式进行逻辑判断
// 注意：这是投机取巧的方式，正式开发中，尽量少用
// var codeStr = ‘parseInt(this.n1) ‘ + this.opt + ‘ parseInt(this.n2)‘
// this.result = eval(codeStr)
}
}
});
</script>
</body>

</html>
```

注意上方代码中的注释，可以了解下`eval()`的用法。

二、Vue中通过属性绑定为元素设置class 类样式

注意，是**类样式**。

1、引入

我们先来看下面这段代码：

```html
<!DOCTYPE html>
<html lang="en">

.my-thin {
/* 设置字体的粗细 */
font-weight: 200;
}

.my-italic {
font-style: italic;
}

.my-active {
/* 设置字符之间的间距 */
letter-spacing: 0.5em;
}
</style>
</head>

<body>
<h1 class="my-red my-thin">abc，smyhvae</h1>
</body>

</html>
```

上面的代码中，我们直接通过正常的方式，给`<h1>`标签设置了两个 class 类的样式。代码抽取如下：

```html
<h1 class="my-red my-thin">abc，smyhvae</h1>
```

上面的效果，我们还可以用Vue来写。

方式一：数组

**方式一**：直接传递一个数组。注意：这里的 class 需要使用 v-bind 做数据绑定。

代码如下：

```html
<!DOCTYPE html>
<html lang="en">

.my-thin {
/* 设置字体的粗细 */
font-weight: 200;
}

.my-italic {
font-style: italic;
}

.my-active {
/* 设置字符之间的间距 */
letter-spacing: 0.5em;
}
</style>
</head>

<h1 class="my-red my-thin">abc，smyhvae</h1>

<h1 :class="[‘my-red‘, ‘my-thin‘]">我是smyhvae，abc</h1>

</div>

var vm = new Vue({
el: ‘#app‘
});

</script>
</body>

</html>
```

代码抽取如下：

```html

<h1 :class="[‘my-red‘, ‘my-thin‘]">我是smyhvae，abc</h1>
```

上方代码中，注意，数组里写的是字符串；如果不加单引号，就不是字符串了，而是变量。

写法二：在数组中使用三元表达式

```html
<body>
<div id="app">


<h1 :class="[flag?‘my-active‘:‘‘]">我是smyhvae，生命壹号</h1>
</div>

上方代码的意思是，通过data中布尔值 flag 来判断：如果 flag 为 true，就给 h1 标签添加`my-active`样式；否则，就不设置样式。

注意，三元表达式的格式不要写错了。

写法三：在数组中使用对象来代替三元表达式（提高代码的可读性）

上面的写法二，可读性较差。于是有了写法三。

**写法三**：在数组中使用**对象**来代替**三元表达式**。

代码如下：

```html
<body>
<div id="app">

<h1 :class="[ {‘my-active‘:flag} ]">我是smyhvae，生命壹号</h1>
</div>

写法四：直接使用对象

写法四：直接使用对象。代码如下：

```html


<h1 :class="{style1:true, style2:false}">我是smyhvae，abc</h1>

```

上方代码的意思是，给`<h1>`标签使用样式`style1`，不使用样式`style2`。注意：

1、既然class样式名是放在对象中的，这个样式名不能有中划线，比如说，写成`:class="{my-red:true, my-active:false}`，是会报错的。

2、我们也可以对象通过存放在 data 的变量中。也就是说，上方代码可以写成：

```html
<body>
<div id="app">


<h1 :class="classObj">我是smyhvae，abc</h1>
</div>

三、Vue中通过属性绑定为元素设置 style 行内样式

注意，是行内样式（即内联样式）。

### 写法一

**写法一**：直接在元素上通过 `:style` 的形式，书写样式对象。

例如：

```html
<h1 :style="{color: ‘red‘, ‘font-size‘: ‘20px‘}">abc，smyhvae</h1>
```

### 写法二

**写法二**：将样式对象，定义到 `data` 中，并直接引用到 `:style` 中。

也就是说，把写法一的代码改进一下。代码如下：

```html
<body>
<div id="app">
<h1 :style="styleObj">我是abc，smyhvae</h1>
</div>

写法三

写法二只用到了一组样式。如果想定义**多组**样式，可以用写法三。

**写法三**：在 `:style` 中通过数组，引用多个 `data` 上的样式对象。

代码如下：

```html
<body>
<div id="app">
<h1 :style="[ styleObj1, styleObj2 ]">我是abc，smyhvae</h1>
</div>

四、v-for：for循环的四种使用方式

**作用**：根据数组中的元素遍历指定模板内容生成内容。

1、引入

比如说，如果我想给一个`ul`中的多个`li`分别赋值1、2、3...。如果不用循环，就要挨个赋值：

```html
<body>
<div id="app">
<ul>
<li>{{list[0]}}</li>
<li>{{list[1]}}</li>
<li>{{list[2]}}</li>
</ul>
</div>
</body>

});
</script>
```

为了实现上面的效果，如果我用`v-for`进行赋值，代码就简洁很多了：

```html
<body>
<div id="app">
<ul>

<li v-for="item in list">{{item}}</li>
</ul>
</div>
</body>

});
</script>
```

接下来，我们详细讲一下`v-for`的用法。需要声明的是，Vue 1.0的写法和Vue 2.0的写法是不一样的。本文全部采用Vue 2.0的写法。

方式一：普通数组的遍历

针对下面这样的数组：

```html
<script>
new Vue({
el: ‘#app‘,
data: {
arr1: [2, 5, 3, 1, 1],
}
});
</script>
```

将数组中的**值**赋给li：

```html
<li v-for="item in arr1">{{item}}</li>
```

将数组中的**值和index**赋给li：

```html

<li v-for="(item,index) in arr1">值：{{item}} --- 索引：{{index}}</li>
```

方式二：对象数组的遍历

```html
<!DOCTYPE html>
<html lang="en">

<body>
<div id="app">
<ul>

<li v-for="(item, index) in dataList">姓名：{{item.name}} --- 年龄：{{item.age}} --- 索引：{{index}}</li>

</ul>
</div>

</html>

```

方式三：对象的遍历

针对下面这样的对象：

```html
<script>
new Vue({
el: ‘#app‘,
data: {
obj1: {
name: ‘smyhvae‘,
age: ‘26‘,
gender: ‘男‘
}
}
});
</script>
```

将上面的`obj1`对象的数据赋值给li，写法如下：

```html
<body>
<div id="app">
<ul>

<li v-for="(value,key) in obj1">值：{{value}} --- 键：{{key}} </li>

<li v-for="(value,key,index) in obj1">值：{{value}} --- 键：{{key}} --- index：{{index}} </li>
</ul>
</div>
</body>

```

方式四：遍历数字

`in`后面还可以直接放数字。举例如下：

```html
<ul>


<li v-for="myCount in 10">这是第 {{myCount}}次循环</li>
</ul>
```

v-for中key的使用注意事项

**注意**：在 Vue 2.2.0+ 版本里，当在**组件中**使用 v-for 时，key 属性是必须要加上的。

这样做是因为：每次 for 循环的时候，通过指定 key 来标示当前循环这一项的**唯一身份**。

> 当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用 “**就地复用**” 策略。如果数据项的顺序被改变，Vue将**不是移动 DOM 元素来匹配数据项的顺序**，而是**简单复用此处每个元素**，并且确保它在特定索引下显示已被渲染过的每个元素。

> 为了给 Vue 一个提示，**以便它能跟踪每个节点的身份，从而重用和重新排序现有元素**，你需要为每项提供一个唯一 key 属性。

key的类型只能是：string/number，而且要通过 v-bind 来指定。

代码举例：

```html
<!DOCTYPE html>
<html lang="en">

<p v-for="item in list" :key="item.id">
<input type="checkbox">{{item.id}} --- {{item.name}}
</p>
</div>