大学刚毕业那会，接触过vue2，之后不久的2019年左右，vue3就面世了，引入了很多新特性，后来因为就业原因，没有进入IT行业，就没有接触过Vue，今天先用一篇文章，从“零基础”开始学习vue和vue3新特性，先在这里写好文章骨架，后续慢慢补充优化吧。

文章代码只展示最主要的部分，完整代码会放在这个github仓库：Vue_Example

语法初探

通过编写几个小的Demo，了解Vue的v-if指令、 v-on指令、v-for指令、methods、mounted函数，双向绑定等基础知识点

编写 HelloWorld 和 Counter

编写Vue的HelloWorld程序和Counter定时器

HelloWorld.html

<div id="app">{{msg}}</div>
 <script>
   const app = Vue.createApp({
     data() {
       return {
         msg: 'Hello,Vue',
       };
     },
   //template: '<div>hello，Vue2</div>',
   });
   app.mount('#app');
 </script>

上面这段代码中，Vue.createApp创建了Vue的实例，使用 const app去接收Vue的实例化对象，然后挂载在id为app的标签上，其中msg是响应式数据，msg改变，页面上面的msg也会改变。当然，也可以使用template模板，这是最简单的HelloWorld 应用。

Counter.html

<div id="app">{{counter}}</div>
<script>
  const app = Vue.createApp({
    data() {
      return {
        counter: 1,
      };
    },
    mounted() {
      setInterval(() => {
        this.counter += 1;
      }, 1000);
    },
  });
  app.mount('#app');
</script>

这是一个计时器的例子，mounted是Vue的生命周期函数，在Vue组件挂载的时候自动执行，setInterval是定时函数，每秒对counter加1，当页面加载的时候，自动执行setInterval函数。此时页面上每秒就会加1操作

编写字符串反转和内容隐藏

编写字符串反转和内容隐藏，了解vue的响应式、v-if指令和 v-on指令

StrReverse.html

<div id="app">
  {{msg}}
  <button v-on:click="reverseclick">点击反转</button>
</div>
<script>
  // 实例化Vue
  const app = Vue.createApp({
    data() {
      return {
        msg: 'helloWorld',
      };
    },
    methods: {
      reverseclick() {
        // 把msg倒置后赋值给msg
        this.msg = this.msg.split('').reverse().join('');
      },
    },
  });
  // 挂载到app的DOM节点
  app.mount('#app');
</script>

使用 methods 属性给 Vue 定义方法reverseclick，当点击按钮的时候，触发reverseclick方法，反转msg
v-on：给元素绑定事件监听器；缩写：@；

IsShow.html

<div id="app">
  <div v-if="show">Hello</div>
  <button v-on:click="isshowclick">显示/隐藏</button>
</div>
<script>
  // 实例化Vue
  const app = Vue.createApp({
    data() {
      return {
        show: true,
      };
    },
    methods: {
      isshowclick() {
        this.show = !this.show;
      },
    },
  });
  // 挂载到app的DOM节点
  app.moun

通过v-if根据show变量，控制元素的显示与隐藏，

v-if：基于表达式值的真假性，来条件性地渲染元素或者模板片段
与v-if一样的效果有v-show，两者的区别是：v-if会根据条件是否渲染DOM结构，v-show不管条件是否都会渲染DOM结构，然后再根据条件判断是否显示隐藏DOM结构。

编写TodoList

编写TodoList 的功能，了解双向绑定和循环。

TodoList.html

<div id="app">
  <input type="text" v-model="msg" />
  <button v-on:click="addclick" v-bind:title="title">添加</button>
  <ul>
    <!-- <li v-for="(item,index) of list ">{{item}}</li> -->
    <!-- <li v-for="item in list">{{item}}</li> -->
    <li v-for="(item,a) of list ">{{a}}-----{{item}}</li>
  </ul>
</div>
<script>
  // 实例化Vue
  const app = Vue.createApp({
    data() {
      return {
        list: [],
        msg: '',
        title: '这是一个title',
      };
    },
    methods: {
      addclick() {
        this.list.push(this.msg);
        // 添加后置空
        this.msg = '';
      },
    },
  });
  // 挂载到app的DOM节点
  app.mount('#app');
</script>

利用双向绑定input文字，点击方法addclick方法后把msg添加到数组list，最后使用v-for循环数组，循环数组可以把数组的下表也循环出来，在第二个参数，通常使用index表示，数组下标从0开始。

v-bind可以绑定标签的属性，在data修改标签的属性值。

