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

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

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

Vue基础笔记

目录

Vue基础笔记

定义:【官方定义】

Vue指令:

        v-text 渲染文本

        v-html  渲染html标签

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

双向数据绑定

       v-model【指令】

V-on 【事件绑定】

           常规语法 v-on:click

           简洁语法 @click

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

事件修饰符

         键盘修饰符

          常用的键盘修饰符

          v-bind 指令 

          绑定对象

          绑定数组


定义:【官方定义】

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 直接显示原始信息 跳过编译

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

                优点:

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

                注意事项:

                       <p v-pre>{{msg}}<p>   

                      与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>

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值