vue_04 项目初始:

vue 文件构造:

1.vue 文件:
# 1) template:有且只有一个根标签
# 2) script:必须将组件对象导出 export default {}
# 3) style: style标签明确scoped属性,代表该样式只在组件内部起作用(样式的组件化) 2.vue文件 必须先export default {} 倒出,才会被使用· 3.vue 文件样式: <template>
<div class="test"> </div>
</template> <script>
export default {
name: "Test"
}
</script> <style scoped> //只属于该文件的样式 </style>

vue项目目录结构:

 #vue项目目录结构分析

```
├── v-proj
| ├── node_modules // 当前项目所有依赖,一般不可以移植给其他电脑环境
| ├── public
| | ├── favicon.ico // 标签图标
| | └── index.html // 当前项目唯一的页面
| ├── src
| | ├── assets // 静态资源img、css、js
| | ├── components // 小组件
| | ├── views // 页面组件
| | ├── App.vue // 根组件
| | ├── main.js // 全局脚本文件(项目的入口)
| | ├── router
| | | └── index.js// 路由脚本文件(配置路由 url链接 与 页面组件的映射关系)
| | └── store
| | | └── index.js// 仓库脚本文件(vuex插件的配置文件,数据仓库)
| ├── README.md
└ └── package.json等配置文件
```

项目入口(main.js):

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store' Vue.config.productionTip = false new Vue({
router,
store,
render: h => h(App)
}).$mount('#app') 解析:
import Vue from 'vue' // 加载vue环境
import App from './App.vue' // 加载根组件
import router from './router' // 加载路由环境
import store from './store' // 加载数据仓库环境 Vue.config.productionTip = false (app软件启动时的tip指引)
new Vue({
el: '#app',
router, // router = router
store,
render: function (readFn) {
return readFn(App); //替换
},
});

vue项目启动生命周期:

简单的请求流程:
1) 加载mian.js启动项目
1) 加载mian.js启动项目
i) import Vue from 'vue' 为项目加载vue环境
ii) import App from './App.vue' 加载根组件用于渲染替换挂载点
iii) import router from './router' 加载路由脚本文件,进入路由相关配置 2) 加载router.js文件,为项目提供路由服务,并加载已配置的路由(链接与页面组件的映射关系)
注:不管当前渲染的是什么路由,页面渲染的一定是根组件,链接匹配到的页面组件只是替换根组件中的
<router-view></router-view> 3) 如果请求链接改变(路由改变),就会匹配新链接对应的页面组件,新页面组件会替换渲染router-view标签,替换掉之前的页面标签(就是完成了页面跳转)

根组件(vue.js):

<template>
<div id="app">
<!-- url路径会加载不同的页面组件
eg:/red => RegPage | /blue => BluePage
来替换router-view标签,完成页面的切换
-->
<router-view></router-view>
</div>
</template> 文件结构内容不变动!!!

router.js:

import 别名 from './views/xxxx'  #导入的文件

export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/xx',
name: 'xxx',
component: xx 导入的文件(.vue)
},

创建的页面:

eg:
<template>
<div class="blue-page">
<Nav></Nav>
</div>
</template>
<script>
import Nav from '@/components/Nav'
export default {
name: "BluePage",
components: {
Nav
}
}
</script>
<style scoped>
.blue-page {
width: 100vw;
height: 100vh;
background-color: blue;
}
</style>

全局样式文件配置(css样式):

# assets/css/global.css

html, body, h1, h2, ul, p {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
a {
color: black;
text-decoration: none;
} main.js配置: import '@/assets/css/global.css'
require('@/assets/css/global.css');

js类的原型:类属性

<script>

    function A() {}

    let a1 = new A();

    // 为A类添加原型 => 类似于类属性
A.prototype.num = 100; console.log(a2.num);-->100 // ES6语法下类
class B {
constructor(name) { // 定义方法
this.name = name;
}
}
let b1 = new B('Tom');
let b2 = new B('Ben');
B.prototype.count = 666; console.log(b2.count);---》666 console.log(b1.name);
console.log(b2.name); // 推导
Vue.prototype.$ajax = 12345;
// this.$ajax </script>

vue组件的生命周期钩子:

    1)一个组件从创建到销毁的整个过程,就称之为组件的生命周期
