JS零碎知识要点

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