1.常用keycode
| keyCode | 含义 |
|---|---|
| 13 | 回车 |
| 8 | BackSpace |
| 9 | Tab |
| 37 | 左 |
| 38 | 上 |
| 39 | 右 |
| 40 | 下 |
2.Vue中的$refs
一般来讲，获取DOM元素，需document.querySelector（".input1"）获取这个dom节点，然后在获取input1的值。
但是用ref绑定之后，我们就不需要在获取dom节点了，直接在上面的input上绑定input1，然后$refs里面调用就行。
然后在javascript里面这样调用：this.$refs.input1 这样就可以减少获取dom节点的消耗了。
示例代码:
<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(){
//这是知识点
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 。注意：内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译.永不用在用户提交的内容上。 |
| v-show | true/false.切换元素的 display CSS 属性。 |
| v-if | 是否渲染 |
| v-for | 遍历字典和数组(官网上说还能遍历 Object | number | string ,咱也不知道，咱也不敢问啊) |
| v-on | 绑定事件，简写'@' |
| v-bind | 绑定属性,简写':' |
| v - model | 在表单控件或者组件上创建双向绑定，只能在<input>，<select>，<textarea> ，components |
| v-pre | 跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。 |
| v-cloak | 解决页面加载时闪烁出现vue标签或者指令的问题{{message}} |
| v-once | 只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过 |
4.Vuejs生命周期
beforeCreate(){
console.log("实例刚刚被创建+beforeCreate");
},
created(){
console.log("实例已经创建完成+created");
},
beforeMount(){
console.log("模板被渲染之前+beforeMount");
},
mounted(){//网络请求放在这里
console.log("模板被渲染完成+mounted")
},
beforeUpdate(){
console.log("数据被更新之前+beforeUpdate")
},
updated(){
console.log("数据更新完成+updated")
},
beforeDestroy(){
console.log("组件被销毁之前+beforeDestory")
},
destroyed(){
console.log("组件已经被销毁+destoryed")
}
5.JS数学函数小数点
向下取整的函数 Math.floor(); Math.floor( 23.2222222); // 23
向上取整 Math.ceil(); Math.ceil(23.333333）； // 24
四舍五入 Math.round(); Math.round(23.33333); // 23
四舍五入取n位小数，运算后得到的是字符串 ().toFixed(n); // 取小数点后n位
例如：(36.36498524).toFixed(3); // 36.365
网友评论