vue元件初學 彈射小球

2021-08-07 19:38:19 字數 599 閱讀 2169

1. 定義每個彈射的小球元件( ocicle )

2. 元件message自定義屬性存放小球初始資訊(可修改)

3. 思路

3.1 定時器設定小球每一幀移動

3.2 初始方向:isxtrue為true則小球為橫座標正方向;

isytrue為true則小球為縱座標正方向

3.3 每次移動之前獲取小球當前座標(oleft,otop),當前座標加上移動距離為下一幀座標

3.4 邊界判斷:橫軸座標範圍超過最大值則加號變減號

4. vue知識點

4.1 父子元件傳遞資訊使用props

4.2 模板編譯之前獲取el寬高 

beforemount: function

()

4.3 子元件獲取el寬高 ( this.$root.elwidth,this.$root.elheight )

4.4 模板編譯完成後更新子元件資訊

mounted: function

()

5. **

6. 鏈結位址 (  )

vue元件初學 彈射小球

1.定義每個彈射的小球元件 ocicle 2.元件message自定義屬性存放小球初始資訊 可修改 3.思路 3.1 定時器設定小球每一幀移動 3.2 初始方向 isxtrue為true則小球為橫座標正方向 isytrue為true則小球為縱座標正方向 3.3 每次移動之前獲取小球當前座標 olef...

vue初學 3 深入理解vue元件

舉個例子比較能說明問題 1 vue.component row 如何解決?is語法 這樣就解決了這個問題了。vue.component counter data function methods 在兩個子元件用ref引用 接著在根元件中新增方法來處理資料 handlechange function ...

vue初學實踐之路 vue簡單日曆元件 3

這一篇我們來實現管理員修改每一天剩餘數量的功能。div id calendar div id left span 要修改的日期 span li v for d in checkeddays li div v if checkeddays.length 0 label for checkedcount...