组件概念初探

改写todolist示例，可以把li部分封装成一个组件，并且让这两个组件之间可以数据通讯。

TodoListComp.html

<div id="app">
  <input type="text" v-model="msg" />
  <button v-on:click="addclick" v-bind:title="title">添加</button>
  <ul>
    <todo-list
      v-for="(item,index) of list"
      v-bind:item="item"
      v-bind:index="index"
    ></todo-list>
  </ul>
</div>
<script>
  // 实例化Vue
  const app = Vue.createApp({
    data() {
      return {
        list: [],
        msg: '',
        title: '这是一个title',
      };
    },
    methods: {
      addclick() {
        this.list.push(this.msg);
        // 添加后置空
        this.msg = '';
      },
    },
  });
  app.component('todo-list', {
    // 接受父组件传递过来的数据
    props: ['item', 'index'],
    template: '<li>{{index}}-----{{item}}</li>',
  });
  // 挂载到app的DOM节点
  app.mount('#app');
</script>

上面的示例中，就是把li标签的重新封装成单独一个组件，使用app.component组成为全局组件，组件之间的通讯可以使用v-bind绑定属性，向子组件传递数据，子组件使用props接受父组件数据。

一个网页，可以看做成由一个一个的组件组成，一个组件内部可以由多个子组件组成；
对于一些常用的组件，我们可以封装成单独一个组件，给其他组件使用；
封装的组件需要具有低耦合性，也就是封装的组件内部不要有过多的逻辑；

Vue基础语法

经过前面的Demo了解了Vue的基本知识点，这章更进一步了解Vue的基础语法，包括组件概念、生命周期函数、常用的模板语法、计算属性computed、监听属性watch、样式的绑定、条件和循环渲染、事件的绑定和修饰符等基础语法内容。

Vue中应用和组件的基础概念

vm.html

<body>
    <div id="app"></div>
    <script>
      // createApp表示创建一个vue应用
      // 传入的参数表示这个应用最外层的组件，应该如何展示
      // mvvm 设计模式 m ->model 数据;v->view 视图;vm->viewModel 视图数据连接层
      const app = Vue.createApp({
        data() {
          return {
            message: 'hello vue',
          };
        },
        template: '<div>{{message}}</div>',
      });
      // vm代表就是vue的应用根组件
      const vm = app.mount('#app');
    </script>
  </body>

Vue是数据和视频的连接层，数据和视图交由我们编写，vue负责viewModel层，这样也少了操作DOM，只需要关注数据和页面的代码。

生命周期函数概念

生命周期函数就是在某一时刻自动执行的函数，下面是官方的图片：

在Vue.createApp之后，Vue首先会初始化setup（组合式api的内容），分析绑定事件生命周期函数之后，执行第一个生命周期函数beforeCreate。
执行beforeCreate后，Vue会初始化选项式API，分析数据和模板之间绑定的数据，然后执行created，此时DOM还没有挂载。
执行created后，此时Vue的实例初始化完成，Vue会去判断是否存在template，存在就编译成render函数，没有则使用Html作为模版编译，然后执行beforeMount，此时DOM还没有挂载
执行beforeMount后，会把Vue实例挂载到DMO上，然后执行mounted，此时组件已经渲染到页面。
当组件的data数据发生改变，beforeUpdate会首先自动执行，然后Vue会重新渲染。数据改变->beforeUpdate->Vue渲染。
当组件的data数据发生改变并且页面已经完成更新后，updated会自动执行。
当Vue实例销毁时，会执行beforeUnmount，此时DOM并没有完全销毁，执行完beforeUnmount，Vue才会销毁页面的DOM结构。
当Vue实例销毁并且DOM销毁后，Vue会执行unmounted，此时vue的生命周期结束

template.html

