Vue笔记【持续更新】【一】-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_56612338/article/details/132920754

本文介绍了Vue框架的基本概念，包括下载源码、理解版本，以及如何编写第一个Vue程序，重点讲解了data属性和模板的使用。此外，还提及了如何去掉生产提示和配置Vue实例。

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

文章目录

- Vue学习笔记

Vue学习笔记

一.Vue介绍

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

二、Vue初认识

1.下载vue.js源码文件

官网下载：https://v2.cn.vuejs.org/v2/guide/index.html

2.vue源代码文件版本介绍

vue.js：开发版本，包含完整的警告和调试模式（新手推荐），便于分析和查看源码

vue.min.js：生产版本（压缩版），删除了警告

3.编写程序：

<!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>第一个Vue程序</title>
    <!-- 安装vue:当你使用script进行Vue安装之后，上下文中就注册了一个全局变量:Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 指定vue实例的挂载位置（定位置）-->
    <div id="app">

    </div>
</body>

<script type="text/javascript">
    /* 
    第一步：创建Vue实例 
    1、为什么要new Vue(),直接调用Vue()函数行吗？
       不行,因为直接调用Vue()函数，不创建实例的话，会出现错误
    
    2、关于Vue构造函数的参数:options
    Vue框架要求这个options参数必须是一个纯粹的JS对象:{}
    在{}对象中可以编写大量的key:vue对
    一个key:vue对就是一个配置项
    主要是通过options这个参数给Vue实例指定多个配置项
    3、关于template配置项
        template配置项用来指定模板语句，模板语句是一个字符串的形式

    */

    const myVue = new Vue({
        template: '<h1>Hello Vue!</h1>'
    })
    /* 
    第二步:
    1.Vue实例都有一个$mount()方法，这个方法的作用是将
      vue实例挂载到指定位置
    */
    myVue.$mount("#app")
</script>

</html>

4.Vue的data属性解析

data:{

属性名:属性值，

…

}

属性名任意，属性值可以是具体的数值，也可以是字符串，也可以是一个{}包裹的对象，也可以是一个数组

<!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>Vue的data属性学习</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <div id="app"></div>
    <script type="text/javascript">
        new Vue({
            /*
             {{data的key}}
             {no空格{data的key}no空格} 
            */
            template: `<h1>电视剧{{name}}将在北京时间{{time}}上映。
                    主演有:{{lead.name}}(年龄:{{lead.age}})，{{actors[0].name}}(年龄:{{actors[0].age}})，
                    {{actors[1].name}}(年龄:{{actors[1].age}})
                </h1>`,
            data: {
                name: '狂飙',
                time: '2023-01-14',
                lead: {
                    name: '高启强',
                    age: 35
                },
                actors: [
                    {
                        name: '安欣',
                        age: 35
                    },
                    {
                        name: '高启兰',
                        age: 26
                    }
                ]
            }
        }).$mount("#app")
    </script>
</body>

</html>

5.Vue中的模板template

5.1模板位置

模板template可以作为一个属性配置在Vue实例里面，一个Vue实例只能有一个根节点，如果有多个标签，可以用div或其他包裹

当我们挂载到我们指定的容器中时，我们创建的容易就会被模板中的容器所代替，所以我们可以把模板写到我们想要呈现到的容器

内部，这样就解决了我们创建的容器被代替的情况，$mount(“指定挂载的容器”)这个也可以被el属性所代替

5.2 Vue实例的属性介绍

data属性：配置我们的数据源

el：指定挂载的容器的位置

注意：属性与属性之间用逗号隔开

5.3参考案例

<!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">
    <script type="text/javascript" src="../js/vue.js"></script>
    <title>03-Vue的template配置</title>
</head>

<body>
    <!-- 挂载的位置 -->
    <div id="app">
        <!-- 把div写在这里就避免了写在template被替换 -->
        <div>
            <h1>{{msg}}</h1>
            <h1>{{mood}}</h1>
        </div>
    </div>
    <!-- Vue程序代码 -->
    <script>
        new Vue({
            /* 
             template里面只有一个根节点，下面的写法会把app那个div替换掉,
             可以直接写在挂载位置的div里面
            */
            /* template: `<div>
                       <h1>{{msg}}</h1>
                       <h1>{{mood}}</h1>
                    </div>`, */
            data: {
                msg: '你好Vue',
                mood: 'happy,wu~wu~wu~'
            },
            /* 
                el可以替代$mount("#app")指定挂载位置
                el就是element的缩写，作用：告诉Vue接管哪个容器
            */

            el: '#app'
        })
        /* .$mount("#app") */
    </script>
</body>

</html>

6.去掉生产提示

在全局配置 Vue.config.productionTip = false，默认是true显示，但是少数情况下可能不会生效，如果生产提示还在的话，建议直接改vue.js的源码，把productionTip直接改为false

<script type="text/javascript">
    /* 
        因为学习阶段用的是vue.js文件，vue提示你项目上线的时候别忘了改为vue.min.js
        vue是善意的，但是强迫症患者就不答应了，去掉的方法如下，默认为true，改为false即可
    */
    Vue.config.productionTip = false  //全局配置 阻止vue在启动时生成生产提示
    //创建Vue实例
    new Vue({
        el: '#root',
        data: {
            msg: '强迫症患者去掉vue的生产提示',
            detail: '全局配置Vue.config.productionTip = false但是有的时候不起作用'
        }
    });
</script>