# 2)在组件创建到销毁的过程中,会出现众多关键的时间节点,如 组件要创建了、组件创建完毕了、组件数据渲染完毕了、组件要被销毁了、组件销毁完毕了 等等时间节点,每一个时间节点,vue都为其提供了一个回调函数(在该组件到达该时间节点时,就会触发对应的回调函数,在函数中就可以完成该节点需要完成的业务逻辑)
# 3)生命周期钩子函数就是 vue实例 成员 # 任何一个组件:在vue组件的script的export default导出字典中直接写钩子函数 export default {
// ...
beforeCreate() {
console.log('组件创建了,但数据和方法还未提供');
// console.log(this.$data);
// console.log(this.$options.methods);
console.log(this.title);
console.log(this.alterTitle);
},
// 该钩子需要掌握,一般该组件请求后台的数据,都是在该钩子中完成
// 1)请求来的数据可以给页面变量进行赋值
// 2)该节点还只停留在虚拟DOM范畴,如果数据还需要做二次修改再渲染到页面,
// 可以在beforeMount、mounted钩子中添加逻辑处理 beforeCreate() {
console.log('开始创建组件');
console.log(this.title);
console.log(this.printTitle);
this.title = '呵呵';
},
created() { // 重点
console.log('组件创建成功');
console.log(this.title);
console.log(this.printTitle);
// 请求后台数据,完成数据的更新
this.title = '嘿嘿';
},
beforeMount() {
console.log('组件开始渲染');
},
mounted() {
console.log('组件渲染成功');
this.title = '嘻嘻';
},
beforeUpdate() {
console.log('数据开始更新');
},
updated() {
console.log('数据更新完毕');
},
activated() {
console.log('组件激活');
},
deactivated() {
console.log('组件停用');
},
destroyed() {
console.log('组件销毁成功');
}

路由跳转方式:

this.$router.push({name: '路由名', query: {拼接的参数}})
this.$router.go(number) //前进 | 后退 路由配置:
方式一:
{
path: '/course/detail',
name: 'course-detail',
component: CourseDetail
}
{
path: '/detail',
redirect: '/course/detail'
}
this.$router.push('/course/detail'); == this.$router.push('/detail');
this.$router.push('/course/detail?pk=1'); => this.$route.query.pk 方式二: {
path: '/course/detail/:pk',
name: 'course-detail',
component: CourseDetail
}
this.$router.push('/course/detail/10'); => this.$route.params.pk

路由小结:

 概括:
1)路由配置:router/index.js
2)路由跳转与路由渲染:router-link、router-view、$router.push、$router.go
3)路由传参:两种传参 新增页面三步骤:
1) 在views文件夹中创建视图组件 2) 在router.js文件中配置路由 3) 设置路由跳转,在指定路由下渲染该页面组件(替换根组件中的router-view标签)

