本文目录

一、Vue的常用特性

一、Vue的常用特性

1.常用特效概览

表单操作
自定义指令
计算属性
侦听器watch
过滤器
Vue生命周期

2.表单操作

2.1 表单常用概览

我们常用表单有：

input type="text"单行输入框
select option选择框
input type="radio"单选框
input type="checkbox"多选框
textarea 多行输入框
input type="submit"提交按钮

2.2 表单实现案例

2.2.1 效果预览

在这里插入图片描述

2.2.2 代码展示与解读

1.代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        form {
    
    
            width: 600px;
            margin: 50px auto 0;
            border: 1px solid #ccc;
            padding: 20px;
        }
        .group {
    
    
            margin-bottom: 10px;
        }
        select {
    
    
            height: 22px;
        }
        textarea {
    
    
            display: block;
        }
        h3 {
    
    
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="app">
        <form>
            <h3>信息提交</h3>
            <div class="group">
                <label for="name">姓名: </label>
                <input id="name" type="text" v-model="info.name">
            </div>
            <div class="group">
                <label for="select">职业: </label>
                <select id="select" v-model="info.value">
                    <option value="前端工程师">前端工程师</option>
                    <option value="后端工程师">后端工程师</option>
                    <option value="全栈工程师">全栈工程师</option>
                </select>
            </div>
            <div class="group">
                <label for="sex">性别: </label>
                <input type="radio" name="sex" id="sex" value="男" v-model="info.sex">男
                <input type="radio" name="sex" id="sex" value="女" v-model="info.sex">女
            </div>
            <div class="group">
                <label for="skill">掌握技能: </label>
                <input type="checkbox" id="skill" value="vue" v-model="info.skill">vue
                <input type="checkbox" id="skill" value="java" v-model="info.skill">java
            </div>
            <div class="group">
                <label for="des">个人简介: </label>
                <textarea id="des" cols="30" rows="10" v-model="info.des"></textarea>
            </div>
            <div class="group">
                <input type="submit" @click.prevent="clickHandler">
            </div>
        </form>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
    <script>
        const vm = new Vue({
    
    
            el: '#app',
            data: {
    
    
               info: {
    
    
                    name: '',
                    value: '',
                    sex: '',
                    skill: [],
                    des: ''
               }
            },
            methods: {
    
    
                clickHandler () {
    
    
                    console.log(this.info)
                }
            }
        })
    </script>
</body>
</html>

2.代码解读：

我们通过Vue指令v-model对各个输入框以及单选框和多选框进行了双向数据的绑定。
在表单的submit提交按钮处用了时间修饰符.prevent阻止表单的默认行为。然后并把表单输入的信息给打印出来了。

2.3 表单域修饰符

2.3.1 .number的使用

.number 表单域修饰符，可以将数字类型的字符串转为数字型。
如下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input type="number" v-model="num">
        <button @click="clickHandler">点击</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
    <script>
        new Vue({
    
    
            el: '#app',
            data: {
    
    
                num: ''
            },
            methods: {
    
    
                clickHandler () {
    
    
                    console.log(typeof this.num)
                }
            }
        })
    </script>
</body>
</html>

我们打开浏览器控制台可以看到输出是的string类型：
在这里插入图片描述
如果此时我们用这个数去做一些计算肯定是不正确的，那么我们可以用表单修饰符将其改为number，如下：

<input type="number" v-model.number="num">

我们给v-model加了修饰符.number，这样的话从这个输入框获取出的值就为number型的，做一些计算肯定就没错了。

2.3.2 .trim的使用

.trim去掉头尾的空格。
我们修改clickHandler函数：

clickHandler () {
    
    
                    console.log(this.num.length)
                }

并且修改input类型：

<input type="text" v-model="num">

可以看到我们输入空格也算一个长度：
在这里插入图片描述
我们加上.trim修饰符：

<input type="text" v-model.trim="num">

在这里插入图片描述
可以看到我们就算在头尾输入再多的空格，也不会算进去。

2.3.3 .lazy的使用

我们知道v-model实际上是绑定的input事件，当我们给v-model加上.lazy修饰符后它将会变为change事件。
使用场景：用户名的校验。

3.自定义指令

1.自定义指令语法
这部分官网介绍的很全，点我开始学习自定义指令

4.计算属性

4.1 计算属性是什么

计算属性就是数据的操作，只有当所跟踪的数据发生改变，计算属性才会发生改变。

4.2 计算属性的使用

计算属性存在在computed字段中，并且需要有返回值，在html上使用时不需要加（）。
代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div>{
    
    {
    
    nameCom}}</div>
        <button @click="name='hello'">改变</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
    <script>
        new Vue({
    
    
            el: '#app',
            data: {
    
    
                name: 'world',
            },
            computed: {
    
    
                nameCom () {
    
    
                    return this.name.split('').reverse().join('')
                }
            }
        })
    </script>
</body>
</html>

效果查看：
在这里插入图片描述
代码解读：

我们可以看到nameCom是定义在computed里面的，并且页面渲染nameCom这个计算属性。
当这个计算属性跟踪的值发生改变时，计算属性也会运行一边，并且页面渲染的是计算属性变化后的值。

4.3 计算属性与方法methods的区别

计算属性需要有返回值。methods不需要有返回值。
计算属性只有在跟踪的值发送改变时才会触发。

5.侦听器watch

5.1 侦听器是什么

侦听器也是数据的操作，但是它命名就是以数据的名称命名。当数据发生改变后会传入两个参数，第一个参数是现在的值，第二个参数是之前的值。
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div>num1: {
    
    {
    
    num}}</div>
        <button @click="num++">改变</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
    <script>
        new Vue({
    
    
            el: '#app',
            data: {
    
    
                num: 0,
            },
            watch: {
    
    
                num (cur, val) {
    
    
                    console.log('cur: ' + cur)
                    console.log('val: ' + val)
                }
            }
        })
    </script>
</body>
</html>

效果如下：
在这里插入图片描述

5.2 侦听器与计算属性的区别

侦听器不需要返回值，计算属性要返回值。
侦听器里写异步操作，计算属性写同步操作。
侦听器函数的名称就是你要侦听那个字段的值。

6.过滤器

6.1 过滤器是什么

过滤器可以格式化数据，格式化时间。

6.2 代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div>{
    
    {
    
    name | up}}</div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
    <script>
        Vue.filter('up', (val) => {
    
    
            return val.toUpperCase()
        })
        new Vue({
    
    
            el: '#app',
            data: {
    
    
                name: 'counterrr'
            }
        })
    </script>
</body>
</html>

效果：
在这里插入图片描述
代码解读：

Vue.filter('up', (val) => {
    
    
            return val.toUpperCase()
        })

定义了全局的过滤器up，第二个参数接收一个函数，这个函数接收一个参数就是你要把过滤器放到哪个插值表达式中，并用 |隔开，表达这个插值表达式中要使用这个过滤器。

7.Vue的生命周期

vue的生命周期具体可以看官网，点我进行查看。

Vue的基础入门之第四篇