随笔分类 - 前端学习 / vue学习-视频教程
摘要：尚硅谷视频教程 Teleport:让部分元素脱离原来的位置，到to指定的位置去 此处指定了弹窗到body标签内 <template> <h4>Model</h4> <button @click="isShow = true">打开弹窗</button> <Teleport to='body'> <d
阅读全文
摘要：尚硅谷视频教程 shallowRef shallowReactive 浅层次的响应式数据（仅第一层） shallowRef ：只能整体修改 person.value可以修改，但是person.value.name无法修改 shallowReactive ：只能修改对象的第一层数据 car.brand
阅读全文
摘要：尚硅谷视频教程 通信方式1 props parent传child--只能传递非函数 // Parent.vue <template> <div class="parent"> <h3>parent</h3> <h3>car: {{ car }}</h3> <Child :car="car"/> </
阅读全文
摘要：尚硅谷视频教程 了解pinia 集中式状态（数据）管理的工具，主要管理各组件之间的共享数据 准备一个效果 学到的几个点 html下拉选择框，可以使用v-model双向绑定 v-modle获取的值为字符串，可以写为v-model.number,会尽量转为数字 <select name="num" v-
阅读全文
摘要：尚硅谷视频教程 路由简介 路由就是一组key-value的对应关系 多个路由，需要经过路由器的管理 怎样才能使用路由器 安装路由器 npm i vue-router 在src内新增文件夹router 在router文件夹新增文件index.ts,在其中创建路由器并暴露出去 // 创建一个路由 并暴露
阅读全文
摘要：尚硅谷视频教程 组件的生命周期 创建 挂载 更新 销毁 在特定的时期调用特定的函数，即生命周期 vue2的生命周期 4个周期，对应8个钩子（生命周期函数） 创建：创建前、创建完毕 挂载：挂载前、挂载完毕 更新：更新前、更新完毕 销毁：销毁前、销毁完毕 <script> export default
阅读全文
摘要：尚硅谷视频链接 axios 了解了一下axios的语法 import axios from 'axios' export default function () { let dogList = reactive( [ 'https://images.dog.ceo/breeds/pembroke/n
阅读全文
摘要：尚硅谷视频链接 defineProps-只接收 父：要有数据 let personList = reactive<personArr>( [ {id:'qqq1',name:'aaa',age:10,gender:'F'}, {id:'qqq2',name:'vvv',age:30,gender:'
阅读全文
摘要：尚硅谷视频链接 使用ts定义，可限制参数的类型 新建ts文件 // 定义接口限制对象属性 export interface personInter { name:string, age:number, gender:string } // 使用泛型 // export type personArr
阅读全文
摘要：尚硅谷视频教程 给标签增加ref属性，可以通过属性值取到标签内容 <template> <div class="person"> <h1>this</h1> <h2 ref="title">that</h2> <button @click="showLog">changeTemp</button>
阅读全文
摘要：尚硅谷视频链接 watch监视的5种情况 情况1 监视【ref】定义的【基本类型】数据 <template> <div class="person"> <h1>情况1：监视【ref】定义的【基本类型】数据</h1> <h2>求和：{{ sum }}</h2> <button @click="chan
阅读全文
摘要：尚硅谷视频链接 计算属性：算出一个ref定义的响应式数据 定义只读的计算属性 let fullName = computed(()=>{ return firstName.value.slice(0,1).toUpperCase() + firstName.value.slice(1) + '-'
阅读全文
摘要：尚硅谷视频教程 响应式数据 vue2中，写在data()里的数据自动成为响应式数据 vue3定义响应式数据，使用ref()或reactive() 什么是响应式数据：数据改变时。页面随之变化，即为响应式数据 ref() 创建基本类型的响应式数据 首先引入ref import { ref } from
阅读全文
摘要：学习教程-尚硅谷视频 将原vue2的格式改为vue3 使用setup 要点： this在vue3中被弱化，setup函数中不能使用this 定义数据时，如果不是响应式的（暂时还不是很理解响应式），不会触发页面的变化 vue3支持一个标签直接写多次，如 <template> <Person/> <Pe
阅读全文
摘要：尚硅谷视频教程 main.ts import { createApp } from 'vue' import App from './App.vue' createApp(App).mount('#app') App.vue 使用vue2语法 <template> <!-- html --> <di
阅读全文
摘要：尚硅谷vue3+Typescript教程 安装node.js 安装教程 创建项目 npm create vue@latest 运行项目 npm run dev 出现报错“'vite' 不是内部或外部命令，也不是可运行的程序或批处理文件。” 处理方式 安装依赖npm i .vue文件结构 <templ
阅读全文
