Vue.js入门笔记1

西城风雨楼

2022-03-20 146 阅读1分钟

Vue.js入门笔记1

一、Vue.js的下载和安装

参考官网的教程安装教程

这里需要注意的是，我们可以将vue.js对应的脚本文件从cdn中下载下来然后拷贝到本地，这样就可以避免因为网络问题造成的加载延迟

二、Vue的基本使用

2.1 参考案例：

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div id="app">
        {{ msg  }}
    </div>

    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                msg: "你好vue!",
            }
        });
    </script>
</body>

</html>

2.2 案例总结

在html文件中使用Vue，需要通过script标签引入vue.js文件
对于我们想要操作的DOM元素，我们只需要定义一个对应的Vue实例即可，在本案例中，我们为div标签定义了一个对应的名为app的Vue实例，该实例接收一个对象作为参数，我们只需要在该对象中定义两个基本属性即可，一个属性为el，该属性中可以填写css支持的任意选择器，该选择器表明了该Vue的作用范围，在本案例中就是div标签及其所有子标签，另外一个属性为data属性，该属性中可以自定义一些数据对象，在data中定义的数据，可以通过插值表达式{{}}的方式渲染到页面中