Hello，Vue.js！——开启 Vue 学习本文已参与「新人创作礼」活动，一起开启掘金创作之路。简单认识 Vue

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

简单认识 Vuejs

Vue （读音 /vju:/ ，类似于 view）。
Vue是一个渐进式的框架，什么是渐进式的呢？
- 渐进式意味着你可以将 Vue 作为你应用的一部分嵌入其中，带来更丰富的交互体验。
- 或者如果你希望将更多的业务逻辑使用 Vue 实现，那么 Vue 的核心库以及其生态系统。
- 比如 Core+Vue-router+Vuex ，也可以满足你各种各样的需求。
Vue 有很多特点和 Web 开发中常见的高级功能。
- 解耦试图和数据。
- 可复用的组件。
- 前端路由技术。
- 状态管理。
- 虚拟 DOM 。
学习 Vue 的前提：
- 从零学习 Vue 开发，不需要具备其他类似于 Angular 、 React ，甚至是 jQuery 的经验。
- 但是一定要具备一定的 HTML 、 CSS 、 JavaScript 基础。
- ES6 语法特别重要。

Vuejs 安装

Vue 安装方式有很多：

直接 CDN 引入：
- 可以选择引入开发环境版本还是生产环境版本

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

下载和引入
- 开发环境
- 生产环境
NPM 安装
- 后续通过 webpack 和 CLI 的使用，我们使用该方式。

Hellow Vuejs

<div id="app">
        <h2>{{message}}</h2>
        <h1>{{name}}</h1>
</div>
<div>{{message}}</div>
<script src="./vue源码/vue.js"></script>
<script>
    // let(变量)/const(常量)。
    // 编程范式：声明式编程。
    let app = new Vue({
        el: '#app', // 用于挂载要管理的元素。
        data: { //  定义数据。
            message: '你好啊，李银河！',
            name: 'coderwhy'
        },
    })

    // 原生 js 的做法（编程范式：命令式编程）。
    // 1. 创建div元素。
    // 2。 定义一个变量叫 message。
    // 3. 将 message 变量放在前面的 div 元素中显示。
    // 4. 修改 message 的数据：今天的天气不错！
    // 5. 将修改后的数据再次替换到 div 元素。
</script>

创建 Vue 对象的时候，传入了一些 options:{}
- {} 中包含了 el 属性：该属性决定了这个 Vue 对象挂载到哪一个元素上，很明显，我们这是挂载到了 id 为 app 的元素上。
- {} 中包含了 data 属性：该属性中通常会存储一些数据。
  1. 这些数据可以是我们直接定义出来的，比如像上面这样。
  2. 也可以是来自网络，从服务器加载的。

Vue 实例的作用范围是什么呢？

挂载点选择的标签内部。 是否可以使用其他的选择器？
可以（建议使用 id 选择器）。 是否可以设置其他的 DOM 元素呢？
只支持双标签，但是也有例外，比如 html 标签和 body 标签。