vue3

• 创建vue项目步骤

1. npm create vite@latest
2. cd EasyB
3. npm install
4. npm run dev

• 项目安装完

1. 安装npm install ；
2. 安装路由npm install vue-router；
3. 安装 npm install axios;
4. 安装 npm install element-plus --save；

• 绑定数据

1. script模块

   <script >
   import {ref} from 'vue';
   export default{
     name:'App',
     setup(){
       const count=ref(0);
       const changeCount=function(){
         //count是一个对象，用ref声明的一定要用.value赋值和取值；
         count.value=count.value+10;  
       }
       //返回需要绑定的数据
       return {count,changeCount};
     }
   }
   </script>

2. template模块
   

   <template>
     <!--v-text绑定count -->
   <div v-text="count"></div>
   <button @click='count++'>点击此按钮count++ </button>
   <button @click="changeCount">点击此按钮执行changCount方法</button>
   </template>

3. style模块，写样式

   <style scoped>
   table,td{
       border: 1px solid black;
       border-collapse: collapse;
   }
   </style>

• 循环数组中的数据，每行展示一个数据

1. 定义函数

   <script>
   import {ref} from 'vue';
   export default{
       name:'EasyC',
       setup(){
           const staffList=ref([
               {name:'张三',sex:'男',age:19},
               {name:'李四',sex:"男",age:20},
               {name:'王五',sex:'女',age:19}
   
           ]);
           return{staffList}; //绑定数据
       }
   }
   
   </script>

2. 在template中设置

   <template>
   <table>
       <tr><td>姓名</td><td>性别</td><td>年龄</td></tr>
       <!-- 循环数组中的数据，每行展示一个数据-->
       <tr v-for="item in staffList">
       <td>{{ item.name }}</td>
       <td>{{ item.sex }}</td>
       <td>{{ item.age }}</td>
       </tr>
   </table>
   </template>

3. 定义样式

   <style scoped>
   table,td{
       border: 1px solid black;
       border-collapse: collapse;
   }
   </style>

    

4. 设置路由  在index文件，设置根据那个地址进行跳转

   //路由的配置
   //路由就是访问哪一个地址就跳到哪一个页面上去
   import {createRouter, createWebHashHistory } from "vue-router";
   const router=createRouter({
       history:createWebHashHistory(),
       routes:[
           {path:'/',redirect:'/easya'},
           {path:'/easye',component:()=>import('../components/EasyE.vue')},
           {path:'/easya',component:()=>import('../components/EasyA.vue')},
           {path:'/easyb',component:()=>import('../components/EasyB.vue')},
           {path:'/easyc',component:()=>import('../components/EasyC.vue')}
       ]
   });
   export default router;

    

5. v-show="flag" 存在浏览器检查代码中 v-if="flag"不存在