Vue基础笔记【前端那些事】

置顶 NextZeros

已于 2023-09-22 16:30:57 修改

阅读量588

点赞数

CC 4.0 BY-SA版权

文章标签： Vue

于 2019-07-02 16:50:27 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_41369866/article/details/94414977

本文深入浅出地介绍了Vue.js的基本概念、核心指令及其用法，包括数据绑定、事件处理、条件渲染等关键特性，适合初学者快速掌握Vue.js的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue基础笔记

定义：【官方定义】

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动

介绍：

渐进式的JavaScript框架

优点

易用灵活高效

Script直接引入

开发版本：包含了完整的警告和调试模式【开发者推荐】

地址：https://vuejs.org/js/vue.js

生产版本：文件的尺寸更加小巧，删除了警告

地址：https://vuejs.org/js/vue.min.js

CDN: 在网络的情况下推荐使用

制作原型或学习

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

使用原生ES Modules

<script type="module">
  import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.esm.browser.js'
</script>

生产环境

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

NPM

使用Vue构建大型应用是推荐使用NPM安装

$ npm install Vue

制作一个简单的Vue实例

<!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>
</head>

<body>
    <div id="app">
        <!-- 插值表达式 -->
        {{msg}}
    </div>
    <!-- 引入Vue.js -->
    <script src="./js/vue.js"></script>
    <script>
        // 构造一个Vue实例
        let vm = new Vue({
            el: '#app',
            data: {
                msg: 'helloworld'
            }
        })
    </script>
</body>

</html>

Vue指令：

v-cloak 解决闪动

v-text 渲染文本

v-html 渲染html标签

v-pre 直接显示原始信息跳过编译

v-once 只会渲染一次

应用场景：[在数据变化频率几乎很少的情况下，可以使用v-once ]

v-cloak 解决闪动

<!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>
    <style>
        /* 样式中使用display:none 将其隐藏 直接将渲染后的数据进行显示 */
        
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <!-- 结构中使用v-cloak-->
    <div v-cloak id="app">
        <!-- 插值表达式 -->
        {{msg}}
    </div>
    <!-- 引入Vue.js -->
    <script src="./js/vue.js"></script>
    <script>
        // 构造一个Vue实例
        let vm = new Vue({
            el: '#app',
            data: {
                msg: 'helloworld'
            }
        })
    </script>
</body>

</html>

v-text 渲染文本

以文本的形式进行渲染，跟插值表达式类似

没有闪动问题

如果里面有标签语句话的，他会把标签语句当做文本进行渲染、解析

v-html 渲染html标签

相比v-text 来说可以将标签语句进行渲染、解析

值得注意的是：v-html 存在安全风险（XSS）

如果涉及到跨域的话，请慎重使用

v-pre 直接显示原始信息跳过编译

显示初始信息，并且对页面不进行渲染

优点：

【加快渲染速度】如果一些静态资源的话，可以使用此指令加快渲染速度

注意事项：

与v-text和v-html不同：v-pre不是写变量的值而是写插值运算符

代码演示

<!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>
</head>

<body>
    <!-- 视图层 -->
    <div id="app">
        <!-- 插值表达式 -->
        <p>{{msg}}</p>
        <!-- v-text -->
        <p v-text='msg'></p>
        <!-- v-html -->
        <p v-html='msg'></p>
        <!-- v-pre 的不同之处是 不写对应的变量名称-->
        <p v-pre>{{msg}}</p>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        // 创建一个VUe实例
        let vm = new Vue({
            el: '#app',
            data: {
                msg: '<h1>welcome to Vue</h1>'
            }
        })
    </script>
</body>

</html>

双向数据绑定

v-model【指令】

当数据发生改变的时候，视图层会根据数据对页面进行重选渲染

当视图中的数据发生变化的时候，数据也会跟着进行同步的变化

v-model 只能在<input>、<select>、<textarea>、<components>中使用

代码演示

<!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>
</head>

<body>
    <div id="app">
        <!-- 当input输入框中的value值进行改变的时候，
            会修改data中的msg，页面中p的msg值也会进行改变 -->
        <p>{{msg}}</p>
        <input type="text" v-model='msg'>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        // 创建vue实例对象
        let vm = new Vue({
            el: '#app',
            data: {
                msg: '这是一个测试的值'
            }
        })
    </script>
</body>

</html>

V-on 【事件绑定】

常规语法 v-on:click

<!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>
</head>

<body>
    <div id="app">
        <p>{{msg}}</p>
        <button v-on:click="msg++">加1</button>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                msg: 0
            }
        })
    </script>

</body>

</html>

简洁语法 @click

<!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>
</head>

<body>
    <div id="app">
        <p>{{msg}}</p>
        <button @click="msg++">加1</button>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                msg: 0
            }
        })
    </script>

</body>

</html>

v-on事件函数中传入参数

v-on:click="调用的函数"

v-on:click="addOne(1)"

<!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>
</head>

<body>
    <div id="app">
        <p>{{msg}}</p>
        <button @click="addOne(1)">加1</button>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        // 构造一个Vue实例对象
        let vm = new Vue({
            el: '#app',
            data: {
                msg: 0
            }, // 注意事项： add结束之后记得加逗号
            // 在methods 中定义一些函数
            methods: {
                addOne: function(num) {
                    // 这里的this 指的是vm的实例对象
                    this.msg += num;
                }
            }
        })
    </script>

