Vue的基本使用

Vue的基本使用

Vue的指令与过滤器

指令的概念

指令（Directives）是vue为开发者提供的模板语法，用于辅助开发者渲染页面的基本结构。

指令的分类

vue中的指令按照不同的用途可以分为6大类：

  • 内容渲染指令
  • 属性绑定指定
  • 事件绑定指令
  • 双向绑定指令
  • 条件渲染指令
  • 列表渲染指令

指令是vue开发中最基础、最常用、最简单的知识点

内容渲染指令

内容渲染指令用来辅助开发者渲染DOM元素的文本内容。

常用的内容渲染指令有如下3个：

  • v-text
  • {
  • v-html
v-text

会覆盖标签中原有的内容

插值表达式

也就是{{}}

专门又来解决v-text会覆盖默认文本的问题

v-html

如果要把包含html标签的字符串渲染为页面的HTML元素，则需要用到v-html这个指令。

在 vue 提供的模板渲染语法中，除了支持绑定简单的数据值之外，还支持JavaScript表达式的运算。

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div :id="'list-'+ id"></div>

属性绑定指令

插值表达是只能用在内容节点而不能用在属性节点。

如果需要为元素的属性动态绑定属性值，则需要用到v-bind属性绑定指令。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input type="text" v-bind:placeholder="tips">
        <br>
        <hr>

        <!-- v-bind 可以简写为 : -->
        <img :src="photo" alt="" style="width: 100px; height: 100px;">
    </div>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                tips: "Please input username",
                photo: "https://cn.vuejs.org/images/logo.svg"
            }
        })
    </script>
</body>
</html>

v-bind 可以简写为 :

绑定的内容如果需要拼接，则字符串的外面应该包裹单引号

v-bind会作为js表达式被解析

事件绑定指令

vue 提供了 v-on事件绑定指令，用来辅助程序员为 DOM 元素绑定事件监听。

在methods中定义事件处理函数，格式如下：

methods: {
    add: funtion() {
        
    }
}

其简写形式：

methods: {
    add() {}
}

在methods方法中，可以使用创建的实例对象（vm或this）来访问数据源。

在绑定事件处理函数的时候，可以使用()传递参数

v-on:可以简写为@

事件对象$event
事件修饰符

在事件处理函数中调用event.preventDefault()或event.stopPropagation()是非常常见的需求。因此，vue提供了时间修饰符的概念，来辅助程序员更方便地对事件的出发进行控制。

事件修饰符 说明
.prevent 阻止默认行为
.stop 阻止事件冒泡
.capture 以捕获模式出发当前的事件处理函数
.once 绑定的事件只触发一次
.self 只有在event.target是当前元素自身是出发事件处理函数
按键修饰符

在监听键盘事件时，我们经常需要判断详细的按键。此时，可以为键盘相关的事件添加按键修饰符。

双向数据绑定指令

vue提供了v-model双向数据绑定指令，用来辅助开发者不操作DOM的前提下，快速获取表单的数据。

v-model只能和一些表单元素使用才有意义

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件绑定指令</title>
</head>
<body>
    <div id="app">
        <input type="text" v-model="username">
        <p>用户名：{{username}}</p>
    </div>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                username: 'zihoo'
            },
            // 定义事件处理函数
            methods: {
                
            }
        })
    </script>
</body>
</html>
指令修饰符

为了方便对用户输入的内容进行处理，vue为v-model指令提供了3个修饰符，分别是：

修饰符 作用 示例
.number 自动将用户的输入值转为数值类型
.trim 自动过滤用户输入的首尾空白字符
.lazy 在”change“时而非”input“时更新 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-model的修饰符</title>
</head>
<body>
    <div id="app">
        <div>
            <h4>.number</h4>
            <input type="text" v-model.number="num1"> + <input type="text" v-model.number="num2"> = {{num1 + num2}}
        </div>

        <div>
            <h4>.trim</h4>
            <input type="text" v-model.trim="username">
            <button @click="showName">获取用户名</button>
        </div>

        <div>
            <h4>.lazy</h4>
            <p>data不会实时改变，当输入框失去焦点时，数据同步</p>
            <input type="text" v-model.lazy="username">
        </div>
    </div>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                num1: 0,
                num2: 0,
                username: ''
            },
            // 定义事件处理函数
            methods: {
                showName() {
                    alert("username ==>" + this.username)
                }
            }
        })
    </script>
