用vue实现简易的todolist（学习笔记）

使用vue3构建helloworld程序

在html页面中引入vue3

首先我们打开IDE并且新建一个HTML文件，命名为helloworld.html，然后在代码编辑页面输入！，会自动的生成html模板。然后，我们将vue3引入到项目当中，引入的方式如下：

在head标签当中写入script标签，<script src="https://unpkg.com/vue@next"></script>

这样vue3就在我们的项目当中成功的引入了

创建一个vue实例并将它挂载到div上面

1. 创建一个div，并给它命名“mydiv”

   <div id="mydiv"></div>

    2.创建一个vue实例，命名为myvue

const myvue=Vue.createApp({
        template: "<div>hello</div>";})

   3.将创建的vue实例挂载到mydiv上

 const mount=myvue.mount("#mydiv");

 编写setup函数

setup函数介绍

setup函数是vue3当中的入口函数，所以学习vue3是从setup函数的学习开始的，另外它也是vue3当中的新的生命周期函数，用来代替vue2当中的beforeCreate和created

setup函数的写法

在vue2当中，数据定义在data当中而方法定义在method中，而在vue3当中，数据和方法统一定义在setup函数当中，setup函数接受两个参数，第一个参数props（用来接收从父组件传递过来的属性），第二个参数context，setup函数最终以对象的形式返回这些数据和方法，这样，这些数据和方法就能够给template来使用了

const myvue=Vue.creatApp({
     template:'<div>hello</div>',
     setup(props,context){
       //在这里定义数据和方法
        return {
      //在这里返回给template使用的数据和方法;}          
 
}})
     

例如，我们再setup当中定义一个数据来让template使用

 const myview=Vue.createApp({
    template:'<div> {{ neme }}</div>',
    setup(props,context){
       return{ name:'bill';}
   }
})

 此外，我们还可以在setup当中定义一个handdleclick方法，并且在div中绑定该方法

 const myview=Vue.createApp({
     tempalte:'<div @click='handleclick'> {{ name }}</div>'
      setup(props,context){
             return {
              name:'bill',
              handleclick:()=>{
                  alert('helloworld');}}}
               })

总结

本篇博客主要介绍了通过vue3创建一个helloworld程序，以及介绍了如何在项目当中引入vue3，最后还有setup函数的介绍与使用