zoukankan      html  css  js  c++  java
  • Vue项目零碎知识(全局js,css配置,element-UI,bs使用, img动态配置,js数组)

    1. 全局css样式,首先在静态assets中写好文件,然后要在main.js中配置

      // 配置全局css样式
      // import '@/assets/css/global.css'
      require('@/assets/css/global.css')
      
      //上面两种都可以实现全局样式的导入,但是第二种容错率较好,更健壮,比较常用,第一种对环境要求比较高
      

    2. 全局js样式,也是首先要在静态assets文件中写好,然后再main.js中进行配置
    // main.js
    
    //配置全局settings.js
    import settings from '@/assets/js/settings'
    Vue.prototype.$settings = settings; 
    //注意,这个$settings是可以随便起名的,可以写成Vue.prototype.a,但是在下面用的时候也需要写成this.a.base_url
    
    
    // home.vue
    export default {
        name: 'home',
        components: {
            
        },
        created(){
            console.log(this.$settings.base_url);
        }
    }
    

    3. css样式中,font,里面严格按照F12中的样式顺序来,不写的话就是默认normal
    4. 主页点击之后跳转的一个流程:点击按钮,找到router路由,然后加载component组件,进入views组件中,该组件再由相关的子组件渲染数据,通过属性把值传过去,这样就实现了页面的展现。
    5. 仓库存储: store,一刷新就没有了,在移动端的应用比较多。
    6. vue辅助UI—element UI(属于组件,可以直接进行使用)
    ## main.js
    
    #配置全局element-ui组件
    #1、安装:cnpm install element-ui
    #2、配置环境
    
    import ElementUI from 'element-ui';
    import 'element-ui/lib/theme-chalk/index.css';
    Vue.use(ElementUI); #全局就可以用了
    
    

    7. VUE使用bootstrap,需要对其进行二次封装,因为它不是组件,Vue只支持使用组件
    ## main.js
    
    ## 配置jq+bs环境
    ## 1、安装:cnpm install jquery && cnpm install bootstrap@3
    ## 2、配置环境:jq在vue.config.js中配置
    import "bootstrap"   # 加载bs的逻辑
    import "bootstrap/dist/css/bootstrap.css"   
    
    #手动新建一个vue.config.js文件
    
    # 修改该文件内容后,只有重启,才能同步配置
    const webpack = require("webpack");
    
    module.exports = {
        configureWebpack: {
            plugins: [
                new webpack.ProvidePlugin({
                    $: "jquery",
                    jQuery: "jquery",
                    "window.$": "jquery",
                    "window.jQuery": "jquery",
                    Popper: ["popper.js", "default"]
                })
            ]
        }
    };
    

    8. **JsonResponse**
    # 如果传的是字典,那么可以直接传,否则要加参数 safe=false, 如果数据中有中文,就加参数json_dumps_params{'ensure_ascii': False}  这个参数其实就是json.dump()点进去看源码就可以看到的。
    

    9. 动态加载img 中src

    Vue中src属性绑定问题

    vue关于img src动态赋值问题


    10. 关于media 静态文件的配置

    ```python
    '''
    用户上传的文件,应该单独放在一个文件夹中,所以django后端在用户注册或者保存文件的时候,会自动生成一个文件夹 media,在使用图片的路径时,会自动把media拼接进去。
    '''
    
    
    '''
    我是直接在数据库中增加数据,配置图片路径,但是传给前台的图片路径仍然带着media, 所以为了防止图片找不到,需要手动加一个media文件夹。
    '''
    
    '''
    在使用media的时候需要注意配置
    '''
    # settings.py
    MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
    
    #urls.py
    from django.views.static import serve
    from app名 import settings
    
    url(r'^media/(?P<path>.*)', serve, {'document_root':settings.MEDIA_ROOT})
    ```
    

    11. `js`中对于数组的操作
    ```python
    # splice
    let arr = [1, 2, 3];
    arr.splice(1,1,100) #打印结果 arr=[1, 100, 3] 从第一个位置开始,操作长度为1,操作结果为100,相当于替换
    arr.splice(3, 1, 100) #打印结果 arr=[1, 2, 3, 100] 第三个位置,操作长度为1,操作结果为100,相当于尾增
    arr.splice(0, 0, 100) #打印结果 arr=[100, 1, 2, 3] 相当于首增
    arr.splice(0, 1) #打印结果 arr=[2, 3]相当于删除第一个
    
    ```
  • 相关阅读:
    代理(reGeorg)
    弱口令爆破技巧
    无法解析@NotBlank
    LC 1723. Find Minimum Time to Finish All Jobs (dp+二分)
    帝国cms 联合多张表查询
    php 根据白名单替换字符转中的链接 封装的函数
    php 正则匹配域名后的整个链接和只匹配域名
    JVM系列(一):垃圾回收之MinorGC,MajorGC和FullGC的区别
    spring事务的执行原理
    java基础系列(八):Semphore,CountDownLatch和CyclicBarrier的使用
  • 原文地址:https://www.cnblogs.com/michealjy/p/11877164.html
Copyright © 2011-2022 走看看