一、vue3的前言

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

1.1 渐进式框架

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

1.2 相比于vue2的变化

源码上

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

性能上

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

新的API

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

二、课程大纲：

邂逅体验vue3
vue3基本语法
vue3组件化开发
vue CLI详解
vue核心语法
vue-router路由
vuex状态管理
TypeScript 项目实战
自动化部署

三、第一天内容

3.1 如何使用vue呢

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

3.2 vue引入方法：

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

<div id = "app"></div>
    <!--
     1、新建这个html时，啥都没有，这时输入！点击回车就有了html基本的标签
     2、引入vue的js，写上如下的代码
     <script src="https://unpkg.com/vue@next"></script>
     3、打开这个网址便是vue3的源代码
     4、创建App,并挂载到div上
    -->
    <script src="https://unpkg.com/vue@next"></script>
    <script>

        const app = Vue.createApp({
            template:'<h2>Hello vue3</h2>'
        });
        app.mount("#app")
    </script>

补充：CDN服务器概念图理解
在这里插入图片描述

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

第一步：打开https://unpkg.com/vue@next，ctrl+A，复制到js/vue.js中
第二步：
<div id = "app"></div>
<script src="../js/vue.js"></script>
<script>
    Vue.createApp({
        template:'<h2>Hello 李银河</h2>'
    }).mount("#app");
</script>

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

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

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

原生js代码如下：

<h2 class="counter"></h2>
    <button class="increment">+1</button>
    <button class="decrement">-1</button>
    
    <script>
        //1.获取所有的元素
        const counterEl = document.querySelector(".counter");
        const incrementEl = document.querySelector(".increment");
        const decrementEl = document.querySelector(".decrement");
        //2.定义变量
        let counter = 100;
        counterEl.innerHTML = counter;
        //3.监听按钮的点击
        incrementEl.addEventListener('click',()=>{
            counter+=1;
            counterEl.innerHTML = counter;
        })
        decrementEl.addEventListener('click',()=>{
            counter-=1;
            counterEl.innerHTML = counter;
        })
    </script>

vue代码如下

<div id = "app"></div>
    <script src="../js/vue.js"></script>
    <script>
        //一个app中有template，data(),methods,
        Vue.createApp({
            template:`
            <div>
                <h2>{
   
   {message}}</h2>
                <h2>{
   
   {counter}}</h2>    
                <button @click='increment'>+1</button>
                <button @click='decrement'>-1</button>
            </div>`//模板字符串可以换行
            ,
            //vue3中data不能是一个对象了，而必须是一个函数
            data:function(){
                return {
                    message:"hello world",
                    counter:100
                }
            },
            //定义各种各样的方法
            methods: {
                increment(){
                    console.log("点击了+1");
                    //this取出data中的数据，（实际上是proxy代理的，以后再讲）
                    this.counter++;
                },
                decrement(){
                    console.log("点击了-1");
                    this.counter--;
                }
            },
        }).mount("#app");

3.4 编程思想

以上案例是命令式编程vs 声明式编程
命令式编程借鉴了MVC的编程思想
声明式编程借鉴了MVVM的编程思想
MVVM:
M:model：是一个对象包括数据和方法
V：view：dom标签
VM:view-modal:处理view和modal的关系的代码逻辑
在这里插入图片描述

3.5 creatApp传入对象的属性解释

3.5.1 template

表示的是vue需要帮助我们渲染的模板信息，编写时不方便，没有提示，vue提供了两种解决办法：

3.5.1.1 template优化方法一

使用script标签，并且标记它的类型为x-template

<script type="x-template" id="lyjtemplate">
        <div>
            <h2>{
   
   {message}}</h2>
            <h2>{
   
   {counter}}</h2>    
            <button @click='increment'>+1</button>
            <button @click='decrement'>-1</button>
        </div>
    </script>
    <script>
        //一个app中有template，data(),methods,
        Vue.createApp({
            template:"#lyjtemplate",
			....
            }).mount("#app");
    </script>

3.5.1.2 template优化方法二

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

<template id="lyjtemplate">
        <div>
            <h2>{
   
   {message}}</h2>
            <h2>{
   
   {counter}}</h2>    
            <button @click='increment'>+1</button>
            <button @click='decrement'>-1</button>
        </div>
    </template>
        
    <script>
        //一个app中有template，data(),methods,
        Vue.createApp({
            template:"#lyjtemplate"
            ...
        }).mount("#app");
    </script>
    //如果把<template>换成<div>,也是可以的，但是！页面上会有两部分这个内容！
    //一个是vue挂载的，一个是html解析的

3.5.2 data

vue2中，也可以传入一个对象，vue3中必须是一个函数，否则在浏览器中会报错

3.5.3 methods

里边定义的方法会被绑定到template模板中
可以使用this关键字直接访问到data中返回的对象属性
官方文档中有这么一段描述：
注意不应该是用箭头函数来定义method函数(例如：plus:()=>this.a++)
问题一：为什么不能使用箭头函数？
问题二：不是用箭头函数的情况下，this到底指向的是什么？（一道面试题）

3.5.3 props、computed、watch、emits、setup等等

后续讲解补充

3.4 如何看vue的源码

看完所有视频回来补充…

【vue】初识vue

目录