day68 vue项目

复习

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 {
         100%;
        height: 60px;
        background-color: #eee;
    }
    .content {
         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

/**  生命周期钩子
         * 1）一个组件从创建到销毁的众多时间节点回调的方法
         * 2）这些方法都是vue组件实例的成员
         * 3）生命周期钩子的作用就是满足在不同时间节点需要完成的事
         */
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
                },
            ]
        },
    beforeMount() {
            console.log('Home组件准备加载')
        },
        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）路由传参：两种传参
"""