vue基础知识

最新推荐文章于 2024-11-15 17:30:00 发布

***polestar

最新推荐文章于 2024-11-15 17:30:00 发布

阅读量702

点赞数

分类专栏： vue 文章标签： vue基础知识

本文链接：https://blog.youkuaiyun.com/weixin_42689147/article/details/88718847

版权

vue 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了Vue的基础知识，包括v-cloak、v-text、v-html、@click、v-bind、v-on及其事件修饰符的使用，如.prevent、.capture、.self和.once。还讲解了v-model的双向数据绑定，通过属性绑定设置元素的class和style，v-for指令的四种用法，以及v-if和v-show的选择与应用。

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

书写vue代码，我们首先要引入vue的包，下载地址：https://github.com/vuejs/vue/releases

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>
    <!-- 1、导入vue的包 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head>

<body>
    <!-- 将来new的vue实例，会控制这个元素中的所有的内容 -->
    <!-- vue实例所控制的这个元素区域，就是我们的v -->
    <div id="app">
        <p>{{msg}}</p>
    </div>
    <script>
        // 2、创建一个vue实例
        // 当我们导入包之后，浏览器的内存中，就多了一个vue的构造函数
        // 注意：我们new出来的这个vm对象，就是我们MVVM中的VM调度者
        var vm = new Vue({
            el: '#app', //表示，当前我们new的这个vue实例，要控制页面上的哪个区域
            //这里的data就是MVVM中的M，专门用来保存每个页面中的数据的
            data: { //data属性中，存放的是el中要用到的数据
                msg: '欢迎学习vue' //通过vue提供的指令，很方便的就能把数据渲染到页面上，程序员不再手动操作DOM元素了【前端的vue之类的框架，不提倡我们去手动操作DOM元素】
            }
        })
    </script>
</body>

</html>

v-cloak,v-text,v-html,@click的使用

<div id="app">
        <!-- 使用v-cloak能够解决插值表达式闪烁的问题 -->
        <p v-cloak>+++++++++{{msg}}______</p>
        <h4 v-text="msg">112512545</h4>
        <!--显示的内容为123-->
        <div>{{msg2}}</div>
        <div v-html="msg2"></div>
        <!-- <input type="button" value="按钮" v-bind:title="mytitle+'123'"> -->
        <input type="button" value="按钮" @click="show">
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: '123',
                msg2: '<h1>我是标签h1，需要用v-html来解析</h1>',
                mytitle: '这是一个自定义标签'
            },
            methods: { //这个methods属性中定义了当前vue实例所有可用的方法
                show: function() {
                    alert('Hello')
                }
            }
        })
    </script>

运行结果如下

v-bind是vue中用于绑定属性的指令，简写为：

v-bind中可以写合法的表达式

v-on事件绑定机制，例如点击事件v-on:click，可以简写为@click

在vm实例中，如果想要获取data上的数据，或者想要调用methods中的方法，必须通过 this.数据属性名或 this.方法名来进行访问，这里的this表示我们new出来的实例对象

vue指令的事件修饰符

结果

加上.stop,其他条件不变，阻止事件冒泡

vue指令中的事件修饰符.prevent（阻止默认行为）

执行结果：点击链接没有发生页面的跳转

vue指令中的事件修饰符.capture（添加事件监听器时使用事件捕获机制）

运行结果：

vue指令中的事件修饰符.self（实现只有点击当前元素时，才会触发事件处理函数）

运行的结果：

vue指令中的事件修饰符.once（只触发一次事件处理函数）

运行结果说明：第一次输出：这是触发了跳转事件，点击第二次的时候超链接会跳转到百度的页面

注意区分.self和.stop:.self只会阻止自己身上冒泡行为的触发，并不会真正阻止冒泡的行为

v-model指令实现数据的双向绑定

注意：v-model只适用于表单元素，例子如下：


    <div id="app">
        <h4>{{msg}}</h4>
        <input type="text" v-bind:value="msg" style="width:100%;" v-model="msg">
        <input type="text" value="msg" style="width:100%;" v-model="msg">
    </div>
    <script>
            var vm = new Vue({
            el: '#app',
            data: {
                msg: '大家都是好学生，爱敲代码，爱学习，爱思考，简直是完美，没哟瑕疵。'
            },
            methods: {}
        });
    </script>

vue中通过属性绑定为元素设置class类样式

第一种使用方式，直接传递一个数组。注意：这里的class需要使用v-bind做数据双向绑定

第二种方式，在数组中使用三元表达式

第三种方式，在数组使用对象来代替三元表达式，提高代码的可读性

第四种方式，在为less使用v-bind绑定对象的时候，对象的属性是类名，由于对象的属性可带引号，也可以不带引号，所以这里没有写，属性的值是一个标志符

可以简写为这样：

vue中通过属性绑定为元素绑定style行内样式

第一种直接在元素上通过 :style 的形式，书写样式对象

第二种将样式对象定义到 data 中，并直接引用到：style 中

第三种在 :style 中通过数组，引用多个 data 上的样式对象

v-for指令的四种使用方式

第一种循环普通数组

第二种循环对象数组

第三种循环对象，注意：在遍历对象身上的键值对的时候，除了有 val和key，在第三个位置还有一个索引

第四种迭代数字

v-for中key的注意事项

正确示范：

<!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>
    <!-- 导入Vue的包 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    <style>

    </style>
</head>

<body>
    <div id="app">
        <div>
            <label for="">Id：
                <input type="text" v-model="id">
            </label>
            <label for="">name：
                    <input type="text" v-model="name">
                </label>
            <input type="button" value="添加" @click="add">
        </div>
        <p v-for="item in list" :key="item.id">
            <input type="checkbox"> {{item.id}}------{{item.name}}
        </p>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                id: '',
                name: '',
                list: [{
                    id: 1,
                    name: '李斯'
                }, {
                    id: 2,
                    name: '嬴政'
                }, {
                    id: 3,
                    name: '赵高'
                }, {
                    id: 4,
                    name: '韩非子'
                }, {
                    id: 5,
                    name: '荀子'
                }, ]
            },
            methods: {
                add() {
                    this.list.unshift({
                        id: this.id,
                        name: this.name
                    })
                }
            }
        })
    </script>
</body>

</html>

运行结果：

错误的运行结果：

原因：没有使用唯一标志符key

v-if和v-show的使用和特点

<div id="app">
        <input type="button" value="toggle" @click="flag=!flag">
        <h3 v-if="flag">这是用v-if控制的元素</h3>
        <h3 v-show="flag">这是用v-show控制的元素</h3>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                flag: true
            },
            methods: {}
        })
    </script>

运行结果：