01.vue入门

1.需要新建一个文件夹（名字自定义），并在文件夹下面新建一个文件index.html使用vue有三种方式，这里使用的两种方式

从vue官网，点击这两种安装版本，将代码复制，然后去我们新建的文件夹中，新建两个文件：vue.js和vue.min.js，将这两个的代码粘贴进去
然后在本地引入：
直接在我们的文件index.html中引入官网提供的接口引入：

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

在这里插入图片描述 2.使用vue
原生的操作dom元素方法：

在这里插入图片描述使用vue：

初始化一个vue实例：

<script>
        //初始化一个vue实例：
        var vue = new Vue({
            el:"#vue",//el表示要对其操作的id
            data:{//数据，需要在该id下面通过vue引入的数据
                name:"vue学习",//字符串类型
                number:1000,//数值类型
                arr:[1,2,3,4],//数组类型
                object:{//对象
                    name:"加油嘻嘻嘻",
                    age:56,
                },
                boolean:true,//布尔
            }
        });
   </script>

在对应的id下面引入数据：

 <div id="vue">
        <div>{{name}}</div>
        <div>{{number}}</div>
        <div>{{arr}}</div>
        <div>{{object}}</div>
        <div>{{boolean}}</div>
    </div>

结果：
在这里插入图片描述付：
index.html完整代码：

<!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>
    <script src="./vue.js"></script>


    <!-- <script src="https://cdn.jsdelivr.net/npm/vue"></script> -->
</head>
<body>
    <div id="vue">
        <div>{{name}}</div>
        <div>{{number}}</div>
        <div>{{arr}}</div>
        <div>{{object}}</div>
        <div>{{boolean}}</div>
    </div>
    <script>
        //初始化一个vue实例：
        var vue = new Vue({
            el:"#vue",//el表示要对其操作的id
            data:{//数据，需要在该id下面通过vue引入的数据
                name:"vue学习",//字符串类型
                number:1000,//数值类型
                arr:[1,2,3,4],//数组类型
                object:{//对象
                    name:"加油嘻嘻嘻",
                    age:56,
                },
                boolean:true,//布尔
            }
        });
   </script>
</body>
</html>

猜你喜欢