请选择 进入手机版 | 继续访问电脑版
搜索
房产
装修
汽车
婚嫁
健康
理财
旅游
美食
跳蚤
二手房
租房
招聘
二手车
教育
茶座
我要买房
买东西
装修家居
交友
职场
生活
网购
亲子
情感
龙城车友
找美食
谈婚论嫁
美女
兴趣
八卦
宠物
手机

vue初始化、数据处理、组件传参、路由传参、全局定义CSS与JS、组件生命周期

[复制链接]
查看: 39|回复: 0

3万

主题

3万

帖子

9万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
92768
发表于 2020-2-15 02:35 | 显示全部楼层 |阅读模式
目录
            
    项目初始化

1.跟组件: App.vue
  1.         
复制代码
2.路由设备:router--index.js
只保存home主页,删除about页,删除views中About组件
  1. const routes = [  {    path: '/',    name: 'Home',    component: Home  },];
复制代码
3.组件:views和components文件夹
1)删除除Home.vue之外的一切组件
2)初始化Home.vue
  1.       [size=6]主页[/size]
  2.   
复制代码
3)删除logo和HollWorld.vue
我的关键词 vue初始化、数据处置、组件传参、路由传参、全局界说CSS与JS、组件生命周期  热门消息 1736414-20200214193630515-631245963

4)在assets中新建css、img、js三个文件夹
我的关键词 vue初始化、数据处置、组件传参、路由传参、全局界说CSS与JS、组件生命周期  热门消息 1736414-20200214193831631-1961717364
  1. 假如要点窜页面标签图标    更换public文件夹下的favicon.ico图片文件
复制代码
组件数据部分化处置赏罚
  1. """1)不管页面组件还是小组件,都大要会被屡次复用2)复用组件的原因起因,实在就是复用组件的 页面结构、页面款式、页面逻辑3)可是页面上的数据必要区分(被复用的两个组件数据几多是有区此外),所以组件的数据要做部分化处置赏罚4)借助函数可以发生部分感化域的特点,为每一次复用组件发生一个自力的感化域语法:data () {    return {        // 数据们    }}"""
复制代码
子组件
  1.             {{ count }}下   
  2.     .beat {        width: 100px;        height: 100px;        background-color: orange;        text-align: center;        line-height: 100px;        border-radius: 50%;    }
复制代码
父组件
  1.                         
复制代码
路由逻辑跳转
  1. """1)很多时候,我们必要经过普通按钮的逻辑,或是间接在某些逻辑中完成页面的跳转2)可以经过在逻辑中用 this.$router.push() 来完成前往目标页,两种语法以下    this.$router.push('途径')    this.$router.push({name: '路由名'})3)在做移动端项目时,没有像欣赏器那样的进步背景键,页可以用 this.$router.go() 来完成进步退却,语法以下    进步退却:this.$router.go(正负整数),正式代表进步,负数代表被页粳数值就是步长"""
复制代码
案例
  1.                     [size=6]主页[/size]
  2.         前往第一页        |        前往第二页        |        退却一页        |        退却二页        |        进步一页   
复制代码
组件传参

父传子
  1. """一、组件传参 - 父传子1)在子组件内部经过props设备组件的自界说属性    props: ['abc', 'goods']2)在父组件衬着子组件是对自界说属性赋值即可    """
复制代码
子组件
  1.             [align=center][img]http://www.waysfocus.com/goods.img[/img][/align]        {{ goods.title }}
  2.    
  3.     .goods-box {        width: 260px;        height: 300px;        border: 1px solid black;        border-radius: 5px;        margin: 20px;        float: left;        overflow: hidden;        text-align: center;    }    img {        width: 260px;        height: 260px;    }
复制代码
父组件
  1.                                             
  2.    
复制代码
子传父
  1. """二、组件传参 - 子传父条件:子组件是被父组件衬着的,所以子组件衬着要晚于父组件1)子组件必定要满足一个条件,才华对父组件举行传参(某个时候节点 === 某个被激活的方式)    eg:i)子组件刚刚加载乐成,给父组件传参 ii)子组件某一个按钮被点击的时辰,给父组件传参 iii)子组件要被烧毁了,给父组件传参2)在子组件满足条件激活子组件的方式中,对父组件发生一个看护,并将数据照顾处置赏罚(自界说组件事变)   
  2.     methods: {        boxClick () { this.$emit('receiveData', this.goods.title, '第二个数据', '第三个数据') }    }3)在父组件衬着子组件时,为自界说事变绑定方式    4)在父组件实现绑定方式时,便可以拿到子组件传参的内容(接收到了看护并在父组件中响应)    recFn(title, data2, data3) {        console.log('接收到了' + title);    }组件标签不能绑定系统界说的事变,没故意义,子组件的事变都是在自己内部完成"""
