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]相当于删除第一个 ```

Vue项目零碎知识(全局js,css配置,element-UI,bs使用, img动态配置,js数组)的更多相关文章

  1. Laravel 6.X + Vue.js 2.X + Element UI +vue-router 配置

    Laravel 版本:6.X Vue 版本:2.X Laravel配置: Laravel使用的是Laragon安装 选择Laravel:接下来弹出框,输入项目名,laravel会自动创建一个数据库,数 ...

  2. vue项目中设置全局引入scss,使每个组件都可以使用变量

    在Vue项目中使用scss,如果写了一套完整的有变量的scss文件.那么就需要全局引入,这样在每个组件中使用. 可以在mian.js全局引入,下面是使用方法. 1: 安装node-sass.sass- ...

  3. vue实现多语言国际化(vue-i18n),结合element ui、vue-router、echarts以及joint等。

    老板说我们的项目要和国际接轨,于是乎,加上了多语言(vue-i18n).项目用到的UI框架是element ui ,后续echarts.joint等全都得加上多语言. 一.言归正传,i18n在vue项 ...

  4. 微信小程序动态修改title,动态配置title,动态配置头部,微信小程序动态配置头部

    微信小程序的title是在json里面配置的 "navigationBarTitleText": "title名称" 这种title是固定死的不灵活处理一些页面 ...

  5. 【vue】——CDN或全局引入CSS、JS。

    在入口文件index.html中添加 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  6. vue项目组件的全局注册

    在vue-cli项目中,我们经常会封装自己的组件,并且要在多个界面中引用它,这个时候就需要全局注册组件. 首先我们会封装自己的组件,比如twoDimensionTable文件夹下的index.vue: ...

  7. 在vue项目中添加全局提示框

    1.写一个提示框组件:msg.vue (注明:这里用两个div的原因是成功和失败的提示不能用同一个div,因为他们可能紧接着出现,所以不能从始至终只有一个提示框在工作) 2.写一个调用此组建的js : ...

  8. Vue 项目中添加全局过滤器以及全局混合mixin

    可以在.vue文件中定义局部使用的过滤器 export default{ data(){ return [] }, filters:{ toUpperCase:function(value){ ret ...

  9. vue项目中使用echarts map报错Cannot read property 'push' of undefined nanhai.js

    在vue中绘制地图需要加载一个本地china.json文件,我用的是get请求的方法加载的,而不是直接import,因为我怕import请求到的部署到线上的时候会有问题.如下是get请求方法: thi ...

随机推荐

  1. 前端/h5/React D3.js实现根据数据动态更新图形/类似进度实时变化效果

    最近接到一个需求,在满足规则下,实现类似这种展示效果,其实就是用图形反映数据(NK,一种干扰值) 运行后,它其实是不断在动的,每格都可能显示灰色或者彩色 这里一共是10个格子,每格代表一个范围边界,说 ...

  2. A1063 Set Similarity (25 分)

    一.技术总结 这个题目是属于set容器的内容,使用可以减少很多代码量 开始试过在同一个for循环中定义两个auto,结果编译通不过,有时候构思很重要,就比如这一题,开始我是一个一个去加,而代码中是,先 ...

  3. linux下如何查看自己都装了什么服务

    service --status-all 先把rabbitmq进程杀掉 ps -ef | grep rabbitmq | grep -v grep | awk '{print $2}' | xargs ...

  4. Programming | 获取图像频域并分解为高低频

    1. DCT变换 参考:https://stackoverflow.com/questions/22322427/decomposing-an-image-into-two-frequency-com ...

  5. TreeMap 原理

    基于jdk1.8 TreeMap第一个想到的就是有序,当然也不是线程安全 TreeMap实现NavigableMap接口,说明支持一系列的导航方法 一.构造方法 public TreeMap() { ...

  6. 【Java并发专题之一】Java内存模型

    一.计算机内存模型 针对计算机机器而言,操作系统.JVM程序等其他所有程序都需要遵循内存模型规范.1.CPU技术发展1.1 CPU缓存的出现CPU的发展快于内存条,CPU的运算速度越来越快,内存条的读 ...

  7. Vue.js 源码分析(二十九) 高级应用 transition-group组件 详解

    对于过度动画如果要同时渲染整个列表时,可以使用transition-group组件. transition-group组件的props和transition组件类似,不同点是transition-gr ...

  8. 面试官:说说Mysql数据库分库分表,并且会有哪些问题?

    之前一篇文章已经谈到了数据库集群之主从集群也就是读写分离,也提到了读写分离其实只是分担了访问的压力,但是存储的压力没有解决. 存储的压力说白了就是随着系统的演化,需求的增加,可能表的数量会逐渐增多,比 ...

  9. 聊聊springboot2的embeded container的配置改动

    本文主要研究下springboot2的embeded container的配置改动 springboot 1.x import org.apache.catalina.connector.Connec ...

  10. 【05】Nginx:TCP / 正向 / 反向代理 / 负载均衡

    写在前面的话 在我们日常的工作中,不可能所有的服务都是简单的 HTML 静态网页,nginx 作为轻量级的 WEB 服务器,其实我们将它用于更多的地方还是作为我们网站的入口.不管你是后端接口,还是前端 ...