资讯专栏INFORMATION COLUMN

前端小姿势

liaosilzu2007 / 2226人阅读

摘要:文章包含学习中遇到的问题小白水平可能会包含一些错误或者还没写完或者非最佳实践仅供参考父子组件的参考官方文档点我父级不需要操作额外代码子代操作方法一这个的官方会有介绍子代操作方法二通过这个实现的看了不少文章,这种比较多以为例子先简单介绍

文章包含学习中遇到的问题
小白水平 可能会包含一些错误 或者还没写完... 或者非最佳实践 仅供参考
1.父子组件的v-model

参考vue官方文档:点我

父级不需要操作额外代码

子代操作方法一:

这个vue的官方api会有介绍

    model: {
        prop: "checked",
        event: "change"
    }

v-on:change="$emit("change", $event.target.checked)"

子代操作方法二:

    props:{
        value:[String,Number],
    }

    handleInput(event) {
        const value = event.target.value;
        // 通过这个实现v-model的set
        this.$emit("input", value);
    },

2018/8/21 update: 看了不少文章,这种比较多 以input为例子

先简单介绍下 v-model 语法糖

    
    
        
    

    
    
    
     props:["value"],//接受父组件传递过来的value值 
    
     methods:{
            handleInput(event){
                let value =event.target.value;
                this.$emit("input",value);//触发input事件,并传入新的值
            },
            setCurrentValue(value) {
                this.currentValue = value;
            },
        } 
    
    watch: {
      value(val, oldValue) {
        this.setCurrentValue(val);
      }
    },
2.父子组件的DOM事件
    // 例子
     
     handleClick(evt) {
        this.$emit("click", evt);
      }
    // 例子
     
     handleFocus(event) {
        this.focused = true;
        this.$emit("focus", event);
      },
3.父子组件的data

比如placeholder可以直接写,在组件中使用v-bind:"$attrs"

4.父子组件的方法

组件使用的时候会触发一些方法,这个方法怎么在父级执行,比如登陆按钮触发(19/4/8:回头看看这句话,我当时在想什么?)

这个应该看做上面DOM事件,当子元素触发click,onmouseout,onmouseenter时通过emit触发父级的一个方法

5.父子组件样式的设置
  /* 父组件 */
  
  /* 子组件 */
  
6.组件的注册和安装

Vue.use()

    // 第一步,注册组件
    import Switch from "./src/component";
    Switch.install = function(Vue) {
        // name="TuiSwitch"
        Vue.component(Switch.name, Switch);
    };
    export default Switch;
    // 第二步,安装组件(main.js)
    import Switch from "install文件";
    Vue.use(Switch);
    // 第三步,在组件中直接使用即可
    
7.百分比宽高

脱离标准文档流的块级元素的百分百宽高是根据距离最近的定位元素的borderwidth

一般情况下设置百分百自适应布局是根据父级元素的contentwidth

8.垂直方向margin,padding的百分比

垂直方向margin,padding百分比,往往不是我们意料中是根据上级元素的高度(height)来计算的,其实是根据宽度(width)来计算的

如果为了实现间距效果可以使用一个空的且高度(height)为百分比的div来实现

9.axios

全局配置:

    axios.defaults.timeout = 30000;
    // 开发时只关心接口名称即可
    axios.defaults.baseURL = "http://10.0.1.1:8080";
    // 配置axios的拦截器,可以用来配置token
    axios.interceptors.request.use(
        config => {
            if (localStorage.getItem("token")) {
                config.headers.Authorization = localStorage.getItem("token");
            }
            return config
        },
        error => {
            return Promise.reject(error)
        }
    );

axios 出现415错误,需要在request设置content-type

    axios.post(url, params, {
            headers: {
                "Content-Type": "application/json;charset=UTF-8"
            }
            }).then(res=>{})

生成有转义字符的数据

    JSON.stringify({sdkParams: JSON.stringify(this.params)});
    
10.git

origin master:master

通过 git remote -v 显示origin代表的远程地址

第一个master表示本地的分支名

第二个master表示远程的分支名,如果没有会新建

win10 中使用 webstorm 时 git不小心保存错误的密码用户名 push会一直出错 可以搜索windows凭据 然后修改即可

11.分析elementUI

解压压缩包到当前项目的node_modules目录

node modules 的一些规则

import element-ui from "element-ui"

