• v-model重要，雙向數(shù)據(jù)綁定既可以獲取表單內(nèi)容也可以設(shè)置表單元素的內(nèi)容
  • v-model=“表達(dá)式” 表達(dá)式和data里面的變量**雙向聯(lián)動(dòng) **
    如果有l(wèi)ogin和reset直接調(diào)用this.變量=''這樣就可以reset了
    • 如果是表單輸入框的話獲取的就是輸入的內(nèi)容一般為字符，但是可以配合.trim和.number使用
    • 單選框 獲取的是true or false
    • 多選按鈕 獲取的是選擇項(xiàng)的value值一般會(huì)有value和name屬性name用來(lái)同組相斥
    • 復(fù)選框 寫(xiě)在selection里獲取的是option的value值option一般有value值
    • 文本域 獲取的是文本值

案例- 列表的添加刪除統(tǒng)計(jì)清空

<section id="app"><!-- 輸入框 --><header class="header"><h1>小黑記事本</h1><input  placeholder="請(qǐng)輸入任務(wù)" class="new-todo" v-model="todoname"/><button class="add" @click="add">添加任務(wù)</button></header><!-- 列表區(qū)域 --><section class="main"><ul class="todo-list"><li class="todo" v-for="(item, index) in list" :key="item.id"><div class="view"><span class="index">{{ index + 1 }}.</span> <label>{{ item.name }}</label><button @click="del(item.id)" class="destroy"></button></div></li></ul></section><!-- 統(tǒng)計(jì)和清空 --><footer class="footer" v-show="list.length>0"><!-- 統(tǒng)計(jì) --><span class="todo-count">合 計(jì):<strong> {{list.length}}</strong></span><!-- 清空 --><button class="clear-completed" @click="clear">清空任務(wù)</button></footer> </section><!-- 底部 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {todoname:'',list: [{ id: 1, name: '跑步一公里' },{ id: 3, name: '游泳100米' }]},methods: {del (id) {// console.log(id) => filter 保留所有不等于該 id 的項(xiàng)this.list = this.list.filter(item => item.id !== id)},add(){if(this.todoname.trim()==''){alert("請(qǐng)輸入值")return}this.list.unshift({id:+new Date(),name:this.todoname,})},clear(){this.list=[]}}})</script>

總結(jié)

一次添加多個(gè)內(nèi)容-屬性添加法

{
屬性名：屬性值，
屬性名：屬性值<!--最后一個(gè)可以不加逗號(hào)-->
<!--new Vue({})這里也是這么個(gè)意思-->
}

數(shù)組的方法積累

.filter(item=>item.id!=id) <!--這樣完了之后一定要賦值原數(shù)組回去-->
.unshift()<!--如果里面有多個(gè)屬性就是{}這個(gè)-->
.reduce((sum,index)=>>sum+item.score,0)<!--數(shù)組里某一項(xiàng)求值-->

字符串的方法積累

.trim()
<!--應(yīng)用：1.可以用來(lái)去除前后的空格后判斷是不是空字符串-->

時(shí)間戳的應(yīng)用

+new Date()

我的錯(cuò)誤和思維漏洞

• 在data里面相互引用的時(shí)候不加this
• 清空操作字符串就賦值’'數(shù)組就就賦值[ ]
• 如果想實(shí)時(shí)動(dòng)態(tài)改變值：就用@事件=“數(shù)值改變的表達(dá)式或者函數(shù)調(diào)用”
• 表達(dá)式可計(jì)算的特性很重要，插值表達(dá)式不放在標(biāo)簽里面，其他就不用考慮了
• params：里面的默認(rèn)寫(xiě)法是屬性名：屬性值（后端規(guī)定）但是如果穿的是多個(gè)屬性組成的對(duì)象，直接params：對(duì)象 就可以

3.2 指令修飾符

• @keyup.enter=""鍵盤(pán)事件監(jiān)聽(tīng)綁定回車(chē)鍵
• v-model.trim=""雙向互動(dòng)綁定去除首尾空格
• v-model.number=""雙向互動(dòng)綁定字轉(zhuǎn)數(shù)字
• @事件名.stop=""阻止冒泡
• @事件名.prevent=“”*阻止默認(rèn)行為 *例如a標(biāo)簽的跳轉(zhuǎn)

4.Vue里面的各種屬性

methods里面的函數(shù)形式 fn(){}

用途：發(fā)請(qǐng)求，事件觸發(fā)

• 在v-on=“”如果不用傳參直接寫(xiě)函數(shù)名就可以，如果要傳參就括號(hào)然后里面寫(xiě)參數(shù)
• 如果在vue的其他地方和插值表達(dá)式 里面要用的話還是要加括號(hào)

computed里面的屬性形式 f’n(){}

• 和用data里面的其他值一樣用這個(gè)f’n也就是當(dāng)為屬性在用,所以不管是vue的其他地方還是插值表達(dá)式都是f’n
• 緩存特性以提升性能
• 計(jì)算屬性得出來(lái)的值是默認(rèn)不能修改的，在任何地方修改都會(huì)報(bào)錯(cuò)，只有加上set方法之后才可以修改

computed:{
計(jì)算屬性名字：{get(){return },set(修改的值value）{}//當(dāng)在外部有修改計(jì)算屬性的行為的時(shí)候，就會(huì)觸發(fā)這個(gè)set方法，并把修改的值賦值給value,然后可以對(duì)value進(jìn)行相關(guān)的操作。
}

但是注意要用computed里面的某個(gè)屬性里的修改的話就應(yīng)該是 屬性=‘修改值’(vue里面其他地方用還是要加this哦)

watch監(jiān)視器

如果你寫(xiě)了某個(gè)數(shù)據(jù)的監(jiān)視器，只要數(shù)據(jù)變化了，就會(huì)觸發(fā)這個(gè)對(duì)應(yīng)監(jiān)視器

作用：可以根據(jù)數(shù)據(jù)的實(shí)時(shí)變化，來(lái)發(fā)送請(qǐng)求

little tips：用clearTimeout(a) const a=setTimeout()來(lái)實(shí)現(xiàn)防抖延遲執(zhí)行 .

非整個(gè)對(duì)象的寫(xiě)法

整個(gè)對(duì)象的監(jiān)聽(tīng)寫(xiě)法

deep是深度監(jiān)視就是對(duì)對(duì)象里面每一個(gè)屬性都監(jiān)視，immmediate是一進(jìn)頁(yè)面就翻譯一次。

5.生命周期

konwlegde

生命周期鉤子：在vue的生命周期里自動(dòng)運(yùn)行的函數(shù)，可以在這些函數(shù)里面運(yùn)行自己的代碼。
created：發(fā)初始化請(qǐng)求
mounted：dom操作
destroy是在關(guān)閉頁(yè)面后執(zhí)行的，可以用app.$destroy()將數(shù)據(jù)變成死數(shù)據(jù)

example-自動(dòng)獲取焦點(diǎn)

6.工程化開(kāi)發(fā)

• index.html提供vue所管理的容器
• App.vue是根目錄
• components是子組件
• main.js導(dǎo)入vue,App.vue,用render方法將App.vue動(dòng)態(tài)渲染到 index.html