摘要：
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
像一棵海草海草海草
阅读(909)
推荐(0)
摘要：
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
像一棵海草海草海草
阅读(133)
推荐(0)
摘要：
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
像一棵海草海草海草
阅读(48)
推荐(0)
摘要：
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
像一棵海草海草海草
阅读(330)
推荐(0)
摘要：
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
像一棵海草海草海草
阅读(152)
推荐(0)
摘要：
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
像一棵海草海草海草
阅读(17)
推荐(0)
摘要：
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
像一棵海草海草海草
阅读(90)
推荐(0)
摘要：
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
像一棵海草海草海草
阅读(83)
推荐(0)
摘要：
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
像一棵海草海草海草
阅读(18)
推荐(0)
摘要：
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
像一棵海草海草海草
阅读(53)
推荐(0)
摘要：
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
像一棵海草海草海草
阅读(215)
推荐(0)
摘要：
01、在view中创建myhook文件夹，并创建2个文件。usesDog.ts代码如下： import {onMounted, reactive} from "vue"; import axios from "axios"; export default function () { // 抓取图片
阅读全文
posted @ 2024-08-18 17:07
像一棵海草海草海草
阅读(79)
推荐(0)
摘要：
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
像一棵海草海草海草
阅读(95)
推荐(0)
摘要：
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
像一棵海草海草海草
阅读(28)
推荐(0)
摘要：
01、index.ts代码如下： // 定义一个接口，用于限制person对象的具体属性 export interface PersonInter { id: string; name: string; age: number; } export type Persons = Array<Perso
阅读全文
posted @ 2024-08-18 14:02
像一棵海草海草海草
阅读(389)
推荐(0)
摘要：
01、index.js代码如下: // 定义一个接口，用于限制person对象的具体属性 export interface PersonInter { id: string; name: string; age: number; } export type Persons = Array<Perso
阅读全文
posted @ 2024-08-18 13:57
像一棵海草海草海草
阅读(108)
推荐(0)
摘要：
01、新建一个index.ts文件，代码如下： // 定义一个接口，用于限制person对象的具体属性 export interface PersonInter { id: string; name: string; age: number; } export type Persons = Arra
阅读全文
posted @ 2024-08-18 13:19
像一棵海草海草海草
阅读(67)
推荐(0)
摘要：
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
像一棵海草海草海草
阅读(35)
推荐(0)
摘要：
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
像一棵海草海草海草
阅读(79)
推荐(0)
摘要：
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
像一棵海草海草海草
阅读(87)
推荐(0)
摘要：
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
像一棵海草海草海草
阅读(54)
推荐(0)
摘要：
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
像一棵海草海草海草
阅读(105)
推荐(0)
摘要：
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
像一棵海草海草海草
阅读(103)
推荐(0)
摘要：
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
像一棵海草海草海草
阅读(35)
推荐(0)
摘要：
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
像一棵海草海草海草
阅读(750)
推荐(0)
摘要：
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
像一棵海草海草海草
阅读(82)
推荐(0)
摘要：
01、App.vue代码如下： <template> <div class="app"> <h2>{{ title }}</h2> <button @click="showLog">点我数组子页面年龄</button> <!-- 使用了ref来获取子组件的属性--> <Person ref="per
阅读全文
posted @ 2024-08-17 20:42
像一棵海草海草海草
阅读(128)
推荐(0)
摘要：
1、如果多个页面都用同一个id，那么就会报错。用ref可以指明是某个元素，规避报错情况。App.vue代码如下： <template> <div class="app"> <h2 ref="title2">好好学习，天天向上</h2> <button @click="showLog">点我输出h2元
阅读全文
posted @ 2024-08-17 20:16
像一棵海草海草海草
阅读(64)
推荐(0)
摘要：
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
像一棵海草海草海草
阅读(58)
推荐(0)
摘要：
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
像一棵海草海草海草
阅读(52)
推荐(0)
摘要：
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
像一棵海草海草海草
阅读(76)
推荐(0)
摘要：
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
像一棵海草海草海草
阅读(87)
推荐(0)
摘要：
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
像一棵海草海草海草
阅读(41)
推荐(0)
摘要：
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
像一棵海草海草海草
阅读(64)
推荐(0)
摘要：
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
像一棵海草海草海草
阅读(30)
推荐(0)
摘要：
01、以火狐浏览器维护，打开插件，搜索vue安装如图所示这个 02、安装好之后，F12就可以看到页面层级和具体内容了。
阅读全文
posted @ 2024-08-17 11:45
像一棵海草海草海草
阅读(112)
推荐(0)
摘要：
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
像一棵海草海草海草
阅读(44)
推荐(0)
摘要：
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
像一棵海草海草海草
阅读(79)
推荐(0)
摘要：
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
像一棵海草海草海草
阅读(176)
推荐(0)
摘要：
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
像一棵海草海草海草
阅读(240)
推荐(0)
浙公网安备 33010602011771号