vue项目配置:

前端样式结构:


<style scoped>
.car-detail {
/* vw:屏幕宽度 vh:屏幕高度*/ (仅仅与页面有关)
/*width: 100vw;*/
/*height: 100vh;*/
/*background-color: orange;*/
}
</style>

settings配置:

# ap:国际化配置
# TODO --> 开发进度注释
LANGUAGE_CODE = 'zh-hans' # 中文注释
TIME_ZONE = 'Asia/Shanghai' # 地区
USE_I18N = True
USE_L10N = True
USE_TZ = False #同步时间 # media
MEDIA_URL = '/media/' # 设定 http 路径
# 项目media文件夹的绝对路径
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

vue项目路由配置:

1、环境
node:官网下载安装包,傻瓜式安装 - https://nodejs.org/zh-cn/ => 附带按照了npm
cnpm:npm install -g cnpm --registry=https://registry.npm.taobao.org
vue/cli:cnpm install -g @vue/cli 2、项目创建
cd 存放项目的目录
vue create 项目名 => 需要安装的组件babel、vue-router、vuex 3、配置项目启动
pycharm打开项目,配置npm启动 4、main.js完成vue环境的加载、完成根组件的渲染、加载vue-router、vuex等环境、加载自定义环境 5、vue-router配置路由:
<router-link to=""></router-link> | this.$router.push() 完成跳转
<router-view /> 完成页面组件的占位
在router/index.js中 完成路由配置 路径-视图组件 映射关系
两种路由传参
配置 跳转 获取
path:'/user' to="/user?pk=1" $route.query.pk
path:'/user/:pk' to="/user/1" $route.params.pk :to="{name: 'user'}" 6、组件生命周期钩子:组件从创建到销毁的整个生命周期中特殊时间节点回调的方法
created(){完成后台数据的请求}
mounted(){完成极其耗时的后台数据请求} 7、js原型
Vue.prototype.count = 100
所有Vue实例都可以访问count

vue全局js配置:

#创建 assets/ js / settings.js
export default {
base_url: 'http://127.0.0.1:8000'
}
main.js配置环境

vue全局css配置:

#创建 assets/css/global.css
html, body, h1, h2, h3, h4, h5, h6, p, ul {
margin: 0;
padding: 0;
}
ul {
list-style: none;
} a {
color: black;
text-decoration: none;
} #main.js 配置环境

父传子:

父组件

先写父组件
<template>
<子组件 :子组件的变量名='父组件的变量'> </子组件> //子组件的变量名前的冒号千万别丢了有和没有是两种意思
</template> <script>
.......//没用的内容我省略了
data(){
return {父组件的变量:1}
}
</script>

子组件

<template>
<inpu type='text' v-model='子标签的变量名'/>
</template>
<script>
.......//没用的内容我省略了
props:['子标签的变量名'] //而不是写data里
</script>

二.子传父

-- 先写子组件

子组件

<template>
<button @click='子组件的方法'>
子传父
</button>
</template>
<script>
.......//没用的内容我省略了
data(){return {子组件变量:1}}
methods:{
子组件的方法(){
this.$emit('父组件中的方法名',this.子组件变量)
}
}
</script>

父组件

<template>
<button @emit中定义的方法名='父组件的函数'>
子传父
</button>
</template>
<script>
.......//没用的内容我省略了
methods:{
父组件的函数(msg){
console.log(msg) //这里msg就是this.子组件变量
}
}
</script>

