vue 基本介绍

Vue.js

Vue是一款优秀的过程开源框架，也是现在WEB工程师必会的一项技能。

它是一个渐进式的框架，所谓渐进式是指你可以对你的项目代码进行渐进的重构，比如最开始你的项目中所有页面的代码全部是由jQuery构建的，如果想将其重构为Vue的话则可以对某一些页面进行重构，这并不会影响其他页面的正常使用。

目前Vue3正式版已经出来了，但是新手玩家学习还是从Vue2入手，再递进到Vue3。

安装方式

CDN引入：

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

本地引入，下载地址：

<!-- 官方开发版本 -->
https://cn.vuejs.org/js/vue.js

<! -- 官方生成版本 -->
https://cn.vuejs.org/js/vue.min.js

NPM安装：

# 最新稳定版
$ npm install vue

简单体验

初次上手

下面是使用Vue打印HELLO,WORLD，通过这个小案例你可以了解Vue的基本使用。

1. 首先要生成一个Vue实例。
2. 使用el来挂载元素，可以使用CSS选择器，以及JavaScript的选择器拿到原生DOM元素进行挂载。
3. 将数据存放至data中。
4. 使用Vue的mustache语法对data中的数据进行渲染，令其展示到被挂载元素模板上。

注意！HTML以及BODY标签不允许挂载

<body>
    <div id="app">
        <p>{{ msg }}</p>
    </div>
    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                msg: "HELLO,WORLD",
            }
        })
    </script>
</body>