<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                <ruby id="bdb3f"></ruby>

                ??一站式輕松地調用各大LLM模型接口,支持GPT4、智譜、豆包、星火、月之暗面及文生圖、文生視頻 廣告
                [TOC] >[success] # 使用 Composition API 開發TodoList 下面用 **composition API** 實現了一個 **TodoList** 效果 **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>使用 Composition API 開發TodoList</title> <!-- 通過cdn方式引入vue --> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> const app = Vue.createApp({ setup(){ const { ref, reactive } = Vue const inputValue = ref('') const list = reactive([]) const handleInputValueChange = (e) => { inputValue.value = e.target.value } const handleSubmit = () => { list.push(inputValue.value) } return { list, inputValue, handleSubmit, handleInputValueChange } }, template: ` <div> <input :value="inputValue" @input="handleInputValueChange"/> <button @click="handleSubmit">提交</button> <ul> <li v-for="(item, index) in list" :key="index">{{item}}</li> </ul> </div> `, }) const vm = app.mount('#root') </script> </html> ~~~ >[success] ## 封裝TodoList 上面的寫法雖然是完成了功能,但是 **代碼零散**,其實我們可以做一個 **封裝** ,把 **邏輯相同的代碼進行歸類封裝** **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>使用 Composition API 開發TodoList</title> <!-- 通過cdn方式引入vue --> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // 關于 list 操作的內容進行了封裝 const listRelativeEffect = () => { const { reactive } = Vue const list = reactive([]) const addItemToList = (item) => { list.push(item) } return { list, addItemToList } } // 關于 inputValue 操作的內容進行了封裝 const inputRelativeEffect = () => { const { ref } = Vue const inputValue = ref('') const handleInputValueChange = (e) => { inputValue.value = e.target.value } return { inputValue, handleInputValueChange } } const app = Vue.createApp({ setup(){ // 流程調度中轉 const { list, addItemToList } = listRelativeEffect() const { inputValue, handleInputValueChange } = inputRelativeEffect() return { list, addItemToList, inputValue, handleInputValueChange } }, template: ` <div> <input :value="inputValue" @input="handleInputValueChange"/> <button @click="() => addItemToList(inputValue)">提交</button> <ul> <li v-for="(item, index) in list" :key="index">{{item}}</li> </ul> </div> `, }) const vm = app.mount('#root') </script> </html> ~~~ 上面的代碼中,我們把對 **list 操作的相關邏輯進行了封裝** , **input 相關的邏輯也進行了封裝** ,代碼中的 **addItemToList** 用 **箭頭函數處理邏輯** ,如果覺得不太好懂,也可以像下面這樣封裝一個函數 ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>使用 Composition API 開發TodoList</title> <!-- 通過cdn方式引入vue --> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // 關于 list 操作的內容進行了封裝 const listRelativeEffect = () => { const { reactive } = Vue const list = reactive([]) const addItemToList = (item) => { list.push(item) } return { list, addItemToList } } // 關于 inputValue 操作的內容進行了封裝 const inputRelativeEffect = () => { const { ref } = Vue const inputValue = ref('') const handleInputValueChange = (e) => { inputValue.value = e.target.value } return { inputValue, handleInputValueChange } } const app = Vue.createApp({ setup(){ // 流程調度中轉 const { list, addItemToList } = listRelativeEffect() const { inputValue, handleInputValueChange } = inputRelativeEffect() const handleSubmit = () => { addItemToList(inputValue.value) } return { list, addItemToList, inputValue, handleInputValueChange, handleSubmit } }, template: ` <div> <input :value="inputValue" @input="handleInputValueChange"/> <button @click="handleSubmit">提交</button> <ul> <li v-for="(item, index) in list" :key="index">{{item}}</li> </ul> </div> `, }) const vm = app.mount('#root') </script> </html> ~~~ 但是還是 **建議使用箭頭函數的方式,沒必要單獨封裝一個函數** 。
                  <ruby id="bdb3f"></ruby>

                  <p id="bdb3f"><cite id="bdb3f"></cite></p>

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                              <ruby id="bdb3f"></ruby>

                              哎呀哎呀视频在线观看