侧边栏壁纸
博主头像
soulballad博主等级

技术文章记录及总结

  • 累计撰写 169 篇文章
  • 累计创建 26 个标签
  • 累计收到 4 条评论

目 录CONTENT

文章目录
Vue

2.Vue的基本语法

soulballad
2022-01-17 / 0 评论 / 0 点赞 / 38 阅读 / 8,031 字
温馨提示:
本文最后更新于 2022-05-30,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

1. 插值操作

1.1 Mustache

如何将data中的文本数据,插入到HTML中呢?
可以通过Mustache语法(也就是双大括号)。

<div id="app">
    <h2>{{message}}</h2>
    <h2>{{message}},Vuejs</h2>

    <!--mustache语法中,不仅仅可以直接写变量,也可以写简单的表达式-->
    <h2>{{firstName + lastName}}</h2>
    <h2>{{firstName + ' ' + lastName}}</h2>
    <h2>{{firstName}} {{lastName}}</h2>
    <h2>{{counter * 2}}</h2>
</div>

<script src="../js/vue.js"></script>

<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: '你好啊',
            firstName: 'David',
            lastName: 'King',
            counter: 100
        }
    })
</script>

1.2 v-once

在某些情况下,我们可能不希望界面随意的跟随改变
这个时候,我们就可以使用一个Vue的指令

  • v-once:
    • 该指令后面不需要跟任何表达式(比如之前的v-for后面是由跟表达式的)
    • 该指令表示元素和组件(组件后面才会学习)只渲染一次,不会随着数据的改变而改变。
<div id="app">
    <h2>{{message}}</h2>
    <!-- message内容改变,界面不会重新渲染 -->
    <h2 v-once>{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: '你好啊,Vuejs'
        }
    })
</script>

1.3 v-html

某些情况下,从服务器请求到的数据本身就是一段HTML代码
如果直接通过 {{}} 来输出,会将HTML代码也一起输出。

  • 如果我们希望解析出HTML展示,可以使用v-html指令
  • 该指令后面往往会跟上一个string类型
  • 会将string的html解析出来并且进行渲染
<div id="app">
    <h2>{{url}}</h2>
    <h2 v-html="url"></h2>
</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            url: '<a href="https://www.baidu.com" class="href">百度一下</a>'
        }
    })
</script>

1.4 v-text

v-text作用和Mustache一致:
v-text通常情况下,接受一个string类型

<div id="app">
    <h2>{{message}}</h2>
    <h2 v-text="message"></h2>
</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: '你好啊,Vuejs'
        }
    })
</script>

1.5 v-pre

  • v-pre用于跳过这个元素和它子元素的编译过程,用于显示原本的Mustache语法。

  • 比如下面的代码:

    • 第一个h2元素中的内容会被编译解析出来对应的内容
    • 第二个h2元素中会直接显示{{message}}
<div id="app">
    <h2>{{message}}</h2>
    <h2 v-pre>{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: '你好啊,Vuejs'
        }
    })
</script>

1.6 v-cloak

某些情况下,我们浏览器可能会直接显然出未编译的Mustache标签

<div id="app" v-cloak>
    <h2>{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
    // 在vue解析之前, div中有一个属性v-cloak
    // 在vue解析之后, div中没有一个属性v-cloak
    setTimeout(() => {
        const app = new Vue({
            el: '#app',
            data: {
                message: '你好啊,Vuejs'
            }
        })
    }, 1000);
</script>

2. 绑定属性

2.1 v-bind介绍

  • 前面学习的指令主要作用是将值插入到我们模板的内容当中。
  • 但是,除了内容需要动态来决定外,某些属性我们也希望动态来绑定。
    • 比如动态绑定a元素的href属性
    • 比如动态绑定img元素的src属性
  • 这个时候,我们可以使用v-bind指令:
    • 作用:动态绑定属性
    • 缩写:
    • 预期:any (with argument) | Object (without argument)
    • 参数:attrOrProp (optional)

2.2 v-bind基础

  • v-bind用于绑定一个或多个属性值,或者向另一个组件传递props值
  • 在开发中,有哪些属性需要动态进行绑定呢?
    • 还是有很多的,比如图片的链接src、网站的链接href、动态绑定一些类、样式等等
  • 比如通过Vue实例中的data绑定元素的src和href,代码如下:
<div id="app">
    <h2>{{message}}</h2>
    <!--错误的做法: 这里不可以使用mustache语法-->
    <!--<img src="{{imageURL}}" alt="" class="src">-->
    <!-- 正确的做法: 使用v-bind指令 -->
    <img v-bind:src="imageURL" alt="">
    <a v-bind:href="aHref">百度一下</a>

    <!--语法糖的写法-->
    <img :src="imageURL" alt="">
    <a :href="aHref">百度一下</a>
</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: '你好啊,Vuejs',
            imageURL: 'https://www.wahaotu.com/uploads/allimg/202011/1605070090394821.jpg',
            aHref: 'http://www.baidu.com'
        }
    })