复制代码
子组件
  1.             [align=center][img]http://www.waysfocus.com/goods.img[/img][/align]        {{ goods.title }}
  2.    
复制代码
父组件
  1.                                             
  2.    
复制代码
组件的生命周期钩子
  1. """一、组件的生命周期:一个组件从建立到烧毁的全部进程二、生命周期钩子:在一个组件生命周期中,会有很多特此外时候节点,且常常会在特定的时候节点完成必定的逻辑,特此外事变节点可以绑定钩子注:钩子 - 提早为某个事变绑定方式,当满足这个事变激活条件时,方式就会被挪用 | 满足特点条件被回调的绑定方式就称之为钩子"""
复制代码
  1.                
复制代码
路由传参
  1. """路由传参:一、经过url正则传递数据i)设备    路由: path: '/goods/detail/:pk'   |   '/goods/:pk/detail/:xyz'    请求: '/goods/detail/尽情字符'    |    '/goods/尽情字符/detail/尽情字符'ii)怎样传        this.$router.push(`/goods/detail/${pk}`)iii)怎样取    this.$route工具是治理路由参数的,传递的参数会在this.$route.params字典中    this.$route.params.pk二、经过url参数传递数据i)设备    路由: path: '/goods/detail'    请求: '/goods/detail?pk=数据'ii)怎样传            this.$router.push(`/goods/detail?pk=${pk}`)    this.$router.push({name:'GoodsDetail', query:{pk: pk}})iii)怎样取    this.$route工具是治理路由参数的,传递的参数会在this.$route.query字典中    this.$route.query.pk"""
复制代码
第一种

设备:router/index.js
  1. const routes = [    {        path: '/goods/detail/:pk',        name: 'GoodsDetail',        component: GoodsDetail    },]
复制代码
传递:GoodsBox.vue
  1.     [align=center][img]http://www.waysfocus.com/goods.img[/img][/align]    {{ goods.title }}
  2.     [align=center][img]http://www.waysfocus.com/goods.img[/img][/align]    {{ goods.title }}
复制代码
接收:GoodsDetail.py
  1. [/code][size=5]第二种[/size]
  2. [size=4]设备:router/index.js[/size]
  3. [code]const routes = [    {        path: '/goods/detail',        name: 'GoodsDetail',        component: GoodsDetail    },]
复制代码
传递:GoodsBox.vue
  1.     [align=center][img]http://www.waysfocus.com/goods.img[/img][/align]    {{ goods.title }}
  2.     [align=center][img]http://www.waysfocus.com/goods.img[/img][/align]    {{ goods.title }}
复制代码
接收:GoodsDetail.py
  1. [/code][size=6]全局设备自界说css与js[/size]
  2. [size=5]global.css[/size]
  3. [code]html, body {    margin: 0;}a {    color: black;    text-decoration: none;}ul {    margin: 0;    padding: 0;}
复制代码
settings.js
  1. export default {    base_url: 'https://127.0.0.1:8000'}
复制代码
main.js
  1. //1) 设备全局cssimport '@/assets/css/global.css'// import global_css from '@/assets/css/global.css'  // 资本必要用变量保存,方便今后利用// require('@/assets/css/global.css')// let global_css = require('@/assets/css/global.css')  // 资本必要用变量保存,方便今后利用// 2) 设备自界说js设备文件import settings from '@/assets/js/settings.js'Vue.prototype.$settings = settings;// 在任何一个组件中的逻辑,可以经过 this.$settings拜候settings.js文件的{}数据
复制代码
小结
  1. """项目:    情况;node -> npm -> cnpm -> vue/cli    建立:vue create proj    设备:设备npm启动项    项目目录结构:依靠、情况、进口、焦点代码们    组件:    组成:template + script + style    导入:import 别名 from '途径'    父加子:1)导入 2)注册 3)利用    组件数据:组件化处置赏罚 data(){ return {} }    传参:父传子 - 自界说组件属性  |  子传父 - 自界说组件事变    生命周期钩子:created() { //完成背景请求等 }路由:    根组件中的页面占位:    导航栏中的页面跳转:    代码中的逻辑跳转:this.$router.push() | this.$router.go()    路由传参:两种方式    两个路由工具:        this.$router - 控制路由跳转        this.$route - 控制路由数据"""
复制代码
免责声明:假如加害了您的权益,请联系站长,我们会实时删除侵权内容,感谢合作!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Copyright © 2006-2014 WAYSFOCUS 影像 你 我 他,中国商业影视一站式解决平台 版权所有 法律顾问:高律师 客服电话:0791-88289918
技术支持:迪恩网络科技公司  Powered by Discuz! X3.2
快速回复 返回顶部 返回列表