vue3 基础2 3-31

vue3 基础

• 指令

• vue 组件化开发

• 组件开发-组件通信 【父传子 子传父 】

• 插槽 slot v-slot

• 监听器 侦听器 watch watchEffect

• 计算属性 computed

• 页面级组件开发-路由配置 vue-router

• 多层级路由

• 生命周期

• UI框架使用 Element plus

• pinia 状态管理库

1.指令 14个

• 渲染 v-text v-html

• 显示隐藏 v-show v-if

• 事件 v-on:事件类型=“执行函数”

• 判断 v-else-if v-else

• 双向绑定 v-model

9 .v-bind 操作属性 动态属性

  <div  v-bind:属性名="表达式">  </div> 
  <div  :属性名="表达式">  </div> 

  
  <标签  v-bind:id="idName"   v-bind:class="条件1?表达式1:表达式2"    V-bind:style="{background:xx;}"  type placeholder checked href  >

• 开关灯效果

  <template>
      <div v-bind:class="boxName ">
            <button @click="changeBoxName('box active')">开灯</button>
            <button @click="changeBoxName('box')"> 关灯</button>
      </div>
  </template>
  ​
  ​
  <script setup>
    import {ref} from 'vue'
  ​
    const boxName = ref('box')
    const changeBoxName = (name)=>{
        boxName.value = name
    }
  ​
  </script>

  
  <template>
       <!-- 通过中间变量控制 是否加上acitve -->
      <div v-bind:class="active==0?'box':'box active' ">
            <button @click="changeActive(1)">开灯</button>
            <button @click="changeActive(0)"> 关灯</button>
      </div>
  </template>
  ​
  ​
  <script setup>
    import {ref} from 'vue'
    // 中间变量 表达 开灯 还是 关灯
  ​
    const active = ref(0)
    const changeActive = (i)=>{
      active.value = i
    }
  ​
  </script>

  
  <template>
       <!-- 通过中间变量控制 是否加上acitve -->
      <div :class="active==0?'box':'box active' ">
            <button @click="()=>active=1">开灯</button>
            <button @click="()=>active=0"> 关灯</button>
      </div>
  </template>
  ​
  <script setup>
    import {ref} from 'vue'
    // 中间变量 表达 开灯 还是 关灯
  ​
    const active = ref(0)
   
  ​
  </script>
  ​

  
  <template>
       <!-- 通过中间变量控制 是否加上acitve -->
      <div  class="box"   :class="active==1?'active':''">
            <button @click="()=>active=1">开灯</button>
            <button @click="()=>active=0"> 关灯</button>
      </div>
  </template>
  ​
  <script setup>
    import {ref} from 'vue'
    // 中间变量 表达 开灯 还是 关灯
    const active = ref(0)
  ​
  </script>

• 实现默认的开关灯效果

• 只有一个按钮实现开关灯

  
  <template>
      <!-- 通过中间变量控制 是否加上acitve -->
     <div  class="box"   :class="active?'active':''">
           <button @click="active=!active">开关灯</button>
          
     </div>
  </template>
  ​
  ​
  <script setup>
   import {ref} from 'vue'
   // 中间变量 表达 开灯 还是 关灯
   // 数据驱动 状态：2个值 开true  关false 
  //  更新状态 修改变量 xx = !xx
  ​
   const active = ref(false)
  ​
  ​
  </script>

• 实现 希望清单 顶部的选中效果切换

• 鼠标移入 选项卡 标题，更改标题的背景色和字体颜色，并显示对应的内容，鼠标移出整个选项卡 范围隐藏所有的选项卡显示

  
  <template>
      <div class="box" @mouseleave="active=-1">
          <div class="title-box">
          <div class="title " :class="active==0?'active':''"  @mouseover="changeActive(0)">菜单01</div>
          <div class="title"  :class="active==1?'active':''"  @mouseover="changeActive(1)">菜单02</div>
          <div class="title"  :class="active==2?'active':''"  @mouseover="changeActive(2)">菜单03</div>
      </div>
      <div class="content-box">
          <div class="content" v-show="active==0">内容1</div>
          <div class="content" v-show="active==1">内容2</div>
          <div class="content" v-show="active==2">内容3</div>
          
      </div>
      </div>
  </template>
  ​
  ​
  <script setup>
   import {ref} from 'vue'
   const active = ref(-1)
   const changeActive = (i) =>{
      active.value = i;
   }
  ​
  </script>
  ​