</script>

2.3 v-bind语法糖

v-bind有一个对应的语法糖,也就是简写方式
在开发中,我们通常会使用语法糖的形式,因为这样更加简洁。

<div id="app">
    <img v-bind:src="imageURL" alt="">
    <!--语法糖的写法-->
    <img :src="imageURL" alt="">
</div>

2.4 v-bind绑定class

  • 很多时候,我们希望动态的来切换class,比如:
    • 当数据为某个状态时,字体显示红色。
    • 当数据另一个状态时,字体显示黑色。
  • 绑定class有两种方式:
    • 对象语法
    • 数组语法

2.4.1 绑定class对象语法

对象语法的含义是 :class 后面跟的是一个对象

对象语法有下面这些用法:

用法一:直接通过{}绑定一个类
<h2 :class="{'active': isActive}">Hello World</h2>

用法二:也可以通过判断,传入多个值
<h2 :class="{'active': isActive, 'line': isLine}">Hello World</h2>

用法三:和普通的类同时存在,并不冲突
注:如果isActive和isLine都为true,那么会有title/active/line三个类
<h2 class="title" :class="{'active': isActive, 'line': isLine}">Hello World</h2>

用法四:如果过于复杂,可以放在一个methods或者computed中
注:classes是一个计算属性
<h2 class="title" :class="classes">Hello World</h2>

案例:

<style>
    .active {
        color: red;
    }
</style>
<div id="app">
    <!--<h2 class="active">{{message}}</h2>-->
    <!--<h2 :class="isActive">{{message}}</h2>-->

    <!--<h2 v-bind:class="{key1: value1, key2: value2">{{message}}</h2>-->
    <!--<h2 v-bind:class="{类名1: true, 类名2: false">{{message}}</h2>-->

    <h2 class="title" v-bind:class="{active:isActive, line:isLine}">{{message}}</h2>
    <h2 class="title" v-bind:class="getClasses()">{{message}}</h2>
    <button v-on:click="btnClick">按钮</button>
</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: '你好啊,Vuejs',
            isActive: true,
            isLine: true
        },
        methods: {
            btnClick: function () {
                this.isActive = !this.isActive;
            },
            getClasses: function () {
                return {active: this.isActive, line: this.isLine};
            }
        }
    })
</script>

2.4.2 绑定class数组语法

数组语法的含义是 :class 后面跟的是一个数组

数组语法有下面这些用法:

用法一:直接通过{}绑定一个类
<h2 :class="['active']">Hello World</h2>

用法二:也可以传入多个值
<h2 :class=“[‘active’, 'line']">Hello World</h2>

用法三:和普通的类同时存在,并不冲突
注:会有title/active/line三个类
<h2 class="title" :class=“[‘active’, 'line']">Hello World</h2>

用法四:如果过于复杂,可以放在一个methods或者computed中
注:classes是一个计算属性
<h2 class="title" :class="classes">Hello World</h2>

案例:

<div id="app">
    <!-- 除了动态绑定的样式,还可以设置固定样式 -->
    <h2 class="title" :class="[active, title]">{{message}}</h2>
    <h2 class="title" :class="getClasses()">{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: '你好啊,Vuejs',
            active: 'aaaaaa',
            line: 'bbbbbb'
        },
        methods: {
            getClasses: function () {
                return [this.active, this.line];
            }
        }
    })
</script>

2.5 v-bind绑定style

  • 我们可以利用 v-bind:style 来绑定一些CSS内联样式。
  • 在写CSS属性名的时候,比如 font-size
    • 我们可以使用驼峰式 (camelCase) fontSize
    • 或短横线分隔 (kebab-case,记得用单引号括起来) 'font-size'
  • 绑定class有两种方式:
    • 对象语法
    • 数组语法

