Vue3

本文状态：未完成 一、产品原型 参考 Windows todo设计一个简单的移动端todo页面原型 二、开发教程 1、新建Todolist.vue 先通过脚手架配置好vue项目：@vue/cli 在项目src\views下面新建Todo.vue <template> <div class="todo"> <h1>Todolist</h1> <input type="text" v-model="content" @keypress="add"><button @click="add">Add</button> <p>{{content}}</p> <div class="section-title">待办</div> <ul class="todolist underway"> <TodoItem :="todo" v-for="todo in underway" :key="todo.id" :class="{done:todo.status}" v-model="todo.status" /> </ul> <div class="section-title">已完成</div> <ul class="todolist completed"> <TodoItem :="todo" v-for="todo in completed" :key="todo.id" :class="{done:todo.status}" v-model="todo.status" /> </ul> </div> </template> <script> import TodoItem from '../components/TodoItem'; export default { name: "Todo", components:{ TodoItem }, data(){ return{ content:'hello world!', checked:'', todos:[ { id:1, content:'这是内容1', status:false }, { id:2, content:'这是内容2', status:true }, { id:3, content:'这是内容3', status:true }, { id:4, content:'这是内容4', status:false }, { id:5, content:'这是内容5', status:true } ], } }, methods:{ add(){ this....

本页内容基于VUE3.2版本，且以组合式API模式编写<script setup> 推荐的 IDE 配置是 Visual Studio Code + Volar 扩展 中文文档：https://staging-cn.vuejs.org/ 使用Vite安装Vue npm init vite@latest <project-name> -- --template vue # 或者 npm create vite@latest <project-name> -- --template vue cd <project-name> npm install npm run dev 模板语法 // 显示文本 <span>Message: {{ msg }}</span> // 显示原始HTML <p>Using v-html directive: <span v-html="rawHtml"></span></p> // 绑定HTML属性 <div v-bind:id="dynamicId"></div> // 绑定多个HTML属性 <div v-bind="objectOfAttrs"></div> // 调用函数 <span :title="toTitleDate(date)"> {{ formatDate(date) }} </span> // 绑定动态参数 <a v-bind:[attributeName]="url"> ....