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