2.5.1 绑定style对象语法

:style=“{color: currentColor, fontSize: fontSize + ‘px’}”

  • style后面跟的是一个对象类型
    • 对象的key是CSS属性名称
    • 对象的value是具体赋的值,值可以来自于data中的属性
<div id="app">
    <!--<h2 :style="{key:val}">{{message}}</h2>-->
    <!--'50px'必须加上单引号, 否则是当做一个变量去解析-->
    <h2 :style="{fontSize: '50px'}">{{message}}</h2>
    <!--finalSize当成一个变量使用-->
    <h2 :style="{fontSize: this.finalSize + 'px', color: this.finalColor}">{{message}}</h2>
    <h2 :style="getStyles()">{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: '你好啊,Vuejs',
            finalSize: 100,
            finalColor: 'red'
        },
        methods: {
            getStyles: function () {
                return {fontSize: this.finalSize + 'px', backgroundColor: this.finalColor}
            }
        }
    })
</script>

2.5.2 绑定style数组语法

v-bind:style=“[baseStyles, overridingStyles]”

  • style后面跟的是一个数组类型
  • 多个值以,分割即可
<div id="app">
    <h2 :style="[baseColor, baseSize]">{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: '你好啊,Vuejs',
            baseColor: {backgroundColor: 'red'},
            baseSize: {fontSize: '100px'}
        }
    })
</script>

3. 计算属性

3.1 什么是计算属性

  • 在模板中可以直接通过插值语法显示一些data中的数据。
  • 但是在某些情况,我们可能需要对数据进行一些转化后再显示,或者需要将多个数据结合起来进行显示
    • 比如我们有firstName和lastName两个变量,我们需要显示完整的名称。
    • 但是如果多个地方都需要显示完整的名称,我们就需要写多个{{firstName}} {{lastName}}
  • 我们可以将上面的代码换成计算属性:
    • OK,我们发现计算属性是写在实例的computed选项中的
<div id="app">
    <h2>{{firstName + ' ' + lastName}}</h2>
    <h2>{{firstName}} {{lastName}}</h2>
    <h2>{{getFullName()}}</h2>
    <h2>{{fullName}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            firstName: 'David',
            lastName: 'King'
        },
        methods:{
            getFullName: function () {
                return this.firstName + ' ' + this.lastName;
            }
        },
        computed: { // 计算属性()
            fullName: function () {
                return this.firstName + ' ' + this.lastName;
            }
        }
    })
</script>

3.2 计算属性的复杂操作

<div id="app">
    <h2>总价格:{{totalPrice}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            books: [
                {id: 110, name: 'Unix编程艺术', price: 119},
                {id: 111, name: '代码大全', price: 105},
                {id: 112, name: '深入理解计算机原理', price: 88},
                {id: 113, name: '现代操作系统', price: 94}
            ]
        },
        computed: {
            totalPrice: function () {
                let result = 0;
                for (let i = 0; i < this.books.length; i++) {
                    result += this.books[i].price;
                }
                return result;
            }
        }
    })
</script>

3.3 计算属性的get&set

  • 每个计算属性都包含一个getter和一个setter
    • 在上面的例子中,我们只是使用getter来读取。
    • 在某些情况下,你也可以提供一个setter方法(不常用)。
    • 在需要写setter的时候,代码如下

image-20220116134732398

3.4 计算属性的缓存

我们可能会考虑这样的一个问题:

methods和computed看起来都可以实现我们的功能,那么为什么还要多一个计算属性这个东西呢?

原因:计算属性会进行缓存,如果多次使用时,计算属性只会调用一次

4. 事件监听

  • 在前端开发中,我们需要经常和用户交互。
    • 这个时候,我们就必须监听用户发生的时间,比如点击、拖拽、键盘事件等等
    • 在Vue中如何监听事件呢?使用v-on指令
  • v-on介绍
    • 作用:绑定事件监听器
    • 缩写:@
    • 预期:Function | Inline Statement | Object
    • 参数:event

4.1 v-on基础

这里,我们用一个监听按钮的点击事件,来简单看看v-on的使用