10.v-for 循环

  
  <template>
      <div  v-for="(item,index) in userList"  :key="index">
          {{ index }}
          <p>   姓名：  {{ item.name }}</p>
          <p>   年龄:{{ item.age }}  </p>
          
      </div>
  </template>
  ​
  <script setup>
    const userList = [{name:'张麻子',age:20},{name:'李四',age:30}]
  </script>
  ​
  ​
  <style>
  </style>

• 基础语法

• 实现希望清单的 列表和 删除

11. 其他指令 3个 -【了解】

• v-pre

将 {{}} 作为静态文本输出到页面

  
  <div v-pre>{{从你的全世界路过}}  </div>

• v-cloak

等待页面数据 拿到之后 再渲染页面

  
  <template>
        <div v-cloak>{{ a}}  </div>
  </template>
  ​
  ​
  <script setup>
      import {ref} from 'vue'
      let a = ref(null)
      setTimeout(() => {
          a.value =110000
      },1000);
  ​
  ​
  </script>

• v-once

只渲染一次 数据只能在定义赋初值时 渲染到页面，后面更改这个变量的值 不会重新渲染页面

  
  <template>
         <div v-once>
          <!-- 永远都是0 -->
         开始初值：  {{ num }}
         </div>
         <div>
          现在的值： {{ num }}
         </div>
         <button @click="num++">+</button>
  </template>
  <script setup>
      import {ref} from 'vue'
      const num = ref(0)
  ​
  </script>

v-text

v-html

v-on

v-show

v-if

v-else-if

v-else

v-model

v-bind

v-for

v-pre

v-once

v-cloak

14.插槽 v-slot

2.组件化开发

优：

1.可维护性高

2.复用性高

3.组件化开发 语法

• 子组件

子组件 命名 必须是大驼峰

子组件 自己不发送axios 或请求后端

创建 子组件 src/components/子组件名.vue

• 父组件 App.vue

  
  <template> 
      <AppHeader /> 
          <app-header /> 
        <AppHeader ></AppHeader> 
  </template>
  ​
  ​
  <script setup>
      //导入子组件
      import AppHeader form './components/AppHeader.vue'
      
  </script>

1.css 预处理器

支持变量定义和变量取值 (先定义 后使用) ***

层级嵌套语法 ***

内置函数和 内置的处理语句（if for 循环）

• less

  
  npm install less

  
  @width: 10px;
  @height: @width + 10px;
  ​
  #header {
    width: @width;
    height: @height;
  }

  
  #header {
    color: black;
    .navigation {
      font-size: 12px;
    }
    .logo {
      width: 300px;
    }
  }

• sass

  
  npm install sass 

  
  $nav-color:#f90;
  nav {
    $width: 100px;
    width: $width;
    color: $nav-color;
  }
  ​
  //编译后
  ​
  nav {
    width: 100px;
    color: #F90;
  }

  
  #content {
    article {
      h1 { color: #333 }
      p { margin-bottom: 1.4em }
    }
    aside { background-color: #EEE }
  }

• stylus

  
  #header
    width 100px
    height 200px
    .navigation 
      font-size 12px
   

3.使用less

• 安装less

  
  npm install less -D   

• 修改全局的样式文件 style.css style.less

如果使用的是 sass 文件后缀 xxx.scss

  
  html,body,#app{
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
  }
  ​
  *{
    padding: 0;
    margin: 0;
  }
  ​
  // 在全局less文件中定义的变量可以在所有的组件使用
  @primary:#C20C0C;
  @bgColor:#f5f5f5;
  @blackColor:#333;
  @smallSize:12px;
  @normalSize:14px;
  @bigSize:16px;

• 在组件中使用这个变量

  
  <style scoped lang="less">
    //导入全局的less样式  里面有变量
  @import url('../style.less');
  ​
  .header{
      width: 100%;
      height: 70px;
      background-color: @blackColor;
  }
  </style>