</body>
</html>

条件渲染指令

v-if 会动态添加或删除元素

v-show 使用display: none来隐藏元素

v-if的配套指令
  • v-else-if
  • v-else
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-model的修饰符</title>
</head>
<body>
    <div id="app">
        <div>
            <h4>v-if和v-show的区别</h4>
            <p v-if="flag">v-if 的条件渲染</p>
            <p v-show="flag">v-show 的条件渲染</p>
        </div>

        <div>
            <h4>v-if的配套语法</h4>
            <div v-if="type === 'A'">优秀</div>
            <div v-else-if="type === 'B'">良好</div>
            <div v-else-if="type === 'C'">一般</div>
            <div v-else>差</div>
        </div>
    </div>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                flag: true,
                type: 'A'
            },
            // 定义事件处理函数
            methods: {
                
            }
        })
    </script>
</body>
</html>

列表渲染指令

vue提供了v-for列表渲染指令，用来辅助开发者基于一个数组来循环渲染一个列表结构。

v-for指令需要使用item in items形式的特殊语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-model的修饰符</title>
</head>
<body>
    <div id="app">
        <table>
            <thead>
                <tr>
                    <th>序号</th>
                    <th>id</th>
                    <th>姓名</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item, index in list">
                    <td>{{index + 1}}</td>
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                </tr>
            </tbody>
        </table>
    </div>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                list: [
                    {id: 1, name: 'lisi'},
                    {id: 2, name: 'zhangsan'},
                    {id: 3, name: 'wangwu'}
                ]
            }
        })
    </script>
</body>
</html>

官方简易：只要用到了v-for指令，那么一定要绑定一个:key属性。而且，尽量把id作为key的值。官方对key的值类型也是有要求的，只能是字符串或者数字类型。

过滤器

过滤器(Filters)是Vue为开发者提供的功能，常用于文本的格式化。过滤器可以用在两个地方：插值表达式和v-bind属性绑定

过滤器应该在JavaScript表达式的尾部，由“管道符”进行调用

私有过滤器

一般定义的，在filters节点下定义的过滤器都为私有过滤器

公有过滤器

独立于每个vm实例之外

Vue.filter()方法接收两个参数：

  • 全局过滤器的名字
  • 全局过滤器的处理函数

如果全局过滤器和私有过滤器名字重复，则按照就近原则，优先使用私有过滤器

连续调用多个过滤器

过滤器可以连续调用多个

过滤器传参
<p>
    {{message | filterA(arg1, arg2)}}
</p>

Vue.filter('filterA', (msg, arg1, arg2) => {
	// 过滤器代码逻辑
})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-model的修饰符</title>
</head>
<body>
    <div id="app">
        <h4>过滤器</h4>
        <p>原字符串：{{message}}</p>
        <p>过滤后的字符串：{{message | capitalize}}</p>
    </div>

    <div id="app2">
        <h4>公有过滤器</h4>
        <p>原字符串：{{ message }}</p>
        <p>过滤后的字符串：{{message | capitalize}}</p>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>

        Vue.filter('capitalize', str => {
            return str.toUpperCase() + "~~~"
        })

        const vm = new Vue({
            el: '#app',
            data: {
               message: "hello vue.js"
            },
            // 定义过滤器函数
            filters: {
                // 形参值是管道符前面的值
                capitalize(val) {
                    // 过滤器中一定要有一个返回值
                    return val.toUpperCase()
                }
            }
        })

        const vm2 = new Vue({
            el: '#app2',
            data: {
                message: 'hello vue.js'
            }
        })
    </script>
</body>
</html>
posted @   Gazikel  阅读(201)  评论(0)  编辑  收藏  举报
编辑推荐：
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
点击右上角即可分享
微信分享提示
AI IDE Trae