/learing_vue

Learning Vue

Primary LanguageVue

Vue的学习

一.Vue工程的项目结构

  • 1.vite.config.js - 项目配置文件 基于vite的配置
  • 2.package.json - 项目包文件 核心依赖项变成Vue3.x 和vite
  • 3.main.js - 入口文件 createApp函数创建应用实例
  • 4.app.vue -根组件 SFC但文件组件script-template-style
    • 变化一：脚本script和模板template顺序调整
    • 变化二：模板template不再要求唯一跟元素
    • 变化三：脚本script添加setup标志支持组合式APi
  • 5.index.html -单页入口 提供id为app的挂在点
  • 6.创建一个项目，使用命令行
npm init vue@latest
  • 7.安装包
npm install
  • 8.将项目跑起来
npm run dev

setup跟beforeCreate函数

参数解释：

  • el:挂载点
  • data： 数据对象
  • methods：方法，方法中科通过this来调用data中的数据
  • {{}}：差值表达式，用于获取data中的参数

v-text、v-html、v-on、v-show、v-if、v-bind、v-model详解

  • 1.内容绑定：v-text,v-html
  • 2.事件绑定：v-on 可简写为@，当有事件触发时，即方法调用等可使用
  • 3.显示切换：v-show、v-if
    • 共同点：根据表达式的真假，切换元素的显示或隐藏。true显示，false隐藏 不同点：
    • v-show：切换的是样式，用于频繁的显示隐藏操作，原理是修改display属性
    • v-if：切换的是dom树，原理：删除节点
  • 4.属性绑定：v-bind
    • 可简写为：
    • 可控制属性值的更改，进而改变显示效果
  • 5.列表循环：v-for
    • 根据数据生成类表结构
    • v-for="(item,index) in itemList"
    • v-for="item in itemList"
  • 6.表单元素绑定：v-model
    • 这个是双向绑定
    • 获取或设置表单元素的值（双向数据绑定）
    • 即表单中输入的值《=》绑定的数据
    • 用于同事更改并动态显示灯
    • v-model=“message”其值为属性，不是方法

axios获取网络数据

axios.get().then(function(response){},function(err){})

  • axios回调函数中的this已经改变，无法访问到data中数据
  • 把this保存起来，毁掉函数中直接使用保存的this即可

使用Pinia进行状态管理

Pinia最简单的使用方法

  • 定义userCounterStore
import {defineStore} from 'pinia'
import {ref} from "vue";

export const userCounterStore = defineStore('counter', () => {
    //定义数据（state）
    const count = ref(0)
    //定义修改你数据的方法（action 同步+异步）
    const increment = () => {
        count.value++
    }
    //getter 定义,这样定义 ，doubleCount永远会跟随着count的变化而变化
    const doubleCount = computed(() => count.value * 2)

    //定义异步action
    const list = ref([])
    const getList = async () => {
        const res = await axios.get(API_URL)
    }
    return {count, increment}
})
  • 定义完成之后，进行使用
<script setup>
import {userCounterStore} from "@/example/counter/counter";
import {storeToRefs} from 'pinia'  
const counterStore = userCounterStore()
  
  //直接解析结构复制（响应丢失）
  //const {cout,doubleCount}=counterStore
  
  //方法包裹（保持响应式更新）
  const {count,doubleCount}=storeToRefs(counterStore)
  
  //方法直接从原来的counterStore中解构赋值
  const{increment}=counterStore
</script>

<template>
  <button @click="counterStore.increment">{{ counterStore.count}}</button>
</template>

使用总结

1.Pinia是用来做什么的？

集中状态管理工具，新一代的vuex

2.Pinia中还需要mutation吗？

不需要，action即支持同步也支持异步

3.pinia如何使用getter？

computed计算属性函数

4.Pnia产生的Store如何结构复制数据保持响应式？

storeToRefs（这个只针对属性，方法还是保持同样的处理）

项目的文件结构

src

  • apis Api接口文件夹
  • assets
  • components
  • composables 组合函数文件夹
  • directives 全局指令文件夹
  • router
  • stores
  • styles 全局样式文件夹
  • utils 工具函数文件夹
  • views