vue_04day 路由初始的更多相关文章

  1. Vue-Router路由 Vue-CLI脚手架和模块化开发 之 路由常用配置与路由嵌套

    vue-router路由常用配置 1.mode:配置路由模式,默认为hash,由于URL很丑,可以修改为history,但是需要服务端的支持: 以上一篇的博文为实例: 初始时url的显示: 使用mod ...

  2. angularjs路由监听,uirouter感知路由变化,解决uirouter路由监听不生效的问题

     壹 ❀ 引 angularjs除了惊为天人的双向数据绑定外,路由也是出彩的一笔,通过路由配置,我们能在不发起页面跳转的情况下,对当前页内容进行整体更新,angularjs提供了ngRoute模块用于 ...

  3. Backbone源码分析-Backbone架构+流程图

    作者:nuysoft/高云/nuysoft@gmail.com 声明:本文为原创文章,如需转载,请注明来源并保留原文链接. Backbone0.9.1源码分析分析系列 jQuery1.6.1源码分析系 ...

  4. 详解基于vue,vue-router, vuex以及addRoutes进行权限控制

    基于vuex, vue-router,vuex的权限控制教程,完整代码地址见https://github.com/linrunzheng/vue-permission-control 接下来让我们模拟 ...

  5. WebApi - 路由

    这段时间的博客打算和大家一起分享下webapi的使用和心得,主要原因是群里面有朋友说希望能有这方面的文章分享,随便自己也再回顾下:后面将会和大家分不同篇章来分享交流心得,希望各位多多扫码支持和点赞,谢 ...

  6. ASP.NET Core 中文文档 第四章 MVC(4.2)控制器操作的路由

    原文:Routing to Controller Actions 作者:Ryan Nowak.Rick Anderson 翻译:娄宇(Lyrics) 校对:何镇汐.姚阿勇(Dr.Yao) ASP.NE ...

  7. 【微信小程序开发•系列文章六】生命周期和路由

    这篇文章理论的知识比较多一些,都是个人观点,描述有失妥当的地方希望读者指出. [微信小程序开发•系列文章一]入门 [微信小程序开发•系列文章二]视图层 [微信小程序开发•系列文章三]数据层 [微信小程 ...

  8. AEAI ESB路由转换机制说明

    1. 背景概述 相信了解数通畅联的人对AEAI ESB并不陌生,其设计器ESBDesigner中内置组件有:路由和转换.数据适配器.协议适配器.协议接入适配器等4类组件,每类组件下面包含各种类型的组件 ...

  9. ASP.NET Web API路由系统:路由系统的几个核心类型

    虽然ASP.NET Web API框架采用与ASP.NET MVC框架类似的管道式设计,但是ASP.NET Web API管道的核心部分(定义在程序集System.Web.Http.dll中)已经移除 ...

随机推荐

  1. 冒泡排序 C&&C++

    冒泡排序(因为过程像冒泡,所以叫做冒泡排序)   流程: (1)对数组中各个数字,一次比较相邻两个 (2)如果前面大于后面,就交换这两个数据 (3)再用同样的方法继续排,直到外层循环排完 或者 (1) ...

  2. elasticsearch搜索QueryStringQueryBuilder时的一些问题记录

    首先看下原始数据 但是 如果使用英文查询的时候又和上面有点区别了,感觉还是分词器的问题

  3. 聊聊JS的二进制家族:Blob、ArrayBuffer和Buffer

    事实上,前端很少涉及对二进制数据的处理,但即便如此,我们偶尔总能在角落里看见它们的身影. 今天我们就来聊一聊前端的二进制家族:Blob.ArrayBuffer和Buffer 概述 Blob: 前端的一 ...

  4. Fragment中不能使用自定义带参构造函数

    通过Fragment自定义的静态方法将值从activity传到fragment中,然后就想到这样不是多次一举吗,为什么不直接写个带参构造函数将值传过去呢?试了一下,发现Fragment有参构造函数竟然 ...

  5. 【目录】Cocos2d-x系列

    1.Cocos2d-x的坐标系统 2.Cocos2d-x 点击菜单按键居中放大(无需修改底层代码) 3.发布Cocos2d-x的PC端程序 4.Cocos2d-x游戏实例<忍者飞镖>之对象 ...

  6. JsonPath基本用法

    JsonPath基本用法 本文主要介绍JsonPath的基本语法,并演示如何在Newtonsoft.Json中进行使用. JsonPath的来源 看它的名字你就能知道,这家伙和JSON文档有关系,正如 ...

  7. webpack生成的css文件background-image url图片无法加载

    之前在使用webpack3构建基于less预处理的项目时,在对指定的元素使用background-image: url(xxx)来设置背景图片时,本地开发是ok的,但是在项目编译产出后背景图片就找不到 ...

  8. Leetcode547: Friend Circles 朋友圈问题

    问题描述 在一个班级里有N个同学, 有些同学是朋友,有些不是.他们之间的友谊是可以传递的比如A和B是朋友,B和C是朋友,那么A和C也是朋友.我们定义 friend circle为由直接或者间接都是朋友 ...

  9. .NET Core 3.0之深入源码理解Host(一)

    写在前面 ASP .NET Core中的通用主机构建器是在v2.1中引入的,应用在启动时构建主机,主机作为一个对象用于封装应用资源以及应用程序启动和生存期管理.其主要功能包括配置初始化(包括加载配置以 ...

  10. 简洁优雅的Python教你如何在工作中“偷懒”

    前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者: A字头 PS:如有需要Python学习资料的小伙伴可以加点击下方链 ...