Vue初学-第一天

最新推荐文章于 2025-08-15 10:40:51 发布

子不识

最新推荐文章于 2025-08-15 10:40:51 发布

阅读量541

点赞数 5

CC 4.0 BY-SA版权

分类专栏： Vue 前端文章标签： vue.js 前端前端框架 javascript

本文链接：https://blog.youkuaiyun.com/qq_38666686/article/details/121618166

Vue 同时被 2 个专栏收录

6 篇文章

订阅专栏

前端

6 篇文章

订阅专栏

本文介绍了Vue.js的基本使用，包括如何创建HTML文件并引入Vue库，通过`data`和`methods`定义实例数据和方法。讲解了`v-text`、`v-html`、`v-if/v-else-if/v-else`、`v-show`等指令的用法，以及`v-for`指令用于列表渲染和条件渲染。强调了`v-for`中`key`属性的重要性，并讨论了`v-if`和`v-show`的区别。文章适合Vue初学者阅读。

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

1. 基本使用

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Document</title>
</head>
<!-- 1. 新建一个html文件，引入vue库  -->
<!-- 一定不要忘记引入vue的js！！！ -->
<!-- 在本地引入 -->
<script src="./js/vue.js"></script>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

<body>
    <!-- 2.创建一个div盒子，同时定义一个id，在这里定义的id名是app -->
    <div id="app">
        <!-- 4.使用插值表达式{{}}把定义的message数据展示在id为app的div盒子里 -->
        {{ message }}
    </div>
    <script>
        <!-- 3. 在Vue构造函数中定义数据 -->
        let vm = new Vue({
        	<!-- 把Vue实例挂载在id为app的div上 -->
            el: "#app",
            data: {
                message: 'Hello Vue!'
            }
        })
    </script>
</body>

</html>

在这里插入图片描述

2. 属性

data属性
组件的 data 选项是一个函数。Vue 会在创建新组件实例的过程中调用此函数。
它应该返回一个对象，然后 Vue 会通过响应性系统将其包裹起来，并以 $data
的形式存储在组件实例中。
methods属性
在Vue中，为了实现业务，我们必然会用到很多方法，这时候，我们可以使用methods选项，它是一个对象。
Vue自动为methods绑定this，为了保证方法作为事件监听或回调函数的时候，保证正确的this指向，我们要避免在methods中定义方法的时候使用箭头函数。

3. 指令

3.1 内容渲染指令

v-text
v-text指令，用来渲染DOM元素的文本内容，类似于JavaScript中的innerText

<body>
    <div id="app">
        <!-- 把message里的数据写入到p标签里 -->
        <p v-text="message"></p>
        <!-- v-text指令会把原本的内容覆盖掉 -->
        <p v-text="play">你想干什么</p>
        <!-- v-text指令不能识别html属性 -->
        <p v-text="happy"></p>
    </div>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                message: 'Hello Vue!',
                play: '我要玩游戏！',
                happy: '<h1>大写的开心！</h1>'
            }
        })
    </script>
</body>

在这里插入图片描述

插值表达式
插值表达式就是{{ }}语法，专门用来解决 v-text 会覆盖默认文本内容的问题

<p>你想干什么?{{ play}}</p>

在这里插入图片描述

v-html
v-html使用起来和v-text起来没什么差别，唯一的区别是v-html能识别html属性

<body>
    <div id="app">
        <p v-html="happy"></p>
    </div>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                happy: '<h1>大写的开心！</h1>'
            }
        })
    </script>
</body>

在这里插入图片描述
3.2 条件渲染指令

v-if/v-else-if/v-else

条件渲染指令用来辅助开发者按需控制虚拟DOM 是否被编译为真实DOM。
使用起来和JavaScript中的if/else if/else并没有很大的区别

<body>
    <div id="app">
        <p v-if="type == A">超棒的，牛</p>
        <!-- data里面type值是B,所以满足当前条件，将显示该p标签 -->
        <p v-else-if="type == B">可以的，还需努力</p>
        <p v-else-if="type == C">一般般咯，要加油啊</p>
        <p v-else>躺平吧</p>
    </div>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                type: 'B',
            }
        })
    </script>
</body>

在这里插入图片描述

v-show
v-show指令用来辅助开发者按需控制DOM的样式display:none或者display:block

<body>
    <div id="app">
    	<!-- flag1为false则该p标签会被隐藏 -->
        <p v-show="flag1">看不见我看不见我</p>
        <!-- flag2为true则该p标签正常显示 -->
        <p v-show="flag2">我在这我在这</p>
    </div>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                flag1: false,
                flag2: true
            }
        })
    </script>