</body>

</html>

事件修饰符

在事件处理程序中调用事件对象是我们非常常见的需求

例如： event.prevnetDefault() 阻止默认行为

例如： event.stopPropagation() 阻止事件冒泡

Vue.js 不推荐我们操作DOM 为了解决这个问题 Vue.js提供了是事件修饰符

特点：可以并联使用

<!-- 提交事件不再重载页面-->
<form v-on:submit.prevent="onSubmit"></form>
<!--即阻止冒泡 也阻止默认事件-->
<form v-on:click.stop.prevent="doThat"></form>

.prevent 修饰符告诉v-on 指令对于触发的事件调用 event.preventDefault()

.stop 阻止冒泡

.capture 事件捕获

.self 事件不是从内部元素触发的

.once

键盘修饰符

常用的键盘修饰符

.enter => enter键
.tab => tab键
.delete (捕获“删除”和“退格”按键) => 删除键
.esc => 取消键
.space => 空格键
.up => 上
.down => 下
.left => 左
.right => 右

<!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>
</head>

<body>
    <div id="app">
        <!-- 当enter 按钮释放是 执行onsunmit 事件 -->
        <input type="text" v-on:keyup.enter="onsubmit($event)">
    </div>
    <!-- 引入Vue.js -->
    <script src="./js/vue.js"></script>
    <script>
        // 构造Vue实例对象
        let app = new Vue({
            el: '#app',
            methods: {
                onsubmit(event) {
                    console.log(event.keyCode);
                }
            }
        })
    </script>
</body>

</html>

v-bind 指令

被用来想要的更新HTML属性

常规语句 <a v-bind:href="ahref"></a>

缩写 <img :src="ahref">

绑定对象

<!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>
    <style>
        .bcolor {
            width: 50px;
            height: 50px;
            border: 1px solid red;
            background-color: #000;
        }
        
        .fs {
            color: #fff;
        }
    </style>
</head>

<body>
    <div id="app">
        <div v-bind:class="{bcolor:isColor,fs:isfs}">56</div>
        <button v-on:click="changeNC"></button>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        // 创建一个Vue构造函数
        let vm = new Vue({
            el: '#app',
            data: {
                isColor: true,
                isfs: true
            },
            methods: {
                changeNC() {
                    this.isColor = "",
                        this.isfs = ""
                }
            }
        })
    </script>
</body>

</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>
    <style>
        .bcolor {
            width: 50px;
            height: 50px;
            border: 1px solid red;
            background-color: #000;
        }
        
        .fs {
            color: #fff;
        }
    </style>
</head>

<body>
    <div id="app">
        <div v-bind:class="[isColor,isfs]">56</div>
        <button v-on:click="changeNC">改变，从一点一滴做起</button>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        // 创建一个Vue构造函数
        let vm = new Vue({
            el: '#app',
            data: {
                isColor: 'bcolor',
                isfs: 'fs'
            },
            methods: {
                changeNC() {
                    this.isColor = "",
                        this.isfs = ""
                }
            }
        })
    </script>
</body>

</html>

样式绑定相关语法细节

1.对象绑定和数组绑定可以结合在一起使用

<!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>
    <style>
        .red {
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }
        
        .article {
            background-color: yellow;
        }
        
        .fc {
            color: #fff;
        }
    </style>
</head>

<body>
    <div id="app">
        <div :class='[isred ,isarticle, {fc:fc}]'>追求源于热爱</div>
        <!-- 点击按钮 清除#app 下面的div盒子的class属性值  -->
        <button v-on:click="onchangeBg">改变从一点一滴做起</button>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#app ',
            data: {
                isred: 'red',
                isarticle: 'article ',
                fc: true
            },
            methods: {
                onchangeBg() {
                    this.isred = "";
                    this.isarticle = "",
                        this.fc = false;
                }
            }
        })
    </script>
</body>

</html>

2.class绑定的值可以简化操作

数组的简化操作

、对象的简化操作

<!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>
    <style>
        .bgred {
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }
        
        .bgyellow {
            background-color: yellow;
        }
    </style>
</head>

<body>
    <div id="app">
        <div v-bind:class="arrclasses">数组的简化操作</div>
        <div v-bind:class="objclasses">对象的简化操作</div>

    </div>
    <script src="./js/vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                arrclasses: ['bgred', 'bgyellow'],
                objclasses: {
                    'bgred': true,
                    'bgyellow': true
                }
            }
        })
    </script>
</body>

</html>

3、默认的class会被保留

<!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>
    <style>
        .bos_body {
            width: 100px;
            height: 100px;
            border: 1px solid #ccc;
        }
        
        .yansh {
            background-color: red;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="bos_body" v-bind:class="isyansh">一步一步</div>
        <!-- 点击按钮后，清除data中isyansu的属性值为空 -->
        <button v-on:click='changeColor'>脚踏实地</button>
    </div>
    <!-- 引入Vue.js -->
    <script src="./js/vue.js"></script>
    <script>
        // 初始化Vue实例对象
        let vm = new Vue({
            el: '#app',
            data: {
                isyansh: 'yansh'
            },
            methods: {
                changeColor() {
                    this.isyansh = ""
                }
            }
        })
    </script>
</body>

</html>