<div id="app">
    <h2>{{counter}}</h2>

    <!--<button v-on:click="counter++">+</button>-->
    <!--<button v-on:click="counter&#45;&#45;">-</button>-->
    <!--<button v-on:click="increment">+</button>-->
    <!--<button v-on:click="decrement">-</button>-->
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            counter: 0
        },
        methods: {
            increment() {
                this.counter++;
            },
            decrement() {
                this.counter--;
            }
        }
    })
</script>

4.2 v-on参数

  • 当通过methods中定义方法,以供@click调用时,需要注意参数问题
  • 情况一:如果该方法不需要额外参数,那么方法后的()可以不添加。
    • 但是注意:如果方法本身中有一个参数,那么会默认将原生事件event参数传递进去
  • 情况二:如果需要同时传入某个参数,同时需要event时,可以通过$event传入事件。
<div id="app">
    <!--1.事件调用的方法没有参数-->
    <button @click="btn1Click">按钮1</button>
    <button @click="btn1Click()">按钮1</button>

    <!--2.在事件定义时, 写方法时省略了小括号, 但是方法本身是需要一个参数的, 这个时候, Vue会默认将浏览器生产的event事件对象作为参数传入到方法-->
    <!--<button @click="btn2Click(123)">按钮2</button>-->
    <!--<button @click="btn2Click()">按钮2</button>-->
    <button @click="btn2Click">按钮2</button>

    <!--3.方法定义时, 我们需要event对象, 同时又需要其他参数-->
    <!-- 在调用方式, 如何手动的获取到浏览器参数的event对象: $event-->
    <button @click="btn3Click(abc, $event)">按钮3</button>
</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: '你好啊',
            abc: 123
        },
        methods: {
            btn1Click() {
                console.log("btn1Click");
            },
            btn2Click(event) {
                console.log("btn2Click", event);
            },
            btn3Click(abc, event) {
                console.log("btn3Click", abc, event);
            }
        }
    })
</script>

4.3 v-on修饰符

  • 在某些情况下,我们拿到event的目的可能是进行一些事件处理。
  • Vue提供了修饰符来帮助我们方便的处理一些事件:
    • .stop - 调用 event.stopPropagation()。
    • .prevent - 调用 event.preventDefault()。
    • .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
    • .native - 监听组件根元素的原生事件。
    • .once - 只触发一次回调。

image-20220116172812559

<div id="app">
    <!--1. .stop修饰符的使用-->
    <div @click="divClick">
        <button @click.stop="btnClick">按钮</button>
    </div>

    <br>
    <!--2. .prevent修饰符的使用-->
    <form action="baidu">
        <input type="submit" value="提交" @click.prevent="submitClick">
    </form>

    <!--3. .监听某个键盘弹起-->
    <input type="text" @keyup.enter="keyUp">

    <!--4. .once修饰符的使用-->
    <button @click.once="btn2Click">按钮2</button>
</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: '你好啊'
        },
        methods: {
            btnClick() {
                console.log("btnClick");
            },
            divClick() {
                console.log("divClick");
            },
            submitClick() {
                console.log("submitClick");
            },
            keyUp() {
                console.log("keyUp");
            },
            btn2Click() {
                console.log("btn2Click");
            }
        }
    })
</script>

5. 条件判断

  • v-if、v-else-if、v-else
    • 这三个指令与JavaScript的条件语句if、else、else if类似。
    • Vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件

5.1 条件判断用法

  • v-if的原理:
    • v-if后面的条件为false时,对应的元素以及其子元素不会渲染。
    • 也就是根本没有不会有对应的标签出现在DOM中
<div id="app">
    <h2 v-if="score>=90">优秀</h2>
    <h2 v-else-if="score>=80">良好</h2>
    <h2 v-else-if="score>=60">及格</h2>
    <h2 v-else>不及格</h2>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            score: 99
        }
    })
</script>

5.2 条件判断案例

需求:用户在登录时,可以切换使用用户账号登录还是邮箱地址登录

<div id="app">
    <span v-if="isUser">
        <label for="username">用户账号</label>
        <input type="text" id="username" placeholder="用户账号">
    </span>
    <span v-else>
        <label for="email">用户邮箱</label>
        <input type="text" id="email" placeholder="用户邮箱">
    </span>
    <button @click="isUser = !isUser">切换类型</button>
</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            isUser: true
        }
    })
