Vue学习–01.初识vue

1. 前言

vue2官网–https://cn.vuejs.org/v2/guide/

vue3官网–https://v3.cn.vuejs.org/guide/introduction.html

我现在使用的版本是vue2，在学习之前需要先了解html、css和javascript

关于vue的基本信息和下载安装请直接参考官网。vue文件也有两个版本，即体积较大的开发版和一个体积较小的生产版，前者包含完整的警告和调试，适合开发使用；后者如体积较小，适合项目上线时使用。

2. 引入vue

新建一个文件夹放刚才下载的vue文件

写一段html引入vue环境

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="UTF-8">
        <title>初识vue</title>
        <!--引入vue-->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
    </body>
</html>

打开浏览器的控制台，输入vue，看到如下场景就表示vue引入成功了

甚至还可以更改网页图标，这里的图像我放在了根目录下

<link rel="icon" href="../favicon.ico" type="image/x-icon" />

这样我就把图标更换为了招财喵

3. hello示例

创建一个容器

<!--创建一个容器-->
<div id="root">
    <h1>hello, vue</h1>
</div>

创建一个实例

<script type="text/javascript">
    //创建vue实例
    new Vue({
        el:"#root"  //el表示指定为哪个容器服务，绑定容器
    })
</script>

整体：

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="UTF-8">
        <title>初识vue</title>
        <!--引入vue-->
        <script type="text/javascript" src="../js/vue.js"></script>

        <link rel="icon" href="../favicon.ico" type="image/x-icon" />
    </head>

    <!--创建一个容器-->
    <div id="root">
        <h1>hello，vue</h1>
        <!--{{}}是插值语法，其中可以放data里面的数据，也可以方法js表达式-->
        <h1>我的名字：{{name}}</h1>
        <h1>我的年龄：{{age}}</h1>
    </div>

    <body>
        <script type="text/javascript">
            Vue.config.productionTip = false

            //创建vue实例
            const vm = new Vue({
                el:"#root",  //el表示指定为哪个容器服务
                data:{     //储存数据，用于el指定的容器中的元素使用
                    name:'cun',
                    age:18
                }
            })
        </script>
    </body>
</html>