<body>
  <div id="app"></div>
  <script>
    const app = Vue.createApp({
      //在实例生成之前会自动执行的函数
      beforeCreate() {
        console.log('this is beforeCreate');
      },
      // 在实例生成之后会自动执行的函数
      created() {
        console.log('this is created');
      },
      //在组件渲染到页面之前自动执行的函数
      beforeMount() {
        const doc = document.getElementById('app').innerHTML;
        console.log(doc + 'this is beforeMount');
      },
      // 在组件渲染到页面之后自动执行的函数
      mounted() {
        const doc = document.getElementById('app').innerHTML;
        console.log(doc + 'this is mounted');
      },
      // 在data中数据发生改变的时候立即执行
      beforeUpdate() {
        const doc = document.getElementById('app').innerHTML;
        console.log(doc + 'this is beforeUpdate');
      },
      // 在data中数据发生改变，同时页面已经更新完成，立即执行的函数
      updated() {
        const doc = document.getElementById('app').innerHTML;
        console.log(doc + 'this is updated');
      },
      // 当Vue失效时会自动执行
      beforeUnmount() {
        const doc = document.getElementById('app').innerHTML;
        console.log(doc + 'this is beforeUnmount');
      },
      // 当Vue失效并且DOM销毁时会自动执行
      unmounted() {
        const doc = document.getElementById('app').innerHTML;
        console.log(doc + 'this is unmounted');
      },
      data() {
        return {
          msg: '生命周期函数实例，请打开控制台',
        };
      },
      template: '<div>{{msg}}</div>',
    });
    // vm代表就是vue的应用根组件
    const vm = app.mount('#app');
  </script>
</body>

常用模版语法

v-html：不对变量上的标签进行转义，直接输出html
v-bind：标签属性值是变量的时候，需要使用v-bind绑定标签属性
v-once：在数据改变的时候，不会重新渲染，还是使用的初始值data
v-if：判断条件，true则渲染DOM，false则不渲染DOM
v-on：事件绑定

v-on：v-on的缩写可以写成@
v-bind：v-on的缩写可以写成 :

数据、方法、计算属性和侦听器

vue的数据可以写在data部分，方法可以写在method部分，计算属性computed只有依赖的属性值发生改变的时候才会重新计算，而method方法只要触发了就会执行，computed可以节省资源的浪费，watch监听器可以监听数值的变化，数值变化会自动执行，可以接受新的值和旧的值两个参数，根据官方的文档，当需要在数据变化时执行异步或开销较大的操作时，watch这个方式是最有用的。

computed.html

<body>
   <div id="app">
     <div>{{total}}</div>
     <div>{{count}}</div>
   </div>
   <script>
     const app = Vue.createApp({
       watch: {
         // 当pricd发生改变的时候，重新计算
         pricd(newval, oldval) {
           this.newtotal = newval + count;
           setInterval(() => {
             console.log('发生改变新的值' + newval + '旧的值' + oldval);
           }, 3000);
         },
       },
       computed: {
         // 当计算属性的内容发生变更时，才会重新计算
         total() {
           return Date.now();
           // return this.count + this.pricd;
         },
       },
       data() {
         return {
           count: 1,
           pricd: 2,
           newtotal: 10,
         };
       },
       methods: {
         gettotal() {
           // 当页面重新渲染的时候，才会重新计算
           return Date.now();
           // return this.count + this.pricd;
         },
       },
     });
     const vm = app.mount('#app');
   </script>
 </body>

样式绑定语法

通过:style和:class可以绑定CSS样式。通过:style绑定的样式也可以在data中使用对象的方式编写。

Style.html

 <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<style>
   .red {
     color: red;
   }
 </style>
<body>
    <div id="app"></div>
    <script>
      const app = Vue.createApp({
        data() {
          return {
            message: 'hello vue',
            classStr: 'red',
            styleStr: ' color: blue',
            styleObj: {
              color: 'orange',
              background: 'yellow',
            },
          };
        },
        template:
          '<div :style="styleStr">{{message}}</div><div :class="classStr">{{message}}</div><div :style="styleObj">{{message}}</div>',
      });
      // vm代表就是vue的应用根组件
      const vm = app.mount('#app');
    </script>
  </body>

条件渲染

v-if根据判断条件，来控制DOM元素的存在与否，如果是则DOM渲染，如果否则DOM不渲染，有一个跟v-if相似的叫v-show，v-show不管条件与否都会渲染DOM结构，然后通过display来控制元素是否展示，在一些需要频繁展示隐藏的情况下，v-show更有优势，在一些不频繁展示隐藏的情况下，v-if更有优势

show.html

<body>
  <div id="app"></div>
  <script>
    const app = Vue.createApp({
      data() {
        return {
          message: 'v-if',
          msg: 'show',
          show: false,
        };
      },
      template:
        '<div v-if="show">{{message}}</div> <div v-show="show">{{msg}}</div>',
    });
    // vm代表就是vue的应用根组件
    const vm = app.mount('#app');
  </script>
</body>

列表循环渲染

