首页
苏兮影视
随笔记
壁纸
更多
直播
时光轴
友联
关于
统计
Search
1
软件添加id功能按钮
708 阅读
2
v2ray节点搭建
508 阅读
3
typecho非常有特色的模块
460 阅读
4
QQxml消息卡片生成源码
421 阅读
5
Linux下提权常用小命令
367 阅读
谈天说地
建站源码
经验教程
资源分享
动漫美图
登录
Search
标签搜索
java
flutter
springboot
rust
安卓
linux
vue
docker
joe
快捷键
git
fish shell
maven
redis
netty
dart
groovy
js
设计模式
rpc
尽意
累计撰写
95
篇文章
累计收到
38
条评论
首页
栏目
谈天说地
建站源码
经验教程
资源分享
动漫美图
页面
苏兮影视
随笔记
壁纸
直播
时光轴
友联
关于
统计
搜索到
1
篇与
的结果
2024-12-06
Vue3 快速入门
使用 Vite 快速搭建 Vue 3 项目创建项目:npm create vite@latest my-vue-app --template vue cd my-vue-app npm install npm run dev目录结构:src/: 主代码目录main.js: 应用入口文件Setup 语法糖与响应式对象在 Vue 3 的 <script setup> 中,ref 和 reactive 是核心的响应式 API:ref: 用于定义单个值的响应式数据。<script setup> import { ref } from 'vue'; const count = ref(0); const increment = () => { count.value++; }; </script> <template> <button @click="increment">{{ count }}</button> </template>注意:访问或更新 ref 的值需要通过 .value。reactive: 用于定义复杂对象的响应式数据。<script setup> import { reactive } from 'vue'; const state = reactive({ count: 0, message: 'Hello Vue 3' }); const increment = () => { state.count++; }; </script> <template> <button @click="increment">{{ state.count }} - {{ state.message }}</button> </template>注意:reactive 不需要 .value,直接操作对象属性即可。区别ref 更适合简单的标量值。reactive 更适合复杂的嵌套对象。常用指令条件与循环v-if 和 v-else: 条件渲染。<template> <p v-if="isLoggedIn">欢迎回来!</p> <p v-else>请登录</p> </template>v-show: 控制元素显示。<template> <p v-show="isVisible">这是一条可见信息</p> </template>v-for: 列表渲染。<script setup> const items = [1, 2, 3, 4]; </script> <template> <ul> <li v-for="item in items" :key="item">{{ item }}</li> </ul> </template>事件绑定@click: 点击事件。<template> <button @click="handleClick">点击我</button> </template> <script setup> const handleClick = () => { alert('按钮被点击了!'); }; </script>@input 和 v-model: 双向绑定。<template> <input v-model="text" /> <p>{{ text }}</p> </template> <script setup> import { ref } from 'vue'; const text = ref(''); </script>@mouseenter 和 @mouseleave: 鼠标事件。<template> <div @mouseenter="onHover" @mouseleave="onLeave">悬停我!</div> </template> <script setup> const onHover = () => { console.log('鼠标进入'); }; const onLeave = () => { console.log('鼠标离开'); }; </script>属性绑定v-bind: 动态绑定属性。<template> <img :src="imageUrl" alt="动态图片" /> </template> <script setup> const imageUrl = 'https://example.com/image.jpg'; </script>v-once: 一次性渲染。<template> <p v-once>{{ message }}</p> </template> <script setup> const message = '这段文字只渲染一次'; </script>自定义组件子组件定义一个简单的按钮组件:<script setup> import { defineProps } from 'vue'; defineProps({ label: String }); </script> <template> <button>{{ label }}</button> </template>父组件父组件传递 label 属性:<script setup> import MyButton from './MyButton.vue'; </script> <template> <MyButton label="Click Me" /> </template>父子组件数据传递父传子通过 props 传递数据:<!-- 子组件 --> <script setup> import { defineProps } from 'vue'; defineProps({ message: String }); </script> <template> <p>{{ message }}</p> </template><!-- 父组件 --> <script setup> import ChildComponent from './ChildComponent.vue'; </script> <template> <ChildComponent message="Hello from Parent" /> </template>子传父通过 emit 通知父组件:<!-- 子组件 --> <script setup> import { defineEmits } from 'vue'; const emit = defineEmits(['updateMessage']); const notifyParent = () => { emit('updateMessage', 'Message from Child'); }; </script> <template> <button @click="notifyParent">Notify Parent</button> </template><!-- 父组件 --> <script setup> import ChildComponent from './ChildComponent.vue'; const handleUpdateMessage = (message) => { console.log(message); }; </script> <template> <ChildComponent @updateMessage="handleUpdateMessage" /> </template>
2024年12月06日
17 阅读
0 评论
3 点赞