</body>

在这里插入图片描述

v-if 和 v-show 的区别

共同点
v-if和v-show 都能实现元素的显示隐藏
不同点
–v-show 只是简单的控制元素的display属性，而v-if才是条件渲染（条件为真，元素将会被渲染，条件为假，元素会被销毁）；
–v-show有更高的首次渲染开销，而v-if的首次渲染开销要小的多；
–v-if 有更高的切换开销，v-show切换开销小
– v-if有配套的 v-else-if 和 v-else，而 v-show没有
– v-if可以搭配template使用，而v-show不行

3.3列表渲染指令

用v-for渲染一组元素

v-for指令需要使用item in items形式的特殊语法，其中 items是源数据数组，而item则是被迭代的数组元素的别名
item是形参，可以根据需要重命名

<body>
    <div id="app">
        <ul>
            <!-- {{ item }}不会覆盖原有属性，可以自己再加点什么 -->
            <li v-for="item in list">哥谭噩梦：{{ item }}</li>
            <!-- v-text会覆盖掉原有文本,并且把item重命名为lala,依然能正常使用 -->
            <li v-for="lala in list" v-text="lala">啦啦啦</li>
            <!-- v-html在这里也能识别html元素 -->
            <li v-for="item in list" v-html="item"></li>

        </ul>
    </div>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                list: [
                    '<h1>我好不容易</h1>',
                    '<h1>心动一次</h1>',
                    '<h1>你却让我</h1>',
                    '<h1>输的这么彻底</h1>',
                    '<h1>哈哈哈哈哈</h1>',
                    '<h1>焯</h1>',
                ]
            }
        })
    </script>
</body>

在这里插入图片描述

用 v-for 展示索引及元素
index索引名也是形参，同样可以重命名

<body>
    <div id="app">
        <ul>
            <!-- item和index在这里重命名成hh和i一样能正常使用 -->
            <li v-for="(hh, i) in list">{{hh}}-->{{i}}</li>

        </ul>
    </div>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                list: [
                    '我好不容易',
                    '心动一次',
                    '你却让我',
                    '输的这么彻底',
                    '哈哈哈哈哈',
                    '焯',
                ]
            }
        })
    </script>
</body>

在这里插入图片描述

给v-for添加key

当Vue正在更新使用v-for渲染的元素列表时，它默认使用“就地更新”的策略。
但这种默认的性能优化策略，会导致有状态的列表无法被正确更新。
为了给Vue一个提示，以便它能跟踪每个节点的身份，从而在保证有状态的列表被正确更新的前提下，提升渲染的性能。
此时，需要为每项提供一个唯一的key属性

注意：

key的值只能是字符串或数字类型
key的值必须具有唯一性（即：key的值不能重复）
建议把数据项id 属性的值作为key 的值（因为id属性的值具有唯一性）
使用index的值当作key的值没有任何意义（因为index的值不具有唯一性）
建议使用v-for指令时一定要指定key的值（既提升性能、又防止列表状态紊乱）

<body>
    <div id="app">
        <ul>
            <!-- 这里将id绑定到每个li里面 -->
            <li v-for="(hh, i) in list" :key="hh.id">{{hh.message}}-->{{i}}</li>

        </ul>
    </div>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                list: [{
                    id: 1,
                    message: '我是1,哒哒哒'
                }, {
                    id: 2,
                    message: '我是2,啦啦啦'
                }, {
                    id: 3,
                    message: '我是3,哈哈哈'
                }, {
                    id: 4,
                    message: '我是4,叭叭叭'
                }, ]
            }
        })
    </script>
</body>

在这里插入图片描述

v-for与v-if一同使用

当v-for和v-if处于同一节点，v-if的优先级比v-for更高，这意味着v-if将分别重复运行于每个v-for循环中
当你想为仅有的一些项渲染节点时，这种优先级的机制会十分有用

<div id="app">
        <ul>
            <li v-for="hh in list" v-if="hh.id != '3'">{{hh.message}}</li>
        </ul>
    </div>

在这里插入图片描述

如果你是想有条件地跳过循环的执行,可以把v-if移动到外层元素或<template>标签上

<div id="app">
        <ul v-if="list.length == 4">
            <li v-for="hh in list">{{hh.message}}</li>
        </ul>
        <p v-else>阿巴阿巴</p>
    </div>

在这里插入图片描述

<div id="app">
        <ul v-if="list.length > 4">
            <li v-for="hh in list">{{hh.message}}</li>
        </ul>
        <p v-else>阿巴阿巴</p>
    </div>