Hello，Vue.js！——开启 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 属性：该属性中通常会存储一些数据。
- 这些数据可以是我们直接定义出来的，比如像上面这样。
- 也可以是来自网络，从服务器加载的。
Vue 实例的作用范围是什么呢？
- 挂载点选择的标签内部。是否可以使用其他的选择器？
- 可以（建议使用 id 选择器）。是否可以设置其他的 DOM 元素呢？
- 只支持双标签，但是也有例外，比如 html 标签和 body 标签。
