zoukankan      html  css  js  c++  java
  • vue项目中需注意的点(一)

    一、vue-source【全局】配置需要注意的问题

     Vue.http.options.emulateJSON = true;
     Vue.http.options.emulateHTTP = true;
    1. emulateHTTP

    emulateHTTP(布尔值)。默认值为:false,设置值为true时,PUT, PATCH和DELETE等请求会以普通的POST方法发出,并且HTTP头信息的X-HTTP-Method-Override属性会设置为实际的HTTP方法。。

    2. emulateJSON

    emulateJSON(布尔值)。默认值为:false,设置值为true时,数据(无论是get还是post)都会以formdata(表单提交方式)的形式发送数据。所以我们在给后台传递参数的时候需要加JSON.stringify(参数)处理一下。
    如果服务器无法处理编码为application/json的请求,可以启用emulateJSON选项。启用之后,请求会以application/x-www-form-urlencoded为MIME type,就像普通的HTML表单一样。

    二、正则转义

    Ps:需求在使用富文本编辑器(我使用的是Ueditor)时,传到后台数据需要对“双引号”进行转义

    str.replace(/"/g,'\"');//进行转义然后转给后台
    str.replace(/\"/g,'"');//从后台拿到的数据进行反转义

    三、混合开发中的异步部请求处理

    混合开发中我们会用到安卓或者ios同事提供的jsBridge,来调用原生事件。但我们在请求后台的接口中需要把“这个参数”传递过去,所以我们就需要用异步处理。

    import jsBridge from 'common/js/jsbridge'; // 引入jsBridge
    jsBridge.getHeader().then((data)=>{//成功处理函数},(err)=>{//失败处理函数});//注意此处的“getHeader()”函数不一定和我的一样名称。这个是别小伙伴(安卓或IOS)定的

    四、vue脚手架(vue-cli)生成项目渲染注意点

    在用vue生成的项目中,,针对index.html、app.vue、main.js三者之间关系

    项目目录
    |----src
        |--App.vue
        |--main.js
    |----index.html

    简要说明

    mian.js将项目的依赖关系(包括vue,vue-router,axios,mintui等等插件)引入,其中也包括App.vue(主要展示区)文件,渲染到index.html中。这其中有几种配合方案千万不要混淆,否则效果会出不来。

    第一种写法

    index.html中:

    <div id="app" style="100%;height: 100%;"></div>

    main.js中:

    new Vue({
        template:<App/>,
        components: {App}
    }).$mount('#app');
    第二种写法

    index.html中:

    <div id="app" style="100%;height: 100%;">
         <router-view></router-view>
    </div>

    main.js中:

    new Vue({
        components: {App}
    }).$mount('#app');
    第三种写法

    index.html中:

    <div id="app" style="100%;height: 100%;">
         <App></App>
    </div>

    main.js中:

    new Vue({
        components: {App}
    }).$mount('#app');
    第二种写法文件内容

    index.html

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>h5</title>
    </head>
    <body>
    <div id="app" style="100%;height: 100%;">
        <router-view></router-view>
    </div>
    </body>
    </html>

    mian.js

    import Vue from 'vue';
    import App from './App';
    
    new Vue({
        components: {App}
    }).$mount('#app');

    App.vue

    <template>
        <div class="app-wrapper">
            <router-view></router-view>
        </div>
    </template>
    
    <script>
        export default {};
    </script>
    
    <style lang='scss' rel="stylesheet/scss" type="text/css" scoped>
        .app-wrapper{
            100%;
            height:100%;
        }
    </style>
  • 相关阅读:
    Magic-Club第六天
    .net工具类——文件操作
    .net工具类——HTML处理
    .net工具类——随机生成
    .net工具类——删除最后结尾的一个逗号
    .net工具类——分割字符串
    .net工具类——对象转换处理
    .net扩展方法——其他(科学计数法、ToDictionary 去重、List<Guid>转为List<Guid?>)
    .net扩展方法——类型转换
    『Linux学习笔记』7. 管道和过滤器 -- pipe
  • 原文地址:https://www.cnblogs.com/100qianduan/p/7124573.html
Copyright © 2011-2022 走看看