</script>
  • 小问题
    • 如果我们在有输入内容的情况下,切换了类型,我们会发现文字依然显示之前的输入的内容。
    • 但是按道理讲,我们应该切换到另外一个input元素中了。
    • 在另一个input元素中,我们并没有输入内容。
    • 为什么会出现这个问题呢?
  • 问题解答:
    • 这是因为Vue在进行DOM渲染时,出于性能考虑,会尽可能的复用已经存在的元素,而不是重新创建新的元素。
    • 在上面的案例中,Vue内部会发现原来的input元素不再使用,直接作为else中的input来使用了。
  • 解决方案:
    • 如果我们不希望Vue出现类似重复利用的问题,可以给对应的input添加key
    • 并且我们需要保证key的不同

image-20220116174931869

5.3 v-show

  • v-show的用法和v-if非常相似,也用于决定一个元素是否渲染:
  • v-if和v-show对比
    • v-if和v-show都可以决定一个元素是否渲染,那么开发中我们如何选择呢?
    • v-if当条件为false时,压根不会有对应的元素在DOM中。
    • v-show当条件为false时,仅仅是将元素的display属性设置为none而已。
  • 开发中如何选择呢?
    • 当需要在显示与隐藏之间切片很频繁时,使用v-show
    • 当只有一次切换时,通过使用v-if
<div id="app">
    <!--v-if: 当条件为false时, 包含v-if指令的元素, 根本就不会存在dom中-->
    <h2 v-if="isShow" id="aaa">{{message}}</h2>

    <!--v-show: 当条件为false时, v-show只是给我们的元素添加一个行内样式: display: none-->
    <h2 v-show="isShow" id="bbb">{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: '你好啊',
            isShow: true
        }
    })
</script>

6. 循环遍历

<li v-for="item in movies">{{item}}</li>
  • 当我们有一组数据需要进行渲染时,我们就可以使用v-for来完成。
    • v-for的语法类似于JavaScript中的for循环。
    • 格式如下:item in items的形式

6.1 遍历数组

<div id="app">
    <!--1.在遍历的过程中,没有使用索引值(下标值)-->
    <ul>
        <li v-for="item in names">{{item}}</li>
    </ul>

    <!--2.在遍历的过程中, 获取索引值-->
    <ul>
        <li v-for="(name, index) in names">{{index + 1}}.{{name}}</li>
    </ul>
</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            names: ['why', 'kobe', 'james', 'curry']
        }
    })
</script>

6.2 遍历对象

<div id="app">
    <!--1.在遍历对象的过程中, 如果只是获取一个值, 那么获取到的是value-->
    <ul>
        <li v-for="item in info">{{item}}</li>
    </ul>

    <!--2.获取key和value 格式: (value, key) -->
    <ul>
        <li v-for="(value, key) in info">{{value}}-{{key}}</li>
    </ul>

    <!--3.获取key和value和index 格式: (value, key, index) -->
    <ul>
        <li v-for="(value, key, index) in info">{{value}}-{{key}}-{{index}}</li>
    </ul>
</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            info: {
                name: 'why',
                age: 18,
                height: 1.88
            }
        }
    })
</script>

6.3 组件的key属性

  • 官方推荐我们在使用v-for时,给对应的元素或组件添加上一个:key属性。
  • 为什么需要这个key属性呢(了解)?
    • 这个其实和Vue的虚拟DOM的Diff算法有关系。
    • 这里我们借用 React’s diff algorithm 中的一张图来简单说明一下:
  • 当某一层有很多相同的节点时,也就是列表节点时,我们希望插入一个新的节点
    • 我们希望可以在B和C之间加一个F,Diff算法默认执行起来是这样的。
    • 即把C更新成F,D更新成C,E更新成D,最后再插入E,是不是很没有效率?
  • 所以我们需要使用key来给每个节点做一个唯一标识
    • Diff算法就可以正确的识别此节点
    • 找到正确的位置区插入新的节点。
  • 所以一句话,key的作用主要是为了高效的更新虚拟DOM

image-20220116180518538

6.4 检测数组的更新

  • 因为Vue是响应式的,所以当数据发生变化时,Vue会自动检测数据变化,视图会发生对应的更新。
  • Vue中包含了一组观察数组编译的方法,使用它们改变数组也会触发视图的更新。
