preface

Most of the time, when new technology comes along, some of us already have a rough idea of what’s going on by looking at the documentation, or even getting started with the project directly. But are there still some beginners who have a love-hate relationship with new technology? In fact, don’t be afraid to write wrong code, be willing to experiment, find your weak spots in the wrong code and crack them, starting with writing your first Todolist.

A message to you and to myself: The quickest way to grow fast is to face your weaknesses.

Learn about apis

setup

  • The setup function is executed only once, but subsequent data updates can still drive view updates.
  • Order of execution: The setup function is executed after beforeCreate and before creation.
  • Receive parameters: props, context.
Setup (props,context){console.log('props',props) // Component parameter console.log('context',context) // Context object // context.slots // context.emit // context.refs }Copy the code

reactive

  • A reactive proxy object used to obtain an object is equivalent to the Vue.Observable () API. Functions processed by Reactive can become reactive data, similar to the value of the data property in the Option API to some extent.
Setup () {const count = reactive({count: 0}) return {count}}Copy the code

ref

  • Creates a reactive data object with the given value.
  • Because when used, the value should be xxx.value, so usually when I write code, I add naming suffixes like xxxRef, xxx_ref, etc.
setup() {
    const count = ref(0);
    function increment() {
      count.value++;
    }
    return {
      count,
      increment
    }
}
Copy the code

computed

  • Sometimes we need to rely on the state of other states — in Vue, this is handled by evaluating properties. To create a computed value directly, we can use computed.
const state = reactive({
    count: 0,
    plusOne: computed(() => state.count + 1)
})
Copy the code
  • Create computable properties that are readable and writable
Const count = ref(1) const count = ref(1) It automatically computes according to ref and returns a new ref const computedCount = computed({get: () => count.value + 1, set: Value = val-1}) computedCount.count = 6 console.log(count.value) // Print 5Copy the code

watchEffect

  • The watchEffect function is used if you need to do something when reactive data changes.
  • This function collects count. Value as a dependency when it reads it.
setup() {
    const count = ref(0)
    const add = () => count.value++
    watchEffect(()=>{
        console.log('count changed', count.value)
    })
    return { count, add }
}
Copy the code

Write the Todolist

HTML part

<template> <div class="todo"> <div class="todo-form"> <div class="todo-input"> <input @keyup.enter="handleAddList" V-model ="contentRef" type="text" placeholder=" placeholder" </button> </div> <ul class="list" v-if=" listrev.length "> <li class="list-item" v-for="(item,index) of listRev" :id="item.id" :key="item.id"> <div class="item-label" :class="item.status? 'done':''">{{item.title}}</div> <div class="action-btn"> <button class="success" v-if="! </button> <button class="reset" v-if="item.status" @click="handleStatusChange(index,false)"> Activate </button> </button class="delete" @click="handleRemove(index)"> </div> </li> </ul> <p v-else> No to-do list.. </p> </div> </template>Copy the code

All the code

<template> <div class="todo"> <div class="todo-form"> <div class="todo-input"> <input @keyup.enter="handleAddList" V-model ="contentRef" type="text" placeholder=" placeholder" </button> </div> <ul class="list" v-if=" listrev.length "> <li class="list-item" v-for="(item,index) of listRev" :id="item.id" :key="item.id"> <div class="item-label" :class="item.status? 'done':''">{{item.title}}</div> <div class="action-btn"> <button class="success" v-if="! </button> <button class="reset" v-if="item.status" @click="handleStatusChange(index,false)"> Activate </button> </button class="delete" @click="handleRemove(index)"> </div> </li> </ul> <p v-else> No to-do list.. </p> </div> </template> <script lang="ts"> import { reactive, ref, watchEffect } from "vue"; Interface IList {id: number; title: string; status: boolean; } export default { setup() { let listRev = reactive<Array<IList>>([]); let contentRef = ref<string | null>(null); let idRef = ref<number>(0); // add const handleAddList = () => {if (! Contentref. value) return alert(" Please enter the content of the item "); If (listrev.find ((item) => item.title === contentref.value)) {return alert(" this item already exists, please enter another item ~"); } listRev.push({ title: contentRef.value, id: ++idRef.value, status: false, }); contentRef.value = ""; }; // Const handleStatusChange = (index: number, status: Boolean) => {listRev[index]. Status = status; }; // Const handleRemove = (index: number) => {listrev.splice (index, 1); }; const count = ref(0); const add = () => count.value++; watchEffect(() => { console.log("contentRef changed", contentRef.value); }); return { listRev, contentRef, handleAddList, handleStatusChange, handleRemove, }; }}; </script> <style lang="scss"> button { border-width: 0px; border-radius: 3px; background: #1e90ff; cursor: pointer; outline: none; font-family: Microsoft YaHei; color: white; font-size: 14px; } .todo { padding: 5vw; .todo-form { display: flex; justify-content: space-between; .todo-input { width: 75%; text-align: left; input { width: 100%; border: 1px solid #ccc; padding: 10px 0px; border-radius: 3px; padding-left: 5px; Box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); Transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; } input:focus { border-color: #66afe9; outline: 0; Box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); } } button { width: 20%; font-size: 12px; } button:active { background: #5599ff; } } .list { text-align: left; vertical-align: top; background: #fff; color: rgb(30, 144, 255); border-radius: 5px; padding: 1em; Box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); margin-top: 30px; .list-item { list-style: none; padding: 10px 0; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; .item-label { width: 80%; } .action-btn { width: 15%; button { margin: 0px 3px 5px; font-size: 12px; padding: 3px 7px; } .success { background-color: #009688; } .delete { background-color: #e91e63; } .reset { background-color: #03a9f4; } } } .list-item:last-of-type { border-bottom: none; } .done { text-decoration: line-through; color: #ddd; } } } </style>Copy the code

Write in the last

  • Thank you to all of you who took the time to read this article.
  • Start writing your Todolist and don’t hesitate
  • We will continue to update vue3 related new API, please like to stay tuned.

And don’t forget to give it a thumbs up

And don’t forget to give it a thumbs up