Vue基础入门学习(三)

Leefs 2019-11-09 PM 1803℃ 0条

# Vue基础入门学习(三)

### 1. 基本指令

`v-model:`可以实现**表单元素**和**Model中数据**的双向数据绑定

```html
<input type="text" style="width:100%;" v-model="msg">
```

v-bind:只能实现数据的单向绑定，从 M 自动绑定到 V， 无法实现数据的双向绑定

```html
<input type="text" v-bind:value="msg" style="width:100%;">
```

也就是说，`v-model`指令可以实现在Model中改变数据，同时View中的数据也会改变，在View中改变数据，同时Model中的数据也会发生相同变化。

*注意：v-model只能运用在表单元素中*

**表单元素**

> input(radio, text, address, email....)   select    checkbox   textarea ......

### 2. class样式使用

1. 1.数组

```html
<h1 :class="['red', 'thin']">李林超博客</h1>
```

2. 2.数组中使用三元表达式

```html
<h1 :class="['red', 'thin', isactive?'active':'']">李林超博客</h1>
```

3. 3.数组中嵌套对象

```html
<h1 :class="['red', 'thin', {'active': isactive}]">李林超博客</h1>
```

4. 4.直接使用对象

```html
<h1 :class="{red:true, italic:true, active:true, thin:true}">李林超博客</h1>
```

### 3. 使用内联样式

1. 1.直接在元素上通过`:style`的形式，书写样式对象

```html
<h1 :style="{color: 'red', 'font-size': '40px'}">李林超博客</h1>
```

2. 2.将样式对象，定义到data中，并直接引用到`:style`中

+ 在data上定义样式：

```css
data: {
        h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' }
}
```

+ 在元素中，通过属性绑定的形式，将样式对象应用到元素中:

```html
<h1 :style="h1StyleObj">李林超博客</h1>
```

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

+ 在data上定义样式：

```css
data: {
        h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' },
        h1StyleObj2: { fontStyle: 'italic' }
}
```

+ 在元素中，通过属性绑定的形式，将样式对象应用到元素中：

```html
<h1 :style="[h1StyleObj, h1StyleObj2]">李林超博客</h1>
```

### 4. v-for和key属性

1. 1.迭代数组

```html
<div id="app">
    <p v-for="(user, i) in list">Id：{{ user.id }} --- 名字：{{ user.name }} --- 索引：{{i}}</p>
  </div>
```

创建一个`Vue`实例，得到`ViewModel`

```javascript
<script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        list: [
          { id: 1, name: 'zs1' },
          { id: 2, name: 'zs2' },
          { id: 3, name: 'zs3' },
          { id: 4, name: 'zs4' }
        ]
      },
      methods: {}
    });
  </script>
```

2. 2.迭代对象中的属性

```html
<div id="app">
    
    <p v-for="(val, key, i) in user">值是： {{ val }} --- 键是： {{key}} -- 索引： {{i}}</p>
</div>
```

创建一个`Vue`实例，得到`ViewModel`

```javascript
<script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
        el: '#app',
        data: {
            user: {
                id: 1,
                name: '托尼·屎大颗',
                gender: '男'
            }
        },
        methods: {}
    });
</script>
```

3. 3.迭代数字

```html
<div id="app">
    
    
    <p v-for="count in 10">这是第 {{ count }} 次循环</p>
</div>
```

创建一个`Vue`实例，得到`ViewModel`

```javascript
<script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {}
    });
</script>
```

4. 4.v-for循环中key属性的使用

```html
<div id="app">
    <div>
        <label>Id:
            <input type="text" v-model="id">
        </label>

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

创建一个`Vue`实例，得到`ViewModel`

```javascript
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            id: '',
            name: '',
            list: [
                { id: 1, name: '李斯' },
                { id: 2, name: '嬴政' },
                { id: 3, name: '赵高' },
                { id: 4, name: '韩非' },
                { id: 5, name: '荀子' }
            ]
        },
        methods: {
            add() { // 添加方法
                this.list.unshift({ id: this.id, name: this.name })
            }
        }
    });
</script>
```

> 2.2.0+ 的版本里，**当在组件中使用** v-for 时，key 现在是必须的。

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

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

### 5. v-if和v-show

`v-if`与`v-show`都可以动态控制`dom`元素显示隐藏

```html
<h3 v-if="flag">这是用v-if控制的元素</h3>
<h3 v-show="flag">这是用v-show控制的元素</h3>
```

创建一个`Vue`实例，得到`ViewModel`

```html
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            flag: false
        },
        methods: {
        }
    });
</script>
```

**比较**

> v-if 的特点：每次都会重新删除或创建元素
>
> v-show 的特点： 每次不会重新进行DOM的删除和创建操作，只是切换了元素的 display:none 样式
>
> v-if 有较高的切换性能消耗
>
> v-show 有较高的初始渲染消耗

**注意：**

如果元素涉及到频繁的切换，最好不要使用 v-if, 而是推荐使用 v-show

如果元素可能永远也不会被显示出来被用户看到，则推荐使用 v-if

标签: 前端, VUE

非特殊说明，本博所有文章均为博主原创。

如若转载，请注明出处：https://lilinchao.com/archives/138.html

上一篇 Vue基础入门学习(二)

下一篇通过Vue实现简单的计算器

Vue基础入门学习(三)

评论已关闭

栏目分类

标签云

友情链接申请

Vue基础入门学习(三)

评论已关闭

 栏目分类

标签云

友情链接申请

栏目分类

标签云

友情链接申请