Vue基础

Posted 2021-03-22 instinct-em

Table of Contents

• 1. 认识Vue
• 2. Vue安装
  • 2.1 CDN引入
  • 2.2 下载和引入
  • 2.3 NPM | YARN安装
• 3. Hello Vuejs
  • 3.1 Mustache
  • 3.2

1. 认识Vue

• 读音 vju:
• Vue是一个渐进式框架
• Vue有很多特点和Web开发中常见的高级功能
  • 解耦视图和数据
  • 可复用的组件
  • 前端路由技术
  • 状态管理
  • 虚拟DOM

2. Vue安装

2.1 CDN引入

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

2.2 下载和引入

   开发环境 https://vuejs.org/js/vue.js 
   生产环境 https://vuejs.org/js/vue.min.js

2.3 NPM | YARN安装

3. Hello Vuejs

3.1 Mustache

• 创建Vue对象的时候，传入了一些options：{}
  • {}中包含了el属性：该属性决定了这个Vue对象挂载到哪一个元素上，很明显，我们这里是挂载到了id为app的元素上
  • {}中包含了data属性：该属性中通常会存储一些数据
    • 这些数据可以是我们直接定义出来的，比如像上面这样。
    • 也可能是来自网络，从服务器加载的。
• 浏览器执行代码的流程：
  • 执行到10~13行代码显然出对应的html
  • 执行第16行代码创建Vue实例，并且对原HTML进行解析和修改。
• 并且，目前我们的代码是可以做到响应式的。

3.2