Vue3学习，项目搭建，以及简单语法练习,持续更新

左手的ㄟ右手 2022-09-10 13:16 4阅读 0赞

### 安装脚手架 ###

npm install @vue/cli -g

### 创建项目 ###

vue create vue_admin3.0

### 安装路由（4.0） ###

npm install vue-router@4.0.0-beta.6 -S

### 删除node\_modules 文件夹 ###

rimraf node_modules

### 安装less(报错就修改版本) ###

cnpm i less less-loader --save-dev

## Vue3.0练习语法 ##

<template>
      <div>
        <img alt="Vue logo" src="@/assets/logo.png" />
        <div>home页面</div>
        <p>{ {  val }}</p>
        <ul>
          <li v-for="(item, index) in list" :key="index" @click="handle(item)">
            { {  item }}
          </li>
        </ul>
        <div>
          <h4>点击了{ {  checkitem }}</h4>
        </div>
        <div>
          <p @click="changeHandle">{ {  msg }}</p>
        </div>
        <div @click="changeHandle2">{ {  person.name }}{ {  person.age }}</div>
        <div>
          <span class="btngopage" @click="$router.push('/Myinfo')">跳转第二个页面</span>
        </div>
      </div>
    </template>
    
    <script>
    import {  ref, reactive } from "vue";
    export default { 
      name: "",
      setup() { 
        let val = ref("小明的爸爸叫什么？");
        const list = ref(["坦克", "手枪", "奥特曼"]);
        const checkitem = ref("");
        const handle = (item) => { 
          checkitem.value = item;
        };
    
        let msg = ref("初始化"); //string number
        let person = reactive({  name: "lisi", age: 20 }); // object array
        const changeHandle = () => { 
          msg.value = "改变的";
        };
        const changeHandle2 = () => { 
          person.age = 30;
        };
        return { 
          val,
          list,
          handle,
          checkitem,
          msg,
          person,
          changeHandle,
          changeHandle2,
        };
      },
    };
    </script>
    <style scoped lang="less">
    .btngopage{ 
      display: inline-block;
      background-color: rgb(255, 208, 0);
      line-height: 40px;
      height: 40px;
      font-style: 14px;
      padding: 0 20px;
      text-align: center;
      border-radius: 5px;
    }
    </style>

## vue3生命周期 ##

<template>
        <div>
            <h3>vue3系列生命周期</h3>
            <div>
                <h4>beforeCreate -> 使用 setup()</h4>
                <h4>created -> 使用 setup()</h4>
                <h4>beforeMount -> onBeforeMount</h4>
                <h4>mounted -> onMounted</h4>
                <h4>beforeUpdate -> onBeforeUpdate</h4>
                <h4>updated -> onUpdated</h4>
                <h4>beforeDestroy -> onBeforeUnmount</h4>
                <h4>destroyed -> onUnmounted</h4>
                <h4>errorCaptured -> onErrorCaptured</h4>
            </div>
        </div>
    </template>
    <script>
    import { onBeforeMount ,onUpdated, onBeforeUnmount,onUnmounted,onErrorCaptured} from "vue"
    export default { 
        setup() { 
            onBeforeMount(()=>{ 
                console.log("onBeforeMount","挂载")
            })
            onUpdated(()=>{ 
                console.log("onBeforeMount","更新")
            })
            onBeforeUnmount(()=>{ 
                console.log("onBeforeUnmount")
            })
            onUnmounted(()=>{ 
                console.log("onUnmounted")
            })
            onErrorCaptured(()=>{ 
                console.log("onErrorCaptured")
            })
        }
    }
    </script>

## watch使用 ##

<template>
        <div>
            <input type="text" v-model="state">
            <div>{ { state}}</div>
            <input type="text" v-model="data.count">
            <div>{ { data.count}}</div>
            <div>{ { data.name}}</div>
            <br/>
            <h3>watchEffect 它与 watch 的区别主要有以下几点：</h3>
            <div>不需要手动传入依赖<br/>
            每次初始化时会执行一次回调函数来自动获取依赖<br/>
            无法获取到原值，只能得到变化后的值
            </div>
        </div>
    </template>
    <script>
    import { ref ,watch ,reactive,watchEffect} from "vue"
    export default { 
        setup(){ 
            const state = ref(0);
            const data = reactive({ count: 0,name: 2 });
            watch(state,(newvalue,oldvalue)=>{ 
                console.log(newvalue,oldvalue)
            });
            watch(()=>data.count,(newvalue,oldvalue)=>{ 
                console.log(newvalue,oldvalue)
            })
            watchEffect(() => { 
              console.log(data.name)
              })
            setTimeout(() => { 
                data.name = data.name++
              }, 1000)
            return{ 
                state,data
            }
        }
    }
    </script>
    <style scoped>
    
    </style>