五、Vue项目
一、项目环境搭载及创建
1. 软件及模块
a. node
用c++编写，用来运行js代码
b. npm/cnpm
终端应用商城
c. vue
用来搭建vue前端项目
2. 安装及下载
a. 安装node
官网下载安装包
b. 安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
c. 安装vue项目脚手架
cnpm install -g @vue/cli
p.s.
b或c终端安装失败时，可以清空npm缓存，再重复执行失败的步骤。
npm cache clean --force
3. Vue项目创建
a. 命令行创建
1. 进入存放项目的目录
>: cd ***
2. 创建项目
>: vue create 项目名
3. 项目初始化
推荐选择Babel, Router, Vuex, Linter
b. pycharm配置vue项目
1. app.vue只留下5行代码
2. 路由中只留下home
3. assets中创建css、js、img文件夹
4. 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;
}
5. main.js中加载global.css
require('@/assets/css/global.css');
二、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（项目入口）
1. 启动时功能
a. 完成vue环境加载
b. 完成组件渲染
c. 加载vue-router、vuex等环境
d. 加载自定义环境
2. 模板
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')
3. 改写
import Vue from 'vue' // 加载vue环境
import App from './App.vue' // 加载根组件
import router from './router' // 加载路由环境
import store from './store' // 加载数据仓库环境
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
store,
render: function (readFn) {
return readFn(App);
},
});
四、路由跳转
1. 标签跳转
<div class="content">
<ul>
<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>
2. 逻辑跳转
export default {
name: "Nav",
methods: {
goHome() {
// 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是历史记录前进后退，正为前进，负为后退，数字为步数
}
}
}
五、路由传参
1. 传参方式总结
配置 跳转 获取
path:'/user' to="/user?pk=1" $route.query.pk
path:'/user/:pk' to="/user/1" $route.params.pk
2. 传参方式一（course/detail?pk=1）
a. router
{
path:'/course/detail',
name:'course-detail',
component:CourseDetail
},
b. CourseTag
<template>
<div class="course-tag">
<img :src="course.img" alt="" @click="goDetail(course.id)">
<h2>{{ course.title }}</h2>
</div>
</template>
<script>
export default {
name: "CourseTag",
props: ['course'],
methods: {
goDetail(pk) {
this.$router.push(`'/course/detail?pk=${pk}'`)
}
}
}
</script>
c. CourseDetail
<template>
<div class="course-tag">
<img :src="course.img" alt="" @click="goDetail(course.id)">
<router-link :to="{
name: 'course-detail',
query: {pk: course.id}
}">{{ course.title }}</router-link>
</div>
</template>
<script>
export default {
name: "CourseTag",
props: ['course'],
methods: {
goDetail(pk) {
console.log(pk);
// this.$router.push(`/course/detail?pk=${pk}`);
this.$router.push({
name: 'course-detail',
query: {pk: pk}
});
}
}
}
</script>
3. 传参方式二（/course/1/detail）
a. router
{
path:'/course/:pk/detail',
name:'course-detail',
component:CourseDetail
},
b. CourseTag
<template>
<div class="course-tag">
<img :src="course.img" alt="" @click="goDetail(course.id)">
<router-link :to="`/course/${course.id}/detail`">{{ course.title }}</router-link>
</div>
</template>
<script>
export default {
name: "CourseTag",
props: ['course'],
methods: {
goDetail(pk) {
console.log(pk);
// this.$router.push(`/course/detail?pk=${pk}`);
this.$router.push({
name: 'course-detail',
query: {pk: pk}
});
}
}
}
</script>
c. CourseDetail
<template>
<div class="course-detail">
<button @click="$router.go(-1)">返回课程主页</button>
<hr>
<h2>第{{ pk }}个课程</h2>
</div>
</template>
<script>
export default {
name: "CourseDetail",
data() {
return {pk: 0}
},
created() {
this.pk = this.$route.query.pk || this.$route.params.pk;
}
}
</script>
六、vue组件（.vue文件）
1. 标签及作用
a. template
有且只有一个根标签。
b. script
必须将组件对象导出，export default{}。
c. style
style标签明确scoped属性，代表该样式只在组件内部起作用。
2. 导航栏组件示例
<template>
<div class="nav">
<ul>
<li>
<router-link to="/">主 页</router-link>
</li>
<li>
<router-link to="/car">汽 车</router-link>
</li>
</ul>
</div>
</template>
<script>
export default {
name: "Nav.vue"
}
</script>
<style scoped>
.nav {
height: 60px;
background-color: #eee;
}
.nav li {
float: left;
padding: 15px 20px 0;
}
.nav a {
border-bottom: 3px solid transparent;
padding-bottom: 2px;
}
.nav a.router-link-exact-active {
color: orange;
border-bottom-color: orange;
}
</style>
3. 简单home组件示例
<template>
<div class="home">
<Nav></Nav>
<h1>
<span @click="goCarPage">欢迎来到汽车系统</span>
</h1>
</div>
</template>
<script>
import Nav from '../components/Nav'
export default {
components: {
Nav
},
data() {
return {}
},
methods: {
goCarPage() {
if (this.$route.path !== '/car') {
this.$router.push('/car')
}
}
},
}
</script>
<style scoped>
h1 {
text-align: center;
margin-top: 160px;
}
h1 span {
cursor: pointer;
font-weight: bold;
font-size: 60px;
}
</style>
七、vue请求生命周期
1. 浏览器请求/user。
2. router插件映射User.vue组件。
3. User.vue组件替换App.vue中的<router-view />占位符。
八、组件生命周期钩子
1. 定义
组件从创建到销毁中的时间节点回调的方法
2. 钩子种类
<script>
import Nav from '../components/Nav'
export default {
data(){
return {
back_data: ''
}
},
methods: {},
components: {
Nav,
},
beforeCreate() {
console.log('Home组件要创建了');
console.log(this.back_data);
},
created() { // 重要方法：在该钩子中完成后台数据的请求
console.log('Home组件创建成功了');
console.log(this.back_data);
},
beforeMount() {
console.log('Home组件准备加载')
},
mounted() { // 特别耗时的数据请求，可以延后到组件初步加载成功后，再慢慢请求
console.log('Home组件加载完成')
},
destroyed() {
console.log('Home组件销毁成功了')
}
}
</script>
