上一页 1 2 3 4 5 6 ··· 28 下一页
2024年8月20日
038、Vue3+TypeScript基础，使用router.push进行路由跳转并传参
摘要： 01、main.js // 引入createApp用于创建Vue实例 import {createApp} from 'vue' // 引入App.vue根组件 import App from './App.vue' //引入路由 import router from './router' cons 阅读全文
posted @ 2024-08-20 23:06 像一棵海草海草海草 阅读(490) 评论(0) 推荐(0) 编辑
037、Vue3+TypeScript基础，使用router.push进行导航式路由跳转
摘要： 01、main.js代码如下： // 引入createApp用于创建Vue实例 import {createApp} from 'vue' // 引入App.vue根组件 import App from './App.vue' //引入路由 import router from './router' 阅读全文
posted @ 2024-08-20 21:55 像一棵海草海草海草 阅读(86) 评论(0) 推荐(0) 编辑
036、Vue3+TypeScript基础，路由中使用replace不让前进后退
摘要： 01、代码如下： <template> <div class="app"> <h2 class="title">App.Vue路由测试</h2> <!-- 导航区--> <div class="navigate"> <router-link replace to="/Home" class="nav 阅读全文
posted @ 2024-08-20 20:52 像一棵海草海草海草 阅读(19) 评论(0) 推荐(0) 编辑
035、Vue3+TypeScript基础，使用defineProps自动获得父页面传子页面的参数的3种写法
摘要： 01、New.vue代码如下： <template> <div class="app-container"> <!-- 导航区域容器 --> <div class="sidebar"> <ul class="news-list"> <!--第一种写法--> <li v-for="news in ne 阅读全文
posted @ 2024-08-20 00:36 像一棵海草海草海草 阅读(216) 评论(0) 推荐(0) 编辑
2024年8月19日
034、Vue3+TypeScript基础，路由params参数的使用
摘要： 01、main.js代码如下： // 引入createApp用于创建Vue实例 import {createApp} from 'vue' // 引入App.vue根组件 import App from './App.vue' //引入路由 import router from './router' 阅读全文
posted @ 2024-08-19 23:56 像一棵海草海草海草 阅读(81) 评论(0) 推荐(0) 编辑
033、Vue3+TypeScript基础，路由传参时候把层级脱掉
摘要： 01、Datail.vue代码如下： <template> <ul class="news-list"> <li>编号：{{ route.query.id }}</li> <li>编号：{{ route.query.title }}</li> <li>编号：{{ route.query.conten 阅读全文
posted @ 2024-08-19 21:22 像一棵海草海草海草 阅读(7) 评论(0) 推荐(0) 编辑
032、Vue3+TypeScript基础，嵌套子路由和query传参
摘要： 01、main.js代码如下： // 引入createApp用于创建Vue实例 import {createApp} from 'vue' // 引入App.vue根组件 import App from './App.vue' //引入路由 import router from './router' 阅读全文
posted @ 2024-08-19 01:01 像一棵海草海草海草 阅读(52) 评论(0) 推荐(0) 编辑
031、Vue3+TypeScript基础，路由中to的字符串写法和对象写法2种写法
摘要： 01、index.ts代码如下： //创建路由并暴露出去 import {createRouter, createWebHistory} from 'vue-router' import Home from '@/view/Home.vue' import About from '@/view/Ab 阅读全文
posted @ 2024-08-19 00:01 像一棵海草海草海草 阅读(39) 评论(0) 推荐(0) 编辑
2024年8月18日
030、Vue3+TypeScript基础，路由中History和HashHistory的区别
摘要： 01、index.ts路由代码如下： //创建路由并暴露出去 import {createRouter, createWebHistory} from 'vue-router' import Home from '@/view/Home.vue' import About from '@/view/ 阅读全文
posted @ 2024-08-18 23:06 像一棵海草海草海草 阅读(9) 评论(0) 推荐(0) 编辑
029、Vue3+TypeScript基础，路由组件和一般组件的存放位置，以及页面生命周期
摘要： 01、main.js代码如下： // 引入createApp用于创建Vue实例 import {createApp} from 'vue' // 引入App.vue根组件 import App from './App.vue' //引入路由 import router from './router' 阅读全文
posted @ 2024-08-18 22:36 像一棵海草海草海草 阅读(28) 评论(0) 推荐(0) 编辑
028、Vue3+TypeScript基础，使用路由功能实现页面切换效果
摘要： 01、在main.js中引入路由并使用路由，代码如下： // 引入createApp用于创建Vue实例 import {createApp} from 'vue' // 引入App.vue根组件 import App from './App.vue' //引入路由 import router fro 阅读全文
posted @ 2024-08-18 18:08 像一棵海草海草海草 阅读(133) 评论(0) 推荐(0) 编辑
027、Vue3+TypeScript基础，使用自定义hook，把功能计算都放到hook中精简代码
摘要： 01、在view中创建myhook文件夹，并创建2个文件。usesDog.ts代码如下： import {onMounted, reactive} from "vue"; import axios from "axios"; export default function () { // 抓取图片 阅读全文
posted @ 2024-08-18 17:07 像一棵海草海草海草 阅读(47) 评论(0) 推荐(0) 编辑
026、Vue3+TypeScript基础，使用async和await来异步读取axios的网络图片
摘要： 01、App.vue代码如下： <template> <div class="app"> <h2>App.Vue</h2> <Person/> </div> </template> <script lang="ts" setup name="App"> // JS或TS import Person 阅读全文
posted @ 2024-08-18 16:28 像一棵海草海草海草 阅读(43) 评论(0) 推荐(0) 编辑
025、Vue3+TypeScript基础，使用组合式API时组件的生命周期
摘要： 1、App.vue代码如下: <template> <div class="app"> <h2>App.Vue</h2> <Person v-if="isShow"/> <button @click="isShow =!isShow">点我切换</button> </div> </template> 阅读全文
posted @ 2024-08-18 15:44 像一棵海草海草海草 阅读(13) 评论(0) 推荐(0) 编辑
024、Vue3+TypeScript基础，使用withDefaults在父传子没数据时给出默认值
摘要： 01、index.ts代码如下： // 定义一个接口，用于限制person对象的具体属性 export interface PersonInter { id: string; name: string; age: number; } export type Persons = Array<Perso 阅读全文
posted @ 2024-08-18 14:02 像一棵海草海草海草 阅读(218) 评论(0) 推荐(0) 编辑
023、Vue3+TypeScript基础，使用defineProps限制父传子的数据类型，并用v-for显示
摘要： 01、index.js代码如下: // 定义一个接口，用于限制person对象的具体属性 export interface PersonInter { id: string; name: string; age: number; } export type Persons = Array<Perso 阅读全文
posted @ 2024-08-18 13:57 像一棵海草海草海草 阅读(72) 评论(0) 推荐(0) 编辑
022、Vue3+TypeScript基础，使用typescript定义并暴露结构，主页面向子页面传递结构数据
摘要： 01、新建一个index.ts文件，代码如下： // 定义一个接口，用于限制person对象的具体属性 export interface PersonInter { id: string; name: string; age: number; } export type Persons = Arra 阅读全文
posted @ 2024-08-18 13:19 像一棵海草海草海草 阅读(25) 评论(0) 推荐(0) 编辑
021、Vue3+TypeScript基础，使用watchEffect全自动监视修改的对象
摘要： 01、App.vue代码如下: <template> <div class="app"> <h2>{{ title }}</h2> <!-- 使用了ref来获取子组件的属性--> <Person/> </div> </template> <script lang="ts" setup name="A 阅读全文
posted @ 2024-08-18 12:35 像一棵海草海草海草 阅读(18) 评论(0) 推荐(0) 编辑
020、Vue3+TypeScript基础，使用watch监视对象数据时，监控多种属性的修改
摘要： 01、App.vue代码如下： <template> <div class="app"> <h2>{{ title }}</h2> <!-- 使用了ref来获取子组件的属性--> <Person/> </div> </template> <script lang="ts" setup name="A 阅读全文
posted @ 2024-08-18 12:17 像一棵海草海草海草 阅读(48) 评论(0) 推荐(0) 编辑
019、Vue3+TypeScript基础，使用watch监视对象数据时，如何监控整个对象或单独监控对象某个属性
摘要： 1、App.vue代码如下： <template> <div class="app"> <h2>{{ title }}</h2> <!-- 使用了ref来获取子组件的属性--> <Person/> </div> </template> <script lang="ts" setup name="Ap 阅读全文
posted @ 2024-08-18 12:08 像一棵海草海草海草 阅读(45) 评论(0) 推荐(0) 编辑
018、Vue3+TypeScript基础，使用watch监视reactive对象，默认是开启的深度监视，且无法关闭
摘要： 01、App.vue代码如下： <template> <div class="app"> <h2>{{ title }}</h2> <!-- 使用了ref来获取子组件的属性--> <Person/> </div> </template> <script lang="ts" setup name="A 阅读全文
posted @ 2024-08-18 02:13 像一棵海草海草海草 阅读(31) 评论(0) 推荐(0) 编辑
017、Vue3+TypeScript基础，使用watch监视时通过deep和immediate进行深度监视和立即执行
摘要： 1、App.vue代码如下： <template> <div class="app"> <h2>{{ title }}</h2> <!-- 使用了ref来获取子组件的属性--> <Person/> </div> </template> <script lang="ts" setup name="Ap 阅读全文
posted @ 2024-08-18 01:58 像一棵海草海草海草 阅读(62) 评论(0) 推荐(0) 编辑
016、Vue3+TypeScript基础，使用watch监视和结束监视
摘要： 01、App.vue代码如下： <template> <div class="app"> <h2>{{ title }}</h2> <!-- 使用了ref来获取子组件的属性--> <Person/> </div> </template> <script lang="ts" setup name="A 阅读全文
posted @ 2024-08-18 00:14 像一棵海草海草海草 阅读(62) 评论(0) 推荐(0) 编辑
015、Vue3+TypeScript基础，使用watch监视ref定义的基本类型数据
摘要： 01、App.vue代码如下： <template> <div class="app"> <h2>{{ title }}</h2> <!-- 使用了ref来获取子组件的属性--> <Person/> </div> </template> <script lang="ts" setup name="A 阅读全文
posted @ 2024-08-18 00:07 像一棵海草海草海草 阅读(15) 评论(0) 推荐(0) 编辑
2024年8月17日
014、Vue3+TypeScript基础，computed计算属性中使用get和set方法来读取和修改
摘要： 01、App.vue代码如下： <template> <div class="app"> <h2>{{ title }}</h2> <!-- 使用了ref来获取子组件的属性--> <Person/> </div> </template> <script lang="ts" setup name="A 阅读全文
posted @ 2024-08-17 23:56 像一棵海草海草海草 阅读(342) 评论(0) 推荐(0) 编辑
013、Vue3+TypeScript基础，computed计算属性的使用，结果会被缓存
摘要： 01、App.vue代码如下： <template> <div class="app"> <h2>{{ title }}</h2> <!-- 使用了ref来获取子组件的属性--> <Person/> </div> </template> <script lang="ts" setup name="A 阅读全文
posted @ 2024-08-17 23:36 像一棵海草海草海草 阅读(38) 评论(0) 推荐(0) 编辑
012、Vue3+TypeScript基础，子页面使用defineExpose暴露成员来给主页面使用
摘要： 01、App.vue代码如下： <template> <div class="app"> <h2>{{ title }}</h2> <button @click="showLog">点我数组子页面年龄</button> <!-- 使用了ref来获取子组件的属性--> <Person ref="per 阅读全文
posted @ 2024-08-17 20:42 像一棵海草海草海草 阅读(56) 评论(0) 推荐(0) 编辑
011、Vue3+TypeScript基础，template中ref的用法意义
摘要： 1、如果多个页面都用同一个id，那么就会报错。用ref可以指明是某个元素，规避报错情况。App.vue代码如下： <template> <div class="app"> <h2 ref="title2">好好学习，天天向上</h2> <button @click="showLog">点我输出h2元 阅读全文
posted @ 2024-08-17 20:16 像一棵海草海草海草 阅读(31) 评论(0) 推荐(0) 编辑
010、Vue3+TypeScript基础，通过toRefs和toRef把对象的属性变成响应式引用
摘要： 1、App.vue代码如下： <template> <div class="app"> <h1>好好学习，天天向上</h1> <Person/> </div> </template> <script> // JS或TS import Person from './view/Person.vue' e 阅读全文
posted @ 2024-08-17 19:24 像一棵海草海草海草 阅读(20) 评论(0) 推荐(0) 编辑
009、Vue3+TypeScript基础，ref和reactive的区别
摘要： 01、App.vue代码如下： <template> <div class="app"> <h1>好好学习，天天向上</h1> <Person/> </div> </template> <script> // JS或TS import Person from './view/Person.vue' 阅读全文
posted @ 2024-08-17 17:16 像一棵海草海草海草 阅读(31) 评论(0) 推荐(0) 编辑
008、Vue3+TypeScript基础，数组和对象的响应式修改方法
摘要： 01、App.vue代码如下： <template> <div class="app"> <h1>好好学习，天天向上</h1> <Person/> </div> </template> <script> // JS或TS import Person from './view/Person.vue' 阅读全文
posted @ 2024-08-17 15:22 像一棵海草海草海草 阅读(53) 评论(0) 推荐(0) 编辑
007、Vue3+TypeScript基础，使用reactive让界面数据变成响应式
摘要： 01、App.Vue代码： <template> <div class="app"> <h1>好好学习，天天向上</h1> <Person/> </div> </template> <script> // JS或TS import Person from './view/Person.vue' ex 阅读全文
posted @ 2024-08-17 15:08 像一棵海草海草海草 阅读(36) 评论(0) 推荐(0) 编辑
006、Vue3+TypeScript基础，组合式API种直接返回渲染内容
摘要： 01、App.vue代码如下： <template> <div class="app"> <h1>好好学习，天天向上</h1> <Person/> </div> </template> <script> // JS或TS import Person from './view/PersonNew.vu 阅读全文
posted @ 2024-08-17 14:43 像一棵海草海草海草 阅读(21) 评论(0) 推荐(0) 编辑
005、Vue3+TypeScript基础，组合式API给子页面命名的2种方式
摘要： 01、App.vue代码如下： <template> <div class="app"> <h1>好好学习，天天向上</h1> <Person/> </div> </template> <script> // JS或TS import Person from './view/PersonNew.vu 阅读全文
posted @ 2024-08-17 14:32 像一棵海草海草海草 阅读(20) 评论(0) 推荐(0) 编辑
004、Vue3+TypeScript基础，使用组合式API的写法，并用ref和value响应界面数据
摘要： 01、App.vue代码如下： <template> <div class="app"> <h1>好好学习，天天向上</h1> <Person/> </div> </template> <script> // JS或TS import Person from './view/PersonNew.vu 阅读全文
posted @ 2024-08-17 12:46 像一棵海草海草海草 阅读(24) 评论(0) 推荐(0) 编辑
003、Vue3+TypeScript基础，安装浏览器的vue插件方便调试
摘要： 01、以火狐浏览器维护，打开插件，搜索vue安装如图所示这个 02、安装好之后，F12就可以看到页面层级和具体内容了。 阅读全文
posted @ 2024-08-17 11:45 像一棵海草海草海草 阅读(42) 评论(0) 推荐(0) 编辑
002、Vue3+TypeScript基础，调用子页面和简单效果
摘要： 01、App.vue代码： <template> <div class="app"> <h1>好好学习，天天向上</h1> <Person/> </div> </template> <script> // JS或TS import Person from './view/Person.vue' ex 阅读全文
posted @ 2024-08-17 11:41 像一棵海草海草海草 阅读(26) 评论(0) 推荐(0) 编辑
001、Vue3+TypeScript基础，创建第一个页面
摘要： 1、main.js代码如下： // 引入createApp用于创建Vue实例 import {createApp} from 'vue' // 引入App.vue根组件 import App from './App.vue' const app = createApp(App); // App.vu 阅读全文
posted @ 2024-08-17 11:09 像一棵海草海草海草 阅读(54) 评论(0) 推荐(0) 编辑
2024年8月14日
040.Vue3入门，在Vue3中引入ElementUI
摘要： 1、npm install element-plus --save，安装UI 2、main.js代码如下： // import './assets/main.css' // 引入下面这两行 import ElementPlus from 'element-plus' import 'element- 阅读全文
posted @ 2024-08-14 22:20 像一棵海草海草海草 阅读(133) 评论(0) 推荐(0) 编辑
2024年8月12日
039.Vue3入门，异步加载组件，初始时不全部加载，使用时才加载
摘要： 1.App.vue代码如下： <template> <button @click="change">切换组件</button> <p></p> <keep-alive> <component :is="tabComponent"></component> </keep-alive> </templa 阅读全文
posted @ 2024-08-12 00:32 像一棵海草海草海草 阅读(167) 评论(0) 推荐(0) 编辑
上一页 1 2 3 4 5 6 ··· 28 下一页
点击右上角即可分享
微信分享提示