vue_05项目配置的更多相关文章

  1. Project server 2016 “没有为此项目配置网站”错误处理

    问题: 没有为此项目配置网站. There is no site configured for this project 解决办法: 依次点击设置>PWA设置>连接到sharepoint网 ...

  2. thinkphp3.22 多项目配置

    1.index.php if(version_compare(PHP_VERSION,'5.3.0','<')) die('require PHP > 5.3.0 !'); // 开启调试 ...

  3. VS2010的项目配置

    一直对VS的项目配置都是不怎么了解的,以前用过点,半年不用后,什么都忘记了... 下面这个是免于输入过长的引用头文件的,比如:#include “D:/C++/curl-7.37.0/libcurl/ ...

  4. VC项目配置基础以及快捷键(收藏)

    来自http://blog.csdn.net/phunxm/article/details/5082488 一.IDE基础配置 1.字体 VC6中“Tools→Options→Format→Font” ...

  5. ThinkPHP多应用/项目配置技巧(使用同一配置文件)--(十六)

    原文:ThinkPHP多应用/项目配置技巧(使用同一配置文件)--(十六) ThinkPHP多应用配置技巧(没有使用分组,这是通过入口文件产生的Home.Admin)----很实用! 比如:现在有Ho ...

  6. 理解 IntelliJ IDEA 的项目配置和Web部署

    1.项目配置的理解 IDEA 中最重要的各种设置项,就是这个 Project Structre 了,关乎你的项目运行,缺胳膊少腿都不行.最近公司正好也是用之前自己比较熟悉的IDEA而不是Eclipse ...

  7. 在找一份相对完整的Webpack项目配置指南么?这里有

    Webpack已经出来很久了,相关的文章也有很多,然而比较完整的例子却不是很多,让很多新手不知如何下脚,下脚了又遍地坑 说实话,官方文档是蛮乱的,而且有些还是错的错的..很多配置问题只有爬过坑才知道 ...

  8. ASP.NET Core 项目配置 ( Startup )(转载)

    原文:https://www.twle.cn/l/yufei/aspnetcore/dotnet-aspnet-startup.html 由于是个人网站,怕没了,特意复制保存,个人觉得讲的非常透彻 前 ...

  9. Intellij IDEA导入eclipse项目配置jdk、tomcat到浏览器正常访问

    转发自:博客园---Lindp(大佬写的甚好) 以下是转发的正文 intellij idea中文资料网上比较少,对于eclipse的项目如何导入intellij idea也没有完整的说明,本人在这里整 ...

随机推荐

  1. Python程序中的进程操作-进程间通信(multiprocess.Queue)

    目录 一.进程间通信 二.队列 2.1 概念介绍--multiprocess.Queue 2.1.1 方法介绍 2.1.2 其他方法(了解) 三.代码实例--multiprocess.Queue 3. ...

  2. ImportError: unable to find Qt5Core.dll on PATH

    一.实验环境 1.Windows7x32_SP1 2.python3.7.4 3.pyinstaller3.5 二.问题描述 1.一直都是在Windows10x64上使用pyinstaller打包ex ...

  3. git分支合并创建切换

    1. 场景描述 介绍下Git最新内容合并到主干.从主干创建最新分支.idea下切换最新分支,能在2分钟内完成git合并.分支创建以及在idea中完成切换,希望能帮到一些朋友. 2. 解决方案 从以下三 ...

  4. C#简单的枚举及结构

    using System; namespace program { enum WeekDays { a, b, c = ,//11 赋值以后就变成11,不赋值就是2 d, e, f, g }//不能输 ...

  5. webpack基本使用

    webpack安装时的坑 高版本的webpack除了全局安装webpack外,还需安装webpack-cli,在本地使用时也一样需要这样,不然会出错 webpack使用是的坑 在原始启动webpack ...

  6. Java生鲜电商平台-商品分类表和商品类型表的区别与数据库设计

    Java生鲜电商平台-商品分类表和商品类型表的区别与数据库设计   二者服务的对象不一样 目的也是不一样的 商品分类是为商品服务的 用来管理商品 商品类型是为扩展属性服务的 用来管理属性 举例:[转] ...

  7. Python【day 17】面向对象-成员

    类的变量分成2种: 1.成员变量 概念:在构造方法中的变量,前面带有self 作用:可以在类中不同的方法间使用 2.类变量-静态变量 概念:在类中,构造方法和普通方法之外,定义的变量 作用: 1.调用 ...

  8. DevExpress的TreeList实现自定义右键菜单打开文件选择对话框

    场景 DevExpress的TreeList实现节点上添加自定义右键菜单并实现删除节点功能: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/det ...

  9. FCC---Animate Multiple Elements at Variable Rates---还可以改循环时间,达到不同律动频率的效果

    In the previous challenge, you changed the animation rates for two similarly animated elements by al ...

  10. CSS3 2D变形 transform---移动 translate(x, y), 缩放 scale(x, y), 旋转 rotate(deg), transform-origin, 倾斜 skew(deg, deg)

    transform是CSS3中具有颠覆性的特征之一,可以实现元素的位移.旋转.倾斜.缩放,甚至支持矩阵方式,配合过渡和即将学习的动画知识,可以取代大量之前只能靠Flash才可以实现的效果. 变形转换 ...