1.常用keycode
| keyCode | 含義 |
|---|---|
| 13 | 回車(chē) |
| 8 | BackSpace |
| 9 | Tab |
| 37 | 左 |
| 38 | 上 |
| 39 | 右 |
| 40 | 下 |
2.Vue中的$refs
一般來(lái)講，獲取DOM元素封字，需document.querySelector（".input1"）獲取這個(gè)dom節(jié)點(diǎn)，然后在獲取input1的值耍鬓。
但是用ref綁定之后阔籽，我們就不需要在獲取dom節(jié)點(diǎn)了，直接在上面的input上綁定input1牲蜀，然后$refs里面調(diào)用就行笆制。
然后在javascript里面這樣調(diào)用：this.$refs.input1 這樣就可以減少獲取dom節(jié)點(diǎn)的消耗了。
示例代碼:
<body>
<div id="app">
<input type="text" style="color:red;" v-model="msg" ref="userinfo">
<button @click="getRef" ref="btnref">按鈕</button>
<div id="ccc" ref="divRef">
{{msg}}
</div>
<button @click="eventFn($event)" data-aid= "123">srcElement</button>
</div>
<script src="JS/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
msg:"青春大巴"
},
methods: {
getRef(){
//這是知識(shí)點(diǎn)
this.$refs.userinfo.value ="哈哈哈";
this.$refs.divRef.style.backgroundColor = 'blue';
},
eventFn(e){
console.log(e);
e.srcElement.style.backgroundColor = 'red';
console.log( e.srcElement.dataset.aid);
}
},
});
</script>
</body>
3.JS制作陰影
style="background-color: gray;opacity: 0.4;"
4.v-指令
| 指令 | 注解 |
|---|---|
| v-text | 更新文本涣达，部分更新常用{{}} |
| v-html | 更新元素的 innerHTML 在辆。注意：內(nèi)容按普通 HTML 插入 - 不會(huì)作為 Vue 模板進(jìn)行編譯.永不用在用戶(hù)提交的內(nèi)容上。 |
| v-show | true/false.切換元素的 display CSS 屬性度苔。 |
| v-if | 是否渲染 |
| v-for | 遍歷字典和數(shù)組(官網(wǎng)上說(shuō)還能遍歷 Object | number | string ,咱也不知道匆篓，咱也不敢問(wèn)啊) |
| v-on | 綁定事件，簡(jiǎn)寫(xiě)'@' |
| v-bind | 綁定屬性,簡(jiǎn)寫(xiě)':' |
| v - model | 在表單控件或者組件上創(chuàng)建雙向綁定林螃，只能在<input>奕删，<select>，<textarea> 疗认，components |
| v-pre | 跳過(guò)這個(gè)元素和它的子元素的編譯過(guò)程完残。可以用來(lái)顯示原始 Mustache 標(biāo)簽横漏。跳過(guò)大量沒(méi)有指令的節(jié)點(diǎn)會(huì)加快編譯谨设。 |
| v-cloak | 解決頁(yè)面加載時(shí)閃爍出現(xiàn)vue標(biāo)簽或者指令的問(wèn)題{{message}} |
| v-once | 只渲染元素和組件一次。隨后的重新渲染缎浇，元素/組件及其所有的子節(jié)點(diǎn)將被視為靜態(tài)內(nèi)容并跳過(guò) |
4.Vuejs生命周期
beforeCreate(){
console.log("實(shí)例剛剛被創(chuàng)建+beforeCreate");
},
created(){
console.log("實(shí)例已經(jīng)創(chuàng)建完成+created");
},
beforeMount(){
console.log("模板被渲染之前+beforeMount");
},
mounted(){//網(wǎng)絡(luò)請(qǐng)求放在這里
console.log("模板被渲染完成+mounted")
},
beforeUpdate(){
console.log("數(shù)據(jù)被更新之前+beforeUpdate")
},
updated(){
console.log("數(shù)據(jù)更新完成+updated")
},
beforeDestroy(){
console.log("組件被銷(xiāo)毀之前+beforeDestory")
},
destroyed(){
console.log("組件已經(jīng)被銷(xiāo)毀+destoryed")
}
5.JS數(shù)學(xué)函數(shù)小數(shù)點(diǎn)
向下取整的函數(shù) Math.floor(); Math.floor( 23.2222222); // 23
向上取整 Math.ceil(); Math.ceil(23.333333）扎拣； // 24
四舍五入 Math.round(); Math.round(23.33333); // 23
四舍五入取n位小數(shù)，運(yùn)算后得到的是字符串 ().toFixed(n); // 取小數(shù)點(diǎn)后n位
例如：(36.36498524).toFixed(3); // 36.365
