刘乙江
刘乙江

【vue】初识vue

目录

  • 一、vue3的前言
    • 1.1 渐进式框架
    • 1.2 相比于vue2的变化
      • 源码上
      • 性能上
      • 新的API
  • 二、课程大纲：
  • 三、第一天内容
    • 3.1 如何使用vue呢
    • 3.2 vue引入方法：
      • 3.2.1 方式一：在页面中通过CDN(内容分发网络)的方式引入
      • 3.2.2 方式二：下载vue的javascript文件，并且自己手动引入
      • 3.2.3 方式三：通过npm包管理工具安装使用它（webpack在讲）
      • 3.2.4 方式四：直接通过vue CLI创建项目，并且使用它
    • 3.3 计数器案例（原生js代码vs vue代码）
    • 3.4 编程思想
    • 3.5 creatApp传入对象的属性解释
      • 3.5.1 template
        • 3.5.1.1 template优化方法一
        • 3.5.1.2 template优化方法二
      • 3.5.2 data
      • 3.5.3 methods
      • 3.5.3 props、computed、watch、emits、setup等等
    • 3.4 如何看vue的源码

一、vue3的前言

2020年9月79日，万众期待的vue3终于发布了正式版，命名为"One Piece",他带来了很多新特性：更好的性能，更小的包体积，更好的TypeScript集成，更优秀的API设计。

1.1 渐进式框架

vue是一套渐进式框架，什么是渐进式框架呢？通俗来讲就是，我们可以在项目中一点点来引入和使用vue，而不需要全部使用vue来开发整个项目

1.2 相比于vue2的变化

源码上

  1. 源码通过monorepo的形式来管理
  2. 源码使用TypeScript进行重写

性能上

  1. 使用proxy进行数据劫持
  2. 删除了一些不必要的API
  3. 包括编译方面的优化

新的API

  1. 由Options API到Composition API
  2. hooks函数增加代码的复用性

二、课程大纲：

  1. 邂逅体验vue3
  2. vue3基本语法
  3. vue3组件化开发
  4. vue CLI详解
  5. vue核心语法
  6. vue-router路由
  7. vuex状态管理
  8. TypeScript 项目实战
  9. 自动化部署

三、第一天内容

3.1 如何使用vue呢

vue本质就是一个javascript库，项目中引入进来即可

3.2 vue引入方法：

3.2.1 方式一：在页面中通过CDN(内容分发网络)的方式引入

补充：CDN服务器概念图理解
【vue】初识vue_第1张图片

3.2.2 方式二：下载vue的javascript文件，并且自己手动引入

第一步：打开https://unpkg.com/vue@next，ctrl+A，复制到js/vue.js中
第二步：

3.2.3 方式三：通过npm包管理工具安装使用它（webpack在讲）

3.2.4 方式四：直接通过vue CLI创建项目，并且使用它

3.3 计数器案例（原生js代码vs vue代码）

原生js代码如下：

vue代码如下
3.5.1.2 template优化方法二

使用任意标签（通常使用tempalte标签，因为不会被渲染,注意这个标签是html都有的，并非只有vue，这个标签在html中不被渲染就是给js用的），设置id


        
    
    //如果把