methods: {
    btnClick() {
        // 1.push方法
        // this.letters.push('aaa');
        // this.letters.push('aaa', 'bbb', 'ccc');

        // 2.pop(): 删除数组中的最后一个元素
        // this.letters.pop();

        // 3.shift(): 删除数组中的第一个元素
        // this.letters.shift();

        // 4.unshift(): 在数组最前面添加元素
        // this.letters.unshift();
        // this.letters.unshift('aaa', 'bbb', 'ccc');

        // 5.splice作用: 删除元素/插入元素/替换元素
        // 删除元素: 第二个参数传入你要删除几个元素(如果没有传,就删除后面所有的元素)
        // 替换元素: 第二个参数, 表示我们要替换几个元素, 后面是用于替换前面的元素
        // 插入元素: 第二个参数, 传入0, 并且后面跟上要插入的元素
        // this.letters.splice(1, 1, 'x', 'y', 'z');

        // 6.sort
        // this.letters.sort();

        // 7.reverse
        // this.letters.reverse();

        // 不是响应式
        this.letters[1] = 'eee';
        // set(要修改的对象, 索引值, 修改后的值)
        // Vue.set(this.letters, 0, 'dddd');
    }
}

7. v-model双向绑定

7.1 v-model基础

  • 表单控件在实际开发中是非常常见的。特别是对于用户信息的提交,需要大量的表单。
  • Vue中使用v-model指令来实现表单元素和数据的双向绑定。
<div id="app">  
 <h2>{{message}}</h2>  
 <input type="text" v-model="message">  
</div>  
  
<script src="../js/vue.js"></script>  
<script>  
	 const app = new Vue({  
		el: '#app',  
		data: {  
			message: '你好啊'  
	 	}  
	 })
 </script>
  • 案例的解析:
    • 当我们在输入框输入内容时
    • 因为input中的v-model绑定了message,所以会实时将输入的内容传递给message,message发生改变。
    • 当message发生改变时,因为上面我们使用Mustache语法,将message的值插入到DOM中,所以DOM会发生响应的改变。
    • 所以,通过v-model实现了双向的绑定。
  • 当然,我们也可以将v-model用于textarea元素

7.2 v-model原理

  • v-model其实是一个语法糖,它的背后本质上是包含两个操作:
      1. v-bind绑定一个value属性
      1. v-on指令给当前元素绑定input事件
  • 也就是说下面的代码:等同于下面的代码:
<input type="text" v-model="message">
等同于
<input type="text" v-bind:value="message" v-on:input="message = $event.target.value">
<div id="app">  
	<h2>{{message}}</h2>  
	<input type="text" v-model="message">  
	<input type="text" :value="message" @input="message = $event.target.value">  
	<input type="text" :value="message" @input="valueChange">  
</div>  
  
<script src="../js/vue.js"></script>  
<script>  
	 const app = new Vue({  
		 el: '#app',  
		 data: {  
		 	message: '你好啊'  
		 },  
		 methods: {  
			 valueChange(event) {  
			 	this.message = event.target.value;  
			 } 
		 } 
	 })
 </script>

7.3 v-model绑定radio

当存在多个单选框时

<div id="app">  
	<label for="male" >  
		<input type="radio" id="male" value="男" v-model="sex">男  
	</label>  
	<label for="female">  
		<input type="radio" id="female" value="女" v-model="sex">女  
	</label>  
	<h2>您选择的性别是:{{sex}}</h2>  
</div>  

<script src="../js/vue.js"></script>  
<script>  
	const app = new Vue({  
		el: '#app',  
		data: {  
			message: '你好啊',  
			sex: '女'  
		}  
	})
</script>

7.4 v-model绑定checkbox

  • 复选框分为两种情况:单个勾选框和多个勾选框

  • 单个勾选框:

    • v-model即为布尔值。
    • 此时input的value并不影响v-model的值。
    <!--1.checkbox单选框-->
    <label for="agree">  
    	<input type="checkbox" id="agree" v-model="isAgree">同意协议  
    	<h2>您选择的是:{{isAgree}}</h2>  
    	<button :disabled="!isAgree">下一步</button>  
    </label>
    
  • 多个复选框:

    • 当是多个复选框时,因为可以选中多个,所以对应的data中属性是一个数组。
    • 当选中某一个时,就会将input的value添加到数组中。
     <!--2.checkbox多选框-->
    <input type="checkbox" value="篮球" v-model="hobbies">篮球
    <input type="checkbox" value="足球" v-model="hobbies">足球
    <input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球
    <input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球
    <h2>您的爱好是: {{hobbies}}</h2>
    

