vue3，NO_1

Posted 2021-06-14 lixingqian

vue3开始

使用vue-cli3创建vue3项目

• 执行命令 vue create 项目名称

安装vue-router

• npm i vue-router

• 在src文件创建router=》index.js文件；

  • // src/router/index.js
    import { createRouter, createWebHashHistory } from \'vue-router\'
    import Home from \'../views/Home.vue\'
    import MyPageOne from \'../views/MyPageOne.vue\'
    
    // createRouter 创建路由实例
    const router = createRouter({
      history: createWebHashHistory(), // hash模式：createWebHashHistory，history模式：createWebHistory
      routes: [
        {
          path: \'/\',
          component: Home
        },
        {
            path: \'/mypage\',
            component: MyPageOne
          }
      ]
    })
    
    // 抛出路由实例, 在 main.js 中引用
    export default router
    

• main.js中引入

  • import { createApp } from \'vue\'
    import App from \'./App.vue\'
    import router from \'./router\'
    
    const app = createApp(App) // 创建实例
    
    app.use(router)
    
    app.mount(\'#app\')
    

• App.js中

  • <template>
    <!-- 和 vue-router3 一样，展示路由的组件的地方 -->
      <router-view />
    </template>
    
    <script>
    
    export default {
      name: \'App\'
    }
    </script>
    

简易todolist

<template>
  <div>
      <div>
        <input v-model="inputValue" />
        <button @click="addList(\'ddd\')">添加</button>
      </div>
      <div>
          <button @click="changeType(\'全部\')">全部</button>
          <button @click="changeType(\'已完成\')">已完成</button>
          <button @click="changeType(\'未完成\')">未完成</button>
      </div>
      <div>
        <div v-for="item in list" :key="item.id">
            <template v-if="type === \'全部\'">
                <label @click="changeIs(item.id)">{{ item.title }}</label>
                <button @click="delectList(item.id)">删除</button>
            </template>
             <template v-if="type === \'已完成\' && item.isBool">
                 <label @click="changeIs(item.id)">{{ item.title }}</label>
                <button @click="delectList(item.id)">删除</button>
             </template>
             <template v-if="type === \'未完成\' && !item.isBool">
                 <label @click="changeIs(item.id)">{{ item.title }}</label>
                <button @click="delectList(item.id)">删除</button>
             </template>
        </div>
      </div>
  </div>
</template>

<script>
import { reactive, toRefs, onBeforeMount, onMounted } from \'vue\'
export default {
  name: \'\',
  setup() {
    console.log(\'1-开始创建组件-setup\')
    const data = reactive({
        list:[
            {id:1,title:\'oooo\',isBool:true},
            {id:2,title:\'xxxx\',isBool:true},
        ],
        number:3,
        inputValue:\'信息\',
        type:\'全部\',
        addList: () => {
           data.list.push({id:data.number++,title:data.inputValue,isBool:true})
        },
        delectList: id =>{
            data.list =data.list.filter(item => item.id !== id)
        },
        changeIs: id =>{
            data.list.forEach(item =>{
                if(item.id === id){
                    item.isBool = !item.isBool;
                }
            })
            data.list = [...data.list]
        },
        changeType: type =>{
            data.type = type;
        }
    })
    onBeforeMount(() => {
      console.log(\'2.组件挂载页面之前执行----onBeforeMount\')
    })
    onMounted(() => {
      console.log(\'3.-组件挂载到页面之后执行-------onMounted\')
    })
    return {
      ...toRefs(data),
    }
  },
}

</script>