好久不寫東西了,感覺收生疏了, 學習使用以思路為主, 記錄筆記為輔作用.
v-if: http://www.cnblogs.com/iiiiiher/p/9025532.html
v-show
template
v-bind: http://www.cnblogs.com/iiiiiher/p/9025764.html
style
class
屬性值
v-on: http://www.cnblogs.com/iiiiiher/p/9025935.html
computed: http://www.cnblogs.com/iiiiiher/p/9025253.html
依賴項觸發get
bootstrap布局
bootstrap-table基於bootstrap的表格插件
Ant Design Pro基於react, 這里可以了解一下網頁的組件
- 布局
- 表單
- 列表
- bootstrap
1.柵格化布局 默認12列(有一些框架可能是24列)
<div class="container">
<div class="row">
2.常見的樣式 基本樣式 + 增強樣式
<table class="table table-hover table-bordered">
<button class="btn btn-danger" @click="remove(product)">刪除</button>
注意: default 灰色 success 綠色 danger 紅色 warning 警告色 info淺藍色 primary 藍色
js
- ajax
- 數據綁定
- vue的ui框架
iview,mintui,elementui
- js基礎板塊
原型--原型鏈繼承--實例化過程--所有函數都是Fucntion的一個實例
私有this
prototype里的this
json
數據綁定
1.逐次加
2.一次加
回流 重繪
3.文檔碎片
- vue板塊
1.模板
v-text(v-once)
v-html
v-model
修飾符: .number .lazy .trim
v-bind: 冒號
v-on: @
@keyup.enter.ctrl
2.表單
綁定值
綁定數組
select選擇: category
select多選,標簽
checbox單選: 置頂
checkbox多選: 多選題
radio單選: 單選題
3.事件
todo: vue-router
vuex
keyup.enter
onclick
onchange
onsubmit
arr.map
arr.filters
栗子:刪除按鈕
remove(p){ // p代表的是當前點擊的這一項 [xxx,ooo,qqq,ppp,p]
this.products = this.products.filter(item=>item!==p);
},
arr.reduce
栗子: 計算總價格
return this.products.reduce((prev,next)=>{
console.log(1000000);
if(!next.isSelected)return prev; // 如果當前沒被選中，就不加當前這一項
return prev+next.productPrice*next.productCount;
},0);
arr.forEach
栗子: 全選/反選(set)(computed)
set(val){ //val是給checkAll 賦予值的時候傳遞過來的
this.products.forEach(item=>item.isSelected = val );
}
arr.every
找false,如有返回false,如無返回true.
栗子:
全選/反選(get)(computed)
computed的緩存特性:
一般computed里只會有get,不會set. 如果只有get,可以省略不寫get.
學習vue的時候,會有mvvm的概念, 就先理解下mvc環狀模型
從Script到Code Blocks、Code Behind到MVC、MVP、MVVM-寫的不錯,涉及到一些哲學思想
理解網站設計的mvc數據單向循環模式
vue思路
1,框架和庫
2, vue全家桶:
vuejs: (基於es5)
vue-router: 客戶端路由
vuex: 大規模狀態管理
axios: ajax獲取數據
vue-cli: 構建工具
-
3,特點
響應的變化
數據改變,視圖自動更新
MVC:
model: 模型
view: 數據
controller: 控制器
MVVM:
model: 模型
view: 視圖
view-model: 視圖模型
-
組合的視圖組件
4,體驗
1.npm安裝
2.綁定數據
vm.msg改變
3.雙向綁定
input textarea select checkbox radio
view <-- model
view --> model(view-model)
前端發生
前端的model相當於data部分
前端的view相當於input等表單
1,4個指令
v-model
v-once
v-text 代替{{}},解決閃爍問題
<style>
{display: none}
</style>
<div id="app" v-cloak>
</div>
v-html
2,arr的監控(修改data)
不可監控: 修改arr的某一項
1.通過下標識
2.通過長度
可監控: pop/push shift/unshift sort/reverse splice reduce/filter
3.arr的遍歷
v-for: 替代innerHTML
4.函數
4.1 定義: method的2種寫法
1.
寫data里
寫methods里
2. v-on === @ 兩種寫法
<div v-on:mousedown="fn">1.查看幫助...</div>
<div @mousedown="fn2">2.查看幫助...</div>
4.2 調用
第一個位置參數默認是event.
fn2() fn2()
fn3(event) fn3()
fn4(event, age) fn4($event, 22)
5.簡易todo
1.v-model: 雙向綁定
2.v-for: arr遍歷
3.v-on: 函數
input --> v-model
button--> v-on @event
arr --> v-for
回車添加
寫完清空
事件觸發條件:
@keyup.13="add"
@keyup.enter="add"
@keyup.a="add"
@keyup.contrl.a="add"
v-model:
input
checkbox
1.checkbox要加value屬性
2.且data字典要是arr類型
select單選
<select v-model="msg">
<option value="" disabled>請選擇</option>
<option value="kanshu">看書</option>
<option value="pashan">爬山</option>
<option value="youyong">打球</option>
</select>
1,msg默認為空
請選擇不允許點
2,如果value不寫,msg默認取的是><之間的.
select多選: 數據類型需要是數組
<select name="" id="" multiple v-model="arr">
<option value="kanshu">看書</option>
<option value="pashan">爬山</option>
<option value="youyong">打球</option>
</select>
互斥: select單/checkbox
數據類型str, 加value
多選: select多選
數據類型,arr
箭頭函數:
1, 無關鍵字
2, 如果1個參數, 則可以省掉小括號
3, 無this, this指向上一級作用域的this
// function fn(age) {
// console.log(age);
// }
fn = age => console.log(age);
fn(20);
1.axios獲取數據
2.綁定
bootstrap表單布局
綁定數據
1.充當屬性數據
<img :src="product.productCover" :title="product.productName">
2,小計
<td><input type="number" v-model.number.lazy="product.productCount"></td>
3,計算
<td>{{product.productPrice*product.productCount}}</td>
-
3.刪除