-
todolist案例，可以學(xué)習(xí)到的內(nèi)容
查看全部 -
效果圖
查看全部 -
123456789
查看全部 -
定義組件 <template> <!--編寫html內(nèi)容--> 1 </template> <script> //編寫js內(nèi)容的 import?{definecomponent}?from?'vue' export?default?definecomponent?({ name:'home',//組件名稱 //接收父組件的數(shù)據(jù) props:{ }， //定義子組件 components:{ }， setup(props,ctx){ return{ } } }) </script> <style?scoped?lang='scss'> //scoped代表樣式只在當(dāng)前組件生效 </style>查看全部 -
state：定義全局狀態(tài)
mutations：同步修改全局狀態(tài)，都是方法，第一個參數(shù)是state，第二個參數(shù)是playload
actions：可以執(zhí)行異步操作，都是方法，第一個參數(shù)是store，第二個參數(shù)params
查看全部 -
header：
放輸入框input placeholder=“請輸入任務(wù)名稱” v-model="value"
用ref定義value變量
main：
定義一個數(shù)組list = ref([{title: string, complete: boolean}])
遍歷list，渲染任務(wù)列表
checkbox和button
footer：
已完成/全部
清除已完成
查看全部 -
reactive和toRefs一起使用
toRefs的作用是解構(gòu)reactive對象
查看全部 -
創(chuàng)建三個目錄，分別創(chuàng)建以下組件
navHeader
navMain
navFooter
在home組件中引入以上三個組件
查看全部 -
什么是組件：組件時維護(hù)單一功能，可復(fù)用的單個個體
vue3如何定義組件
import?{defineComponent}?from?'vue' export?default?defineComponent({ ????name:?'Home', ????props:{}, ????components:?{}, ????setup(props,?ctx){ ????????return?{} ????} })查看全部 -
項目目錄結(jié)構(gòu)
public/index.html 打包之后會把用到文件引入到該模版
src
assets靜態(tài)資源
components組件
router路由
store vuex
views 路由頁面
App.vue 根組件 存放公共組件和公共樣式，在每個組件中都會生效
main.js 項目入口，一般在這引入第三方庫和插件
查看全部 -
環(huán)境搭建
vue -V ----查看vue/cli版本
vue create todolist 創(chuàng)建vue項目
選項：
項目結(jié)構(gòu)
查看全部 -
vue3.0定義對象
????let one=['1','2','3'];
????let data=reactive({ name="demo" });
ref(? ) 只能定義單個對象
reactive({? }) 可以以數(shù)組的形式群定義
...toRefs( ) 可以直接頁面聲明，不需要如reactive方法一樣需要data.name這樣調(diào)用
查看全部 -
reactive 相應(yīng)對象
toRefs 普通對象
查看全部 -
template? html 內(nèi)容
script js內(nèi)容
? ? scoped? 指當(dāng)前樣式只在當(dāng)前頁面可用?
? ? lang? ? ? 預(yù)處理器
import {defineComponent} from 'vue' 定義組件
實(shí)現(xiàn)默認(rèn)組件
export? detault defineComponent ({
????????name? ?組件名稱
? ? ? ? props:{? 調(diào)用組件頁面的數(shù)據(jù)
????????},
? ? ? ? components:{? 定義子組件
? ? ? ? },
? ? ? ? setup(props,ctx){ // 調(diào)用頁面數(shù)據(jù) ,? 上下文
????? ? ? ? return {
?????????????}
????????}
})
查看全部 -
node_modules? ?存放依賴 庫和插件
public? favicon.ico 瀏覽器圖標(biāo)? ?index.html 根頁面
src
.browserslistrc? 瀏覽器版本
package.json 包管理文件
? ? name? 項目名稱
? ? version 項目版本
? ? private? 是否私有
? ? scripts? ?啟動腳本
? ? dependencies? 開發(fā)依賴
? ? devdependencies? ? 環(huán)境依賴
?
查看全部 -
assets 存放靜態(tài)資源
components 一般組件
router 路由配置
store 狀態(tài)管理
views 路由組件?
APP.vue 根組件
main.js 入口js文件
查看全部 -
query 傳參 地址欄 刷新還在 params傳參 不在地址欄，刷新就沒有了
查看全部 -
組件卸載時的生命周期
?清除定時器 清除閉包函數(shù)
查看全部 -
把每個組件的基本結(jié)構(gòu)和所需要的數(shù)據(jù)寫出來
查看全部 -
state：定義所需要的狀態(tài)的
mutations：同步修改state 都是方法， 第一個參數(shù)state 第二個參數(shù)是需要修改的值
actions：異步提交mutation，第一個參數(shù)是store 第二個參數(shù)是修改的值
modules：模塊化
查看全部 -
訪問ref定義的數(shù)據(jù) 要寫數(shù)據(jù)名value
查看全部 -
toRefs解構(gòu)reactive數(shù)據(jù)，
...toRefs(data)
查看全部 -
vue3.0中，控制臺報警告就是報錯
查看全部 -
reactive 和 ref 都是用來定義響應(yīng)式數(shù)據(jù)的 reactive更推薦去定義復(fù)雜的數(shù)據(jù)類型 ref 更推薦定義基本類型
ref 和 reactive 本質(zhì)我們可以簡單的理解為ref是對reactive的二次包裝, ref定義的數(shù)據(jù)訪問的時候要多一個.value
使用ref定義基本數(shù)據(jù)類型,ref也可以定義數(shù)組和對象。
ref、toRef、toRefs
參數(shù)不同：ref()接收一個 js 基本數(shù)據(jù)類型的參數(shù)；toRef()接收兩個參數(shù)，第一個為對象，第二個為對象中的某個屬性；
原理不同：ref()是對原數(shù)據(jù)的一個深拷貝，當(dāng)其值改變時不會影響到原始值；toRef()是對原數(shù)據(jù)的一個引用，當(dāng)值改變時會影響到原始值；
響應(yīng)性不同：ref()創(chuàng)建的數(shù)據(jù)會觸發(fā) vue 模版更新；toRef()創(chuàng)建的響應(yīng)式數(shù)據(jù)并不會觸發(fā) vue 模版更新，所以toRef()的本質(zhì)是引用，與原始數(shù)據(jù)有關(guān)聯(lián)。
查看全部 -
.browserslistrc版本文件
查看全部 -
vue create todolist??
Manually select fearures(手動選擇安裝)
3.0x
history? Y
Sass
回車
查看全部
舉報