【Vue3学习笔记1】一个清单应用帮你入门Vue.js

news2025/1/19 19:26:45

Vue 目前已经是国内最流⾏的前端框架之⼀，Vue 3 带来的诸多优化更是让前端圈迎来了新的潮流，比如：

基于 Proxy 的全新响应式实现；
Composition API + <script setup> 组织代码的更优方式；
更有料的 TypeScript 支持；
新的 VDOM diff 逻辑；
更小的体积 + 更高的性能；
生态中还多了 Vite 这个新⼀代工程化工具。
可以说，Vue 3 很好地拥抱了未来，并且在新手友好度上做到了极致。

本文涉及知识点：

data()声明数据，v-model同步数据，｛｛title｝｝显示数据
渲染列表数据，用 v-for
执行的函数，放到 methods 配置
@标记用户交互，监听到交互后，执行methods中配置的函数
data()声明的数据，可以是基本类型，也可以是对象–>
冒号":" 开头的属性是用来传递数据的，根据 todo.done 来决定是否有 done 这个 class
需要对数据进行计算的话，要配置一个computed属性 ,具有缓存能力，可以提升性能
计算属性要修改，这时候 computed 的配置，要变成一个对象，分别实现 get 和 set 函数
v-if对元素进行条件渲染，v-else配合

下面代码可以保存成html，通过浏览器打开查看效果。

<!DOCTYPE html>
<html lang="en">
<body>
    <div id="app">  
        <h2>{{title}}</h2>  
        <input type="text" v-model="title" @keydown.enter="addToDo">
        <ul v-if="todos.length">
            <li v-for="todo in todos">
                <input type="checkbox" v-model="todo.done">
                <span :class="{done:todo.done}">{{todo.title}}</span>
            </li>
        </ul>
        <div v-else>
            暂无数据
        </div>
        <!-- 以下部分要放到id为app的div里面 -->
        <div>
            全选<input type="checkbox" v-model="allDone">
            <span>{{active}} / {{all}}</span>
        </div>
        <button v-if="active<all" @click="clear">清理</button>
    </div>
    <script type="text/javascript" src="/Users/chunming.liu/Downloads/vue.global.js"></script>
   <script>
        const App = {  
            data() {    
                return {      
                    title: "",
                    todos: [
                        {title:"吃饭",done:false},
                        {title:"睡觉",done:false}
                    ]
                }  
            },
            computed: {
                active() {
                    return this.todos.filter(v => !v.done).length
                },
                all() {
                    return this.todos.length
                },
                allDone:{
                    get: function(){
                        return this.active === 0
                    },
                    set: function(val){
                        this.todos.forEach(todo => {
                            todo.done = val
                        });
                    }
                }
            },
            methods:{
                addToDo(){
                    this.todos.push({
                        title: this.title,
                        done: false})
                    this.title = ""
                },
                clear(){
                    this.todos = this.todos.filter(v=>!v.done) //只过滤未完成的
                }
            }
        }
        Vue.createApp(App).mount("#app") 
    </script>
    <style>  
        .done{    
        color:gray;    
        text-decoration: line-through;  
        }
    </style>
</body>
</html>