Node将在node_modules中搜索element-ui目录,Node会假设element-ui为一个包并试图找到包定义文件package.json。如果element-ui目录里没有包含package.json文件,Node会假设默认主文件为index.js,即会加载index.js。如果index.js也不存在,那么加载将失败。
package.json:
{
  "license": "MIT",
  "main": "lib/element-ui.common.js",
  "name": "element-ui",
}
node将会返回element-ui.common.js模块
12.WebSocket
    websocket(prodId) {
        this.ws = new WebSocket("ws://..........");
        this.ws.onopen = function () {
          console.log("ws connected!");
        };
        this.ws.onmessage = e => {

        };
        this.ws.onclose = function () {
          // 关闭 websocket后的回调函数
          console.log("ws closed");
        };
        // 组件销毁时调用,主动关闭websocket连接
        this.over = () => {
          ws.close();
        };
      },
    beforeDestroy() {
        if (this.over) {
          this.over();
        }
    send(msg){
        if(this.ws){
            this.ws.send(msg)
        }
    }
13.Vue单文件格式
    
    
    
    
    
14.button的切换动画

具有切换效果的动画可以使用checked来实现,并且可以使用$refs来根据checked的状态来设置样式

15.vh,vw

相对于视口的长度单位,pc视口就是浏览器窗口,所以可以实现window.onresize的效果(这句话应该是自适应的意思?)

16.flex

flex是flex-grow flex-shrink flex-basis的缩写

flex-grow相比其他元素的比例

flex-shrink元素占得份数,用来计算收缩时缩放的程度

flex-basis元素默认宽度

flex:1 的子代会自动撑开填满空白部位,在不使用绝对定位时,可以实现一个宽度自适应,另一个宽度固定(使用width设置固定值)

在有固定高的容器中实现标题在上面,内容在剩余高度居中:

父元素

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

标题flex:1来实现占满一行

需要居中的子元素align-self: flex-start||baseline;都可以实现,(测试元素是一个img)

17.事件的解绑
var EventUtil={
     /*检测绑定事件*/
     addHandler:function(element,type,handler){
         if(element.addEventListener){
            element.addEventListener(type,handler,false);
        }
        else if(element.attachEvent){
            element.attachEvent("on"+type,handler);
        }
        else{
            element["on"+type]=handler /*直接赋给事件*/
        }

    },
    /*通过removeHandler*/
    removeHandler:function(element,type,handler) {   /*Chrome*/
        if (element.removeEventListener)
            element.removeEventListener(type, handler, false);
        else if (element.deattachEvent) {               /*IE*/
            element.deattachEvent("on" + type, handler);
        }
        else {
            element["on" + type] = null;
            /*直接赋给事件*/
        }
    }
};

### 18.多层组件的封装

其实多层组件中参数是可以传递的,比如这个taginput,而且使用v-model传递参数,并不需要使用watch监听value改变然后使用$emit,value变化会自动从子组件传递到最外层

18-9-13 当时的观点有点弱智啊,这个这个直接改变了子组件中的值啊,可能是因为对象深度原因没有报错?

  
  
  

19.absolute的宽度

有些情况absolute居中需要使用两个嵌套absolute的div,这个时候最外层有可能会宽度不会被内容撑开,如果是文本的话可以使用white-space:nowrap 这样就可以撑开两个div了

transform: translateX(-50%);transform: translateY(-50%);只会有一个生效, 需要使用缩写形式 transform: translate(-50%,-50%); 这个可以实现一个absolute块完美居中

20.vue事件总线:BUS

解决组件之间信息的传递,发送数据的组件使用$on("Event Name",value)事件触发(当数据改变时触发这个函数就可以了),接受数据的组件使用$emit("Event Name",callback)接受即可,你可以把这个事件注册在mounted中(之后这个就可以等着其他组件$emit的数据了)

事件有时候会重复触发:注册的事件是全局的,它并不会随着组件的销毁而自动注销,需要手动注销

 beforeDestroy() {
             //组件销毁前需要解绑事件。否则会出现重复触发事件的问题
             bus.$off("Event Name");
         },

PS:在生命周期beforeDestroy,destroy中,this.$route.path 获取到的其实是下一个页面的path

21.flex两列布局

左右两列布局

左边宽度自适应,但是有个最小宽度

右边宽度固定

    father{
        display: flex;
        width: 100%;
        height: 100%;
        overflow: auto;
    }
    child-left{
        position: relative;
        min-width: 800px;
        height: 100%;
        flex: 1;
    }
    child-right{
        position: relative;
        min-width: 420px;
        height: 100%;
    }
22.上传图片按钮

使用lable+vue实现

    
    

使用js实现

    加载图片
    
    //js中再给input加change事件即可
    //这个也可以在vue中使用,给input加@change,然后手动触发这个input 的click()就可以弹出上传文件的界面了
    var invisible_file_input = document.getElementById("invisible_file_input");
    function sel_local_images() {
                 if (invisible_file_input) {
                     invisible_file_input.setAttribute("multiple", "multiple");
                     invisible_file_input.accept = ".jpg,.jpeg,.png,.bmp";
                     invisible_file_input.onchange = (e)=>{
                         // 获得第一张图片
                         var img = e.target.files[0];
                     };
                     invisible_file_input.click();
                 }
             }
23.图片base64显示
                //reader有几个读取文件的方法用于读取成不同格式,还有几个钩子函数用于不同阶段执行一些功能
                // var img =xxxxxxxxxxxx 
                // 将图片的base64格式显示在页面上,图片可以使用input上传
                let reader = new FileReader();
                reader.onload = (theFile)=>{
                        that.imgLoaded = e.target.result;
                        // 2018-10-24 图片还没有加载完成,不是DOM的问题,使用onload才能正确获得原始宽高
                        var i = new Image();
                        i.src = e.target.result;
                        i.onload = () => {
                            img_loaded_width = i.width;
                            img_loaded_height = i.height;
                }}
                // 这个貌似会执行上面的onload
                reader.readAsDataURL(img);
24.前端下载文件
    var blob = new Blob([JSON.stringify(data, null, 2)],{type : "application/json"});
    var aTag = document.getElementById("download_img");
    aTag.setAttribute("href", URL.createObjectURL(blob));
    aTag.setAttribute("download",  that.imgLoadedName.split(".")[0]+".json");
    aTag.click();
25. vue中ref命名不可以使用中划线 26. 前端调用相机

通过video控件,通过捕获video的流,截取video中的图像实现拍照,

通过input[file]控件调用移动端的摄像头,实现拍照。

    第一种可以实现对拍照界面的重写,IPhone环境11开始兼容;

    第二种方式实际上是调用input[type="file"],会弹出一个选择框让用户选择是调用相机还是调用相册,

    第二种兼容优于第一种,不好的地方就是这种方法无法控制拍照,想要在移动端实现只能拍照不能选择照片或者在拍照界面添加引导遮罩层的方法是行不通了。
    
    
    
    
    
    var cobj = document.getElementById("myCanvas").getContext("2d");
    var vobj = document.getElementById("myVideo");

    getUserMedia({video: true}, function (stream) {
        vobj.src = stream;
        vobj.play();
    }, function () {
    });


    document.getElementById("myButton").addEventListener("click", function () {
        cobj.drawImage(vobj, 0, 0, 640, 480);
        document.getElementById("myButton3").children[0].href = cobj.canvas.toDataURL("image/png");
    }, false);

    document.getElementById("myButton2").addEventListener("click", function () {
        window.open(cobj.canvas.toDataURL("image/png"), "_blank");
    }, false);


    function getUserMedia(obj, success, error) {
        if (navigator.getUserMedia) {
            getUserMedia = function (obj, success, error) {
                navigator.getUserMedia(obj, function (stream) {
                    success(stream);
                }, error);
            }
        } else if (navigator.webkitGetUserMedia) {
            getUserMedia = function (obj, success, error) {
                navigator.webkitGetUserMedia(obj, function (stream) {
                    var _URL = window.URL || window.webkitURL;
                    success(_URL.createObjectURL(stream));
                }, error);
            }
        } else if (navigator.mozGetUserMedia) {
            getUserMedia = function (obj, success, error) {
                navigator.mozGetUserMedia(obj, function (stream) {
                    success(window.URL.createObjectURL(stream));
                }, error);
            }
        } else {
            return false;
        }
        return getUserMedia(obj, success, error);
    }
27. xml解析:标签在转成DOM时会直接去掉中间的子代,很奇怪 28. el的表单验证prop和rule中属性名和v-model的参数名称是要相同的 29. RestTemplate的请求会通过其他服务的过滤器 30. jenkins rancher 实现持续集成 jira跟踪 31. n不换行
    有时候后端传过来的字符串中
转成字符对象时会成为
但是在vue中渲染到页面中不会出现换行,而是显示为

    (compose.environment[key]).replace(/
/g,"
") 然后就可以实现前端换行了 很奇怪 不知道为什么
32. 传递单纯数组的后端操作
     //{men:{name:"Kik",age:11},place:["A","B","C"]}
     ArrayList place = (ArrayList) jsonObject.getObject("place", List.class);
33. fastJSON一般用法
    String algorithmList = "["a","b","c"]" 
    List apacMainIdList = JSONObject.parseObject(algorithmList, List.class);
34. body的带siderbar的自适应布局
     
     
35. 前端读取网络路径文件

XMLHttpRequest

    // 读取为二进制
    function createXHR(){
        return window.XMLHttpRequest?
        new XMLHttpRequest():
        new ActiveXObject("Microsoft.XMLHTTP");
    }
    function getData(url){
        let request = createXHR();
        request.open("GET",url,false);
        request.responseType = "blob";
        request.onload = function () {
                        var reader = new FileReader();
                        reader.readAsArrayBuffer(request.response);
                        reader.onload = function (e) {
                            var DAT_data = e.target.result;
                            console.log("DAT_data:" + DAT_data);
                        };
                    };
        request.send();
    }

ajax

36. event.target 和 event.currentTarget

target是触发事件的那个元素 currentTarget是处理这个事件的元素 比如ul和li,给ul绑定点击事件,点击li后,target是li,currentTarget是ul

可以参考

组件中传递参数等方法:https://segmentfault.com/a/11...

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/103308.html

相关文章

  • 七夕秀恩爱新姿势!这波操作我给十分!

    摘要:四结语七夕已至,快和亲爱的人绑定最美恋爱关系吧在这里,你们就是导演,记录美好爱情。特别说明此小程序,是我亲手为女朋友写的,感谢她提供需求支持,七夕快乐。 showImg(https://segmentfault.com/img/remote/1460000020001501?w=779&h=203); 一、前言 像每一滴酒回不了最初的葡萄,我回不到年少。爱情亦是如此,这就是写一篇小程序...

    imingyu 评论0 收藏0
  • 前端解析ipa、apk安装包信息 —— app-info-parser

    摘要:肥皂,哦不,安装包需要经过两次网络传输从前端传到后端再传到存储云。安装包一般体积都不小,两次传输会浪费很长时间。 背景 最近公司内部的一个管理安装包的平台准备进行重构,之前安装包上传的姿势是这样的 showImg(https://segmentfault.com/img/remote/1460000017551542?w=336&h=267); 不好意思,放错了,是这样的: 前端选择...

    LeanCloud 评论0 收藏0
  • 前端姿势

    摘要:文章包含学习中遇到的问题小白水平可能会包含一些错误或者还没写完或者非最佳实践仅供参考父子组件的参考官方文档点我父级不需要操作额外代码子代操作方法一这个的官方会有介绍子代操作方法二通过这个实现的看了不少文章,这种比较多以为例子先简单介绍 文章包含学习中遇到的问题 小白水平 可能会包含一些错误 或者还没写完... 或者非最佳实践 仅供参考 1.父子组件的v-model 参考vue官方文档...

    JeOam 评论0 收藏0
  • 前端姿势

    摘要:文章包含学习中遇到的问题小白水平可能会包含一些错误或者还没写完或者非最佳实践仅供参考父子组件的参考官方文档点我父级不需要操作额外代码子代操作方法一这个的官方会有介绍子代操作方法二通过这个实现的看了不少文章,这种比较多以为例子先简单介绍 文章包含学习中遇到的问题 小白水平 可能会包含一些错误 或者还没写完... 或者非最佳实践 仅供参考 1.父子组件的v-model 参考vue官方文档...

    LeexMuller 评论0 收藏0
  • postcss-lazysprite: 一种生成CSS 雪碧图的懒惰姿势

    摘要:无论是早期工具,还是现在流行的配合这类构建工具而产生的雪碧图插件。 本文原文链接:https://devework.com/postcss-...,转载请注明原始来源,谢谢! showImg(https://segmentfault.com/img/bVPmaC?w=1692&h=754); postcss-lazysprite 是一个基于PostCSS 开发的用于生成雪碧图图片及其C...

    BearyChat 评论0 收藏0

发表评论

0条评论

liaosilzu2007

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<