复习
1、组件：
HTML，css，js的集合体
vue实例就是代表组件
组件template实例成员管理html结构，有且只有一个跟根组件
子组件可以服用，所以数据要组件化，data的值有方法的返回值提供
2、分类：
根组件：new Vue{（）}，顶级组件
全局组件：vue.component('组件吗',需要注册
局部组件：let 组件名={},只有在注册的父组件中才能使用
3、组件间传参：
父传子：
子传父：v-for指令需要给循环的标签或者组件添加key属性，完成缓存的建立js原型补充
<script src="js/vue.js"></script>
<script>
function A() {}
let a1=new A();
let a2=new A();
A.prototype.num=100//为A类添加原型=>类似于类属性
console.log(a1.num);
console.log(a2.num);
//ES6语法下的类
class B {
constructor(name) {
this.name=name;
}
}
let b1=new B('tom');
let b2=new B('ben');
B.prototype.count=666;
console.log(b1.count);
console.log(b2.count);
console.log(b1.name);
console.log(b2.name);
//推导
Vue.prototype.$ajax=12345;
// this.$ajax
</script>
</html>vue项目
vue项目创建
进入存放项目的目录
>:cd ***
创建项目
>:vue create 项目名
项目初始化
vue根据配置重新构建依赖：
复制 public src package.json 三个文件放在一个文件夹里面
>:cd 文件夹路径
>:cnpm install //重新构建依赖pycharm管理vue项目
用pycharm打开vue项目
添加配置npm启动
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等配置文件
vue组件
template：有且只有一个根标签
script：必须将组件对象导出 export default {}
style:style标签明确scoped属性，代表该样式只在组件内部起作用（样式的组件化）vue项目生命周期
main.js
import Vue from 'vue' //系统文件
import App from './App.vue'
import router from './router'
import store from './store'
//import 别名 from '资源'
//导入的文件必须要有导出
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
//项目的生命周期：
/**
* 1、启动项目，加载主脚本文件main.js
* 加载Vue环境，创建根组件完成渲染
* 加载系统已有的第三方环境：router store
* 加载自定义的第三方环境与自己配置的环境：后期项目不断添加
*
* 2、router被加载，就会解析router文件夹下的index.js文件，完成 路由-组件 的映射关系
*
* 3、新建视图组件，vue（在views文件夹中），在路由中配置（在router的index.js中），设置路由跳转（在Nav.vue）( <router-link to="/about">About</router-link>
)
*
* **/vue文件式组件讲解
views/home.vue
<!--template标签负责组件的html结构：有且只有一个根标签-->
<template>
<div class="home">
<h1>主页</h1>
<hr>
<Nav></Nav>
</div>
</template>
<!--script标签负责组件的js逻辑，js逻辑固定导出（外界才可以导入）-->
<script>
import Nav from '../components/Nav'
export default {
data(){
return {
}
},
methods:{
},
components:{
Nav
}
}
</script>
<!--style标签负责组件的css样式：scoped保证样式的组件化-样式只有在该组件内部起作用-->
<!--局部样式-->
<style scoped>
h1 {
color: red;
}
</style>components/Nav.vue
<template>
<div class="nav">
<h1>导航栏</h1>
</div>
</template>
<script>
export default {
name: "Nav"
}
</script>
<style scoped>
h1 {
color: aqua;
}
</style>配置自定义全局样式
src/assets/css/global.css
html,body,h1,h2,ul {
margin: 0;
padding: 0;
}
ul {
list-style:none
}
a {
color:black;
text-decoration: none;
}main.js
//配置全局样式：@就代表src文件夹的绝对路径，官方提倡require加载静态文件
// import '@/assets/css/global.css'
require('@/assets/css/global.css')导航栏组件及路由逻辑跳转
src/components/Nav.vue
<template>
<div class="nav">
<div class="content">
<ul>
<li class="logo">
<img src="@/assets/img/logo.svg" alt="" @click="goHome">
</li>
<li class="route">
<router-link to="/">主页</router-link>
</li>
<li class="route">
<!--<router-link to="/course">课程页</router-link>-->
<router-link :to="{name:'course'}">课程页</router-link>
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
name: "Nav",
methods:{
goHome(){
// console.log('去向主页')
// console.log(this.$router)//控制路由跳转
// console.log(this.$route)//控制路由数据
if (this.$route.path!=='/'){
// this.$router.push('/')//往下再跳转一页
this.$router.push({
name:'home'
});
this.$router.go(2);//go 是历史记录前进后退，正为前进，负为后退，数字为步数
}
}
},
}
</script>
<style scoped>
.nav {
width: 100%;
height: 60px;
background-color: #eee;
}
.content {
width: 1200px;
margin: 0 auto;
/*background-color: red;*/
height: 60px;
}
.content ul li {
float: left;
}
.logo {
padding-top: 10px;
padding-right: 50px;
cursor: pointer;
}
.route {
padding: 15px 10px 0;
}
.route a {
padding-bottom: 5px;
border-bottom: 3px solid transparent;
}
.route a.router-link-exact-active {
color: orange;
border-bottom-color: orange;
}
</style>views/Home.vue
<template>
<div class="home">
<Nav></Nav>
<h1>主页</h1>
<hr>
</div>
</template>
<!--script标签负责组件的js逻辑，j逻辑固定导出（外界才可以导入）-->
<script>
import Nav from '../components/Nav'
export default {
data(){
return {
}
},
methods:{
},
components:{
Nav
}
}
</script>
<!--style标签负责组件的css样式：scoped保证样式的组件化-样式只有在该组件内部起作用-->
<style scoped>
h1 {
color: red;
}
</style>views/Course.vue
<template>
<div class="course">
<Nav></Nav>
<h1>课程页</h1>
</div>
</template>
<script>
import Nav from '../components/Nav'
export default {
name: "Course",
components:{
Nav
}
}
</script>
<style scoped>
</style>路由重定向
router/index.js
{
path: '/home',
redirect: '/',//路由的重定向
},组件的生命周期钩子
views/Course.vue
export default {
name: "Course",
data() {
return {
courses: [],
}
},
components: {
Nav
},
beforeCreate() {
console.log('Course组件要创建了')
},
created() {//重要方法：在该钩子中完成后台数据的请求
console.log('Course组件创建成功了');
//前后台开发时，是从后台请求数据
this.courses = [
{
id: 1,
title: '西游记',
// img: 'http://...', // 实际是后台图片链接
img: require('@/assets/img/001.jpg'), // 前台逻辑中加载静态资源采用require
},
{
id: 3,
title: '西厢记',
// img: 'http://...', // 实际是后台图片链接
img: require('@/assets/img/002.jpg'), // 前台逻辑中加载静态资源采用require
},
]
},
mounted(){//特别耗时的数据请求，可以延后到组件初步加载公告后，再慢慢请求
console.log('Home组件加载完成')
},
destroy()
{
console.log('Course组件销毁成功')
}
}路由的两种传参
router/index.js
{
// 第一种路由传参
// path: '/course/detail',
//第二种路由传参
path:'/course/:pk/detail',
name: 'course-detail',
component: CourseDetail
},components/CourseTag
<template>
<div class="course-tag">
<img :src="course.img" alt="" @click="goDetail(course.id)">
<!--第一种路由参数-->
<!--<router-link :to="`/course/detail?pk=${course.id}`">{{ course.title }}</router-link>-->
<!--<router-link :to="{-->
<!--name:'course-detail',-->
<!--query:{ pk:course.id }-->
<!--}">{{ course.title }}</router-link>-->
<!--第二次路由传参-->
<router-link :to="`/course/${course.id}/detail`">{{ course.title }}</router-link>
</div>
</template>
<script>
export default {
name: "CourseTag",
props:['course'],
methods:{
goDetail(pk){
// this.$router.push(`/course/detail?pk=${pk}`);
this.$router.push({
name:'course-detail',
query:{pk:pk}
})
}
}
}
</script>views/CourseDetail
<template>
<div class="course-detail">
<button @click="$router.go(-1)">返回课程主页</button>
<hr>
<h>第{{ pk }}个课程的详情</h>
</div>
</template>
<script>
export default {
name: "CourseDetail",
data(){
return {
pk:0
}
},
created() {
//获取路由传递的参数：课程的id
// console.log(this.$route)
// console.log(this.$route.query.pk)
this.pk=this.$route.query.pk||this.$route.params.pk
}
}
</script>今日总结
"""
1、创建项目：vue create 项目名 - babel、vue-router、vuex
2、项目目录：
node_modules依赖(不同电脑依赖需要重新构建)
views：页面组件
components：小组件
router/index.js：路由配置文件 - 路径与页面组件对应关系
App.vue：根组件，固定五行话(看代码)
main.js：项目总脚本文件 - 配置所有环境，加载根组件
3、vue请求生命周期：
浏览器请求/user => router插件映射User.vue组件 => User.vue组件替换App.vue中的<router-view />占位符
注： i) 可以用 <router-link to="/user">用户页</router-link>完成标签跳转
ii) this.$router.push('/user')完成逻辑跳转
4、vue组件的生命周期钩子：组件 创建 到 销毁 中的时间节点回调的方法
created(){} | mounted(){}
5、路由跳转
this.$router.push({name: '路由名', query: {拼接的参数}})
this.$router.go(number)
6、路由配置
{
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
7、js类的原型：类属性
8、配置全局css样式
import '@/assets/css/global.css'
require('@/assets/css/global.css');
路由知识点概况：
1）路由配置：router/index.js
2）路由跳转与路由渲染：router-link、router-view、$router.push、$router.go
3）路由传参：两种传参
"""