Vue全家桶:vue2+vue3全部搞懂：第一篇，怎么用vue_vue3全家桶和vue2全家桶-CSDN博客

本文链接：https://blog.csdn.net/m0_73991249/article/details/136375796

前提，建议先学会前端几大基础：HTML、CSS、JS、Ajax，不然不好懂

这一专栏知识将一次性将vue、vue2、vue3全部讲明白

什么是 Vue？

Vue 就是用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，简单说就是帮助你更简单地高效地开发用户界面，可以省很多代码。

这里需要注意一个概念：

1、一个简单的vue代码只需要在HTML文件的js部分、或者JS文件里，用el挂载vue就可以写vue的代码了，这样的vue代码你们可以理解为vue1（虽然网上貌似没有vue1这个说法，但是仅作理解）

2、而我们真正开发一个项目的时候是不会在一个html文件里写vue代码的，了解过项目的朋友们应该知道，一个项目里包含多个文件目录，多种文件类型，那么在工程化项目开发里，我们用的就是vue2、vue3，不需要el挂载这样了，而取而代之的是在一个vue文件里写html的代码。

3、html文件里上面head那块写css代码、中间body部分写html代码、下面script部分写js（vue）代码；而vue2、vue3里是在一个vue文件里写这三，只不过暂时理解为顺序换一下，上面写html代码、中间js（vue）代码、下面css代码。

一、怎么引用使用Vue?

（先讲第一种最简单的，在html文件里写“vue1”代码形式）

首先怎么用vue？第一种办法是在本地搭建vue，但是我不推荐，因为我自己也没搞懂。第二种办法是用网上的CDN，也即是引入script标签，script标签直接引用在线vue的CDN文件。既然我们要高效学习，那就别搞那么多，我本人是直接去官网：Vue.js - 渐进式 JavaScript 框架 | Vue.js这里，点击【快速上手】，然后找到【通过 CDN 使用 Vue】，或者你直接忽略我前面那些废话，直接在你的HTML文件里写入这段代码：

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

要是官网那个不行，你再试一下这个，反正我自己用了可以

<script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>

再不行试这个，还不行你就转行吧，你电脑不适合让你搞IT行业

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

然后就可以正常使用Vue语言了

二、基本的Vue语法框架

简单记忆：就是1、直接在JavaScript里，创建一个Vue对象：new Vue( )

2、然后在这个对象里传【对象参数】

3、在这个对象里写它的属性、成员，对象的语法就跟JavaScript的一模一样

例子：

<script>
        //注意！！Vue第一个字母一定要大写！！！
        new Vue({
            //你想控制、获取到哪个HTML元素，就在这声明它挂载
            //类似JavaScript的document.querySelector()一样
            el: '这就是css选择器',

            //这里是成员变量
            data: { 
                变量1: ...,
                变量2: ...,
            },

            //这是成员函数（或者说成员方法），注意！！！别漏了methods最后一个字母s
            methods: {
                方法1: function(){
                    //函数体
                },
                方法2: function(){
                    //函数体
                }
            }
        })
</script>

易错点：

1、Vue忘记把第一个字母大写

2、methods写成method漏了s

3、el挂载点忘了写“#”、“.”这些

4、el和data和methods这些是同级的元素，要用逗号“,”隔开

三、跟HTML部分结合

只需记住一点，这里用的是“双花括号语法”，在HTML代码里用{{ }}包住一个变量，然后在Vue对象里的【data】里设置【同名字变量】，这样HTML这块地方的内容，就由Vue的【data】决定了

例子：

<body>
    <div id="app">
        {{ message }}
        <h2>
            {{ animal.name }}
            {{ animal.phone }}
        </h2>
        <ul>
            <li> {{ state[0] }} </li>
            <li> {{ state[1] }} </li>
            <li> {{ state[2] }} </li>
            <li> {{ state[3] }} </li>
        </ul>
    </div>

    <script>
        new Vue({
            //HTML那里的id名设置了是“app”，这里就绑定他
            el: '#app',

            data: { 
                //普通成员变量
                message: 'hello 岑梓铭',
                hahaha: '哈哈哈',

                //对象成员
                animal:{
                    name: '癫狗',
                    phone: '18927366541'
                },

                //数组成员
                state:['广东','上海','山东','新疆']
            }
        })
    </script>
</body>

至于函数，现在还没学到事件指令，暂时先不讲函数