基础

• vue项目的结构有哪些元素：
  • src文件夹、资源文件、依赖库、依赖描述文件package. json、vite.config.js：Vue配置文件
• 项目初始化：init 项目vue@latest、cnpm intall
  • npm init vue@latest
  • npm install -g cnpm --registry=https://registry.npmmirror.com
  • cnpm intall、npm run dev
• 构建页面布局

<template>
  <div>{{ name }}</div>
</template>
<script>
export default {
  data() {
    return name = "demo"
  }
}
</script>

简单使用

• 文本内容通过JS绑定

• 模板语法：把data内容显示在页面上，用双括号

• 使用：可以绑定data内的值，（可以与变量绑定v-bind）

• v-if判断是否渲染（v-xx是Vue的指令，指令 Directives）

  1. v-if 有更高的切换开销，适合在切换频率较低的情况下使用。
  2. v-show 适用于需要频繁切换可见性的情况，因为元素一旦被渲染，切换可见性时无需重新渲染。

• v-for的使用，复制单行数据，把数组中的每一项不断渲染到页面上

  • v-for="{{}}"
  • 绑定Key最好给唯一索引，给到数据的id是最好的。顺序变的话index可能会变

<p v-for="item in list" :key="item">
<p v-for="item of list" :key="item">
<p v-for="(item, index) in list" :key="item">
<p v-for="(value,key,index)of userInfo">{{value }}-{key }}-{index }}</p>

• 数组操作

  • 改变原数组：push、pop

  • 不改变原数组：concat、filter、slice

事件

• @click=""
• 创建函数在methods里面建方法自己处理
• Vue中的event.对象，就是原生JS 的 event.对象
  • 可以通过原生的方法改变里面的值
  • 调用的时候记得$event
  • 事件修饰符：阻止父级事件触发（事件冒泡）@click.stop=""

阻止默认事件

<template>
 <h3>事件修饰符</h3>
 <a @click.prevent="clickHandle" href="https://itbaizhan.com">百战程序员</a>
</template>

<script>
export default{
  data(){
    return{

    }
  },
  methods:{
    clickHandle(e){
      //阻止默认事件
      // e.preventDefault();
      console.log("点击了");
    }
  }
}
  
</script>

计算属性compute

• computed：计算属性

  • 方法：方法调用总是会在重渲染发生时再次执行函数

  • 调用一次和多次的区别

  • 计算属性值基于其响应式依赖被缓存，一个计算属性仅会在响应式依赖更新时才会被重新计算

例子：

<template>
  <h3>{{  ppx.name }}</h3>
  <p>{{ ppxContent }}</p>
</template>

<script>
export default {
  data() {
    return {
      ppx: {
        name: "学习内容",
        content: ["前端", "Java", "GO"]
      }
    };
  },
  computed: {
    ppxContent() {
      return this.ppx.content.length > 0 ? 'Yes' : 'No';
    }
  }
}
</script>

计算属性ppxContent依赖于this.ppx.content。当ppx对象的content数组发生变化时，计算属性会被重新计算。如果ppx对象其他属性变化，（变了我也不管，与ppxContent计算属性无关），则计算属性不会重新计算，而是直接使用之前缓存的结果，以提高性能。这种机制确保只有相关依赖发生变化时，计算属性才会重新计算，避免不必要的计算开销。

事件

• 总结一下，就是::click-方法、:class-变量、style-变量（不推荐，改起来很麻烦）、

• 对象形式去绑定

• watch：监听响应式数据（data、变量 == 响应式变量）

  • 属性名 《==》方法名

• 让变量变为响应式的

• v-model

  • v-model.lazy="message"
  • 默认情况下，v-model会在每次input事件后更新数据。你可以添加lazy修饰符来改为在每次change事件后更新数据(变成失去焦点之后更新数据)
  • lazy、number、trim

属性改变小结

内容改变：{{模板语法} 属性改变：v-bind:指令 事件：v-on:click

• 读取DOM

  • this.$refs.username.innerHtml、
  • input标签内容this.$refs.username.value

• 组件

  • 单文件组件
  • template\script\style

• 样式的scoped：只在当前组件生效 ，生效作用域

• 组件引入方式

  • 局部：引入组件三步走：import引入组件、注入组件components、标签写法显示组件
  • 全局：app.component('xxxCimoiennt', xxxCimoiennt)

• 打包的时候会打到这个组件，不利于维护

• props组件通信

• 父组件传给子组件的过程

slot

slot：在父组件中随便编辑好的东西就可以插入到子组件中

1. 命名#slot1、写道里面就<slot name="slot1">
2. 插槽内容可以访问到父组件的数据作用域，因为插槽内容本身是在父组件模板中定义的
3. 完成

向Slot传值例子

<template>
    <h3>Slots 再续集</h3>
    <slot name="header" :msg="childMessage"></slot>
    <slot name="main" :job="jobMessage"></slot>
</template>
<script>
export default{
    data(){
        return{
            childMessage:"子组件数据",
            jobMessage:"itbaizhan"
        }
    }
}
</script>

<template>
  <SlotsAttr>
    <template #header="slotProps">
      <h3>{{ currentTest }}-{{ slotProps.msg }}</h3>
    </template>
    <template #main="slotProps">
      <p>{{ slotProps.job }}</p>
    </template>
  </SlotsAttr>
</template>

<script>
import SlotsAttr from './components/SlotsAttr.vue'
export default{
  data(){
    return{
      currentTest:"测试内容"
    }
  },
  components:{
    SlotsAttr
  }
}
</script>

组件生命周期

• create
• mount
• update
• unmount

通过ref获取dom元素

• 先渲染出框架架子，然后出现数据。数据是其次的，结构最重要

跨组件传递数据：只能由上到下

• provide、inject

全局注册

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
app.provide("golabData","我是全局数据")
app.mount("#app")

• 需要挂载DOM才能显示页面：app.mount("#app")

vite构建工具 → 通过main.js引入