完整内容

<div id="app">
	<!-- 1.checkbox 单选框-->  
	<label for="agree">  
	 <input type="checkbox" id="agree" v-model="isAgree">同意协议  
	 <h2>您选择的是:{{isAgree}}</h2>  
	 <button :disabled="!isAgree">下一步</button>  
	</label>  
	<br>  

	<!-- 2.checkbox 多选框 -->  
	<input type="checkbox" value="篮球" v-model="hobbies">篮球  
	<input type="checkbox" value="足球" v-model="hobbies">足球  
	<input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球  
	<input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球  
	<h2>您的爱好是:{{hobbies}}</h2>  
	<br>
	<label v-for="item in originHobbies" :for="item">  
	<input type="checkbox" :value="item" :id="item" v-model="hobbies">  
	{{item}}  
	</label>  
</div>  
  
<script src="../js/vue.js"></script>  
<script>  
	const app = new Vue({  
		el: '#app',  
		data: {  
			message: '你好啊',  
			isAgree: false,  
			hobbies: [],  
			originHobbies: ['篮球', '足球', '乒乓球', '羽毛球', '台球', '高尔夫球']  
		} 
	})
 </script>

7.5 v-model绑定select

  • 和checkbox一样,select也分单选和多选两种情况。
  • 单选:只能选中一个值。
    • v-model绑定的是一个值。
    • 当我们选中option中的一个时,会将它对应的value赋值到mySelect中
  • 多选:可以选中多个值。
    • v-model绑定的是一个数组。
    • 当选中多个值时,就会将选中的option对应的value添加到数组mySelects中
<div id="app">  
	<!-- 1.选择一个 -->  
	<select name="abc" v-model="fruit">  
	<option value="苹果">苹果</option>  
	<option value="香蕉">香蕉</option>  
	<option value="榴莲">榴莲</option>  
	<option value="葡萄">葡萄</option>  
	</select>  
	<h2>您选择的水果是:{{fruit}}</h2>  
	<br>  

	<!--2.选择多个 multiple--> <select name="abc" v-model="fruits" multiple>  
	<option value="苹果">苹果</option>  
	<option value="香蕉">香蕉</option>  
	<option value="榴莲">榴莲</option>  
	<option value="樱桃">樱桃</option>  
	</select>  
	<h2>您选择的水果是:{{fruits}}</h2>  
</div>  
  
<script src="../js/vue.js"></script>  
<script>  
	const app = new Vue({  
		el: '#app',  
		data: {  
			message: '你好啊',  
			fruit: '香蕉',  
			fruits: []  
		} 
	})
 </script>

7.6 v-model修饰符

  • lazy修饰符:
    • 默认情况下,v-model默认是在input事件中同步输入框的数据的。
    • 也就是说,一旦有数据发生改变对应的data中的数据就会自动发生改变。
    • lazy修饰符可以让数据在失去焦点或者回车时才会更新:
  • number修饰符:
    • 默认情况下,在输入框中无论我们输入的是字母还是数字,都会被当做字符串类型进行处理。
    • 但是如果我们希望处理的是数字类型,那么最好直接将内容当做数字处理。
    • number修饰符可以让在输入框中输入的内容自动转成数字类型:
  • trim修饰符:
    • 如果输入的内容首尾有很多空格,通常我们希望将其去除
    • trim修饰符可以过滤内容左右两边的空格
<div id="app">  
	<!--1.修饰符: lazy-->  
	<input type="text" v-model.lazy="message">  
	<h2>{{message}}</h2>  

	<!--2.修饰符: number-->  
	<input type="text" v-model.number="age">  
	<h2>{{age}}-{{typeof age}}</h2>  

	<!--3.修饰符: trim-->  
	<input type="text" v-model.trim="name">  
	<h2>您输入的名字是:{{name}}</h2>  
</div>  

<script src="../js/vue.js"></script>  
<script>  
	const app = new Vue({  
		el: '#app',  
		data: {  
			message: '你好啊',  
			age: 0,  
			name: ''  
		}  
	})
</script>
0

评论区