在Vue中需要循环渲染一个数组，可以使用v-for，v-for除了可以渲染数组外，也可以循环对象；
在vue3中，v-if和v-for在同一个标签时候，v-for的优先级会更高，所以需要在v-for后面一层添加v-if；
而在在vue2中，v-if和v-for在同一个标签时候，v-if会比v-for优先级更高，会先判断再循环；
无论哪一种，都不建议这么做，因为会带来性能方面的浪费。

list.html

<body>
   <div id="app">
     <div v-for="(item,index) in listArr">
       <!-- lee不显示 -->
       <div v-if="item !== 'lee'">{{index}}---{{item}}</div>
     </div>
     <button @click="addArr()">数组按钮</button>
     <div v-for="(value,key) in listboj">{{key}}---{{value}}</div>
     <button @click="addObj()">对象按钮</button>
     <template v-for="item in 10">
       <!-- 5不显示 -->
       <div v-if="item !==5 ">{{item}}---</div>
     </template>
   </div>
   <script>
     const app = Vue.createApp({
       data() {
         return {
           listArr: ['dell', 'lee', 'teacher'],
           listboj: {
             name: 'dell',
             lastname: 'lee',
             job: 'teacher',
           },
         };
       },
       methods: {
         addArr() {
           this.listArr.push('hello');
           // this.listArr.pop();
           // this.listArr.shift();
           // this.listArr.unshift('hello');
         },
         addObj() {
           this.listboj.new = 'newval';
         },
       },
       template: '',
     });
     // vm代表就是vue的应用根组件
     const vm = app.mount('#app');
   </script>
 </body>

事件绑定

事件修饰符：

@click事件事件后面可以接表达式
点击事件带有默认参数有event，如果添加了参数，可以在方法名参数写上$event
一个标签上存在多个事件点击需要写上括号，如： @click="add(),add1()"
@click.stop可以阻止点击事件冒泡。
事件修饰符还有：prevevt、capture、self、once、passive

按键修饰符：

@keydown是按键事件
.enter是指按回车的时候执行
按键修饰符还有：tab、delete、esc、up、down、left、right

鼠标修饰符：

@click后面可以加鼠标修饰符
鼠标修饰符有：left、right、middle

存疑！！！：以下代码为按住ctrl键并点击的时候触发事件，如果按住ctrl和A键，再点击同样也会触发事件，如果想只按住ctrl再点击才有效可以使用.exact。

1	<div @click.ctrl.exact="addclick">123</div>

表单中双向绑定指令的使用

官方文档：https://cn.vuejs.org/guide/essentials/forms.html

表单双向绑定：

input框中的text、checkbox、radio、number等都可以使用 v-model双向绑定
checkbox可以通过true-value、false-value自定义选中时候显示文字
select也可以双向绑定，多选可以使用multiple
option里面的value可以存放对象值

表单修饰符：

v-model.lazy，鼠标移出输入框点击时触发
v-model.number，修饰符会在输入框有 type=”number” 时自动启用。
v-model.trim，去除输入框前后空格

组件的理念

组件的定义及复用性

Vue组件是Vue.js框架中最强大的功能之一。它们是可复用的Vue实例，可以封装HTML、CSS和JavaScript代码，使代码更易于维护和扩展。

网页可以理解为一块一块的组件拼装起来

Vue可以通过 app.component全局注册组件，该组件可以重复使用，数据逻辑互不干扰

局部组件和全局组件

Vue可以全局组成组件，全局组件可以在任何其他组件使用，缺点是性能降低，不管组件有没有使用，都会挂载在Vue实例上，Vue也可以局部注册组件，组件只能在注册的父组件使用。建议大写字母开头，使用驼峰命名，局部组件使用时，要做一个名字和组件间的映射关系，不写映射，Vue也会尝试自动映射。

组件间传值及传值校验

单项数据流的理解

Non-Props 属性是什么

父子组件间如何通过事件进行通信

组件间双向绑定高级内容

使用插槽和具名插槽解决组件内容传递问题

作用域插槽

动态组件和异步组件

基础语法知识点查缺补漏

Vue 中的动画

单组件元素的动画实现
列表动画的实现
状态动画的实现
CSS 动画与JS 动画

Vue 中的高级语法

Mixin 混入的开发

Vue 中的自定义指令
Teleport 传送门功能
更加底层的 render 函数
插件的定义和使用

Composition API

Composition APl 的产生背景
setup 函数的使用及参数
响应式引用语法
计算属性和侦听器的写法
案例开发帮你理解新语法

Vue 项目开发配套工具

VueCLl 脚手架工具
大型工程项目结构单文件组件的使用
Vue-Router 入门学习
VueX 基础内容学习

Vue基础入门