查看“Vue入门代码”的源代码
←
Vue入门代码
跳到导航
跳到搜索
因为以下原因，您没有权限编辑本页：
您请求的操作仅限属于该用户组的用户执行：
用户
您可以查看和复制此页面的源代码。
== 模板 == <pre><template> <h1>Hello World!</h1> </template></pre> <br> == 声明式渲染 == <pre><script setup> import { reactive, ref } from 'vue' const counter = reactive({ count: 0 }) const message = ref('Hello World!') </script> <template> <h1>{{ message }}</h1> <p>Count is: {{ counter.count }}</p> </template></pre> <br> <span id="attribute-绑定"></span> == Attribute 绑定 == <pre><script setup> import { ref } from 'vue' const titleClass = ref('title') </script> <template> <h1 :class="titleClass">Make me red</h1> </template> <style> .title { color: red; } </style></pre> <br> == 事件监听 == <pre><script setup> import { ref } from 'vue' const count = ref(0) function increment() { count.value++ } </script> <template> <button @click="increment">count is: {{ count }}</button> </template></pre> <br> == 表单绑定 == <pre><script setup> import { ref } from 'vue' const text = ref('') </script> <template> <input v-model="text" placeholder="Type here"> <p>{{ text }}</p> </template></pre> <br> == 条件渲染 == <pre><script setup> import { ref } from 'vue' const awesome = ref(true) function toggle() { awesome.value = !awesome.value } </script> <template> <button @click="toggle">toggle</button> <h1 v-if="awesome">Vue is awesome!</h1> <h1 v-else>Oh no 😢</h1> </template></pre> <br> == 列表渲染 == <pre><script setup> import { ref } from 'vue' // 给每个 todo 对象一个唯一的 id let id = 0 const newTodo = ref('') const todos = ref([ { id: id++, text: 'Learn HTML' }, { id: id++, text: 'Learn JavaScript' }, { id: id++, text: 'Learn Vue' } ]) function addTodo() { todos.value.push({ id: id++, text: newTodo.value }) newTodo.value = '' } function removeTodo(todo) { todos.value = todos.value.filter((t) => t !== todo) } </script> <template> <form @submit.prevent="addTodo"> <input v-model="newTodo"> <button>Add Todo</button> </form> <ul> <li v-for="todo in todos" :key="todo.id"> {{ todo.text }} <button @click="removeTodo(todo)">X</button> </li> </ul> </template></pre> <br> == 计算属性 == <pre><script setup> import { ref, computed } from 'vue' let id = 0 const newTodo = ref('') const hideCompleted = ref(false) const todos = ref([ { id: id++, text: 'Learn HTML', done: true }, { id: id++, text: 'Learn JavaScript', done: true }, { id: id++, text: 'Learn Vue', done: false } ]) const filteredTodos = computed(() => { return hideCompleted.value ? todos.value.filter((t) => !t.done) : todos.value }) function addTodo() { todos.value.push({ id: id++, text: newTodo.value, done: false }) newTodo.value = '' } function removeTodo(todo) { todos.value = todos.value.filter((t) => t !== todo) } </script> <template> <form @submit.prevent="addTodo"> <input v-model="newTodo"> <button>Add Todo</button> </form> <ul> <li v-for="todo in filteredTodos" :key="todo.id"> <input type="checkbox" v-model="todo.done"> <span :class="{ done: todo.done }">{{ todo.text }}</span> <button @click="removeTodo(todo)">X</button> </li> </ul> <button @click="hideCompleted = !hideCompleted"> {{ hideCompleted ? 'Show all' : 'Hide completed' }} </button> </template> <style> .done { text-decoration: line-through; } </style></pre> <br> == 生命周期和模板引用 == <pre><script setup> import { ref, onMounted } from 'vue' const pElementRef = ref(null) onMounted(() => { pElementRef.value.textContent = 'mounted!' }) </script> <template> <p ref="pElementRef">hello</p> </template></pre> <br> == 侦听器 == <pre><script setup> import { ref, watch } from 'vue' const todoId = ref(1) const todoData = ref(null) async function fetchData() { todoData.value = null const res = await fetch( `https://jsonplaceholder.typicode.com/todos/${todoId.value}` ) todoData.value = await res.json() } fetchData() watch(todoId, fetchData) </script> <template> <p>Todo id: {{ todoId }}</p> <button @click="todoId++">Fetch next todo</button> <p v-if="!todoData">Loading...</p> <pre v-else>{{ todoData }}</pre> </template></pre> <br> == 组件 == <pre>\\App.vue <script setup> import ChildComp from './ChildComp.vue' </script> <template> <ChildComp /> </template> \\ChildComp.vue <template> <h2>A Child Component!</h2> </template></pre> <br> <span id="props"></span> == Props == <pre>\\App.vue <script setup> import { ref } from 'vue' import ChildComp from './ChildComp.vue' const greeting = ref('Hello from parent') </script> <template> <ChildComp :msg="greeting" /> </template> \\ChildComp.vue <script setup> const props = defineProps({ msg: String }) </script> <template> <h2>{{ msg || 'No props passed yet' }}</h2> </template></pre> <br> <span id="emits"></span> == Emits == <pre>\\App.vue <script setup> import { ref } from 'vue' import ChildComp from './ChildComp.vue' const childMsg = ref('No child msg yet') </script> <template> <ChildComp @response="(msg) => childMsg = msg" /> <p>{{ childMsg }}</p> </template> \\ChildComp.vue <script setup> const emit = defineEmits(['response']) emit('response', 'hello from child') </script> <template> <h2>Child component</h2> </template></pre> <br> == 插槽 == <pre>\\App.vue <script setup> import { ref } from 'vue' import ChildComp from './ChildComp.vue' const msg = ref('from parent') </script> <template> <ChildComp>Message: {{ msg }}</ChildComp> </template> \\ChildComp.vue <template> <slot>Fallback content</slot> </template></pre> <br>
返回至“
Vue入门代码
”。
导航菜单
个人工具
登录
命名空间
页面
讨论
大陆简体
查看
阅读
查看源代码
查看历史
更多
搜索
导航
首页
基础知识
正则表达式
Markdown
分布式
项目管理
系统集成项目管理基础知识
云原生
Docker
云原生安全
云原生词汇表
十二因素应用
Kubernetes
音频处理
音频合成
Edge-tts
CMS系统
Docsify
VuePress
Mediawiki
自动生成
Marp
CI/CD
GitLab
设计
颜色
平面设计
AI
数字人
操作系统
GNU/Linux
数据库
Mysql
工具
链入页面
相关更改
特殊页面
页面信息