js原型补充
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
}
})
</script>
<script>
function A() {}
let a1 = new A();
let a2 = new A();
// 为A类添加原型 => 类似于类属性
A.prototype.num = 100;
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项目生命周期(重点)
1, 启动项目,加载主脚本文件 main.js
加载vue环境, 创建根组件完成渲染
加载系统已有的第三方环境: router,store
加载自定义的第三方环境与自己配置的环境: 后期项目不断添加
2, router被加载, 就会解析router文件夹下的index.js 脚本文件,完成 路由-组件 的映射关系
3, 新建视图组件 . vue(在views文件夹中) 在路由中配置(在router的index.js中), 设置路由跳转(在导航栏组件中Nav.vue)
配置自定义全局样式
配置全局样式: @就代表src文件夹的绝对路径, 官方提供require加载静态文件
// import '@/assets/css/global.css'
reuqire('@assets/css/global.css')
路由逻辑跳转(重点)
<script>
export default {
name:"Nav",
methods: {
goHome() {
//console.log(this.$router); //控制路由跳转
//console.log(this.$route); //控制路由数据
if (this.$route.path !=='/') {
//this.$router.push('/'); // 往下再跳转一页
//this.$rouoter.go(2); //go是历史记录前进后退,正数是前进,负数是后退
}
}
}
}
</script>
组件的生命周期钩子
1, 一个组件从创建到销毁的众多时间节点回调的方法
2, 这些方法都是vue组件实例的成员
3, 生命周期钩子的作用就是满足在不同的时间节点做需要完成的事
<script>
import Nav from '../components/Nav'
export default {
data() {
return {}
},
methods: {}
components: {
Nav,
},
beforeCreate() {
console.log('Home组件要创建了')
}
creaeted() { // 重要方法: 在该钩子中完成后台数据的请求
console.log('Home组件创建成功了')
}
beforeMount() {
console.log('Home组件准备加载')
}
mounted() { // 特别耗时的数据请求, 可以延后到组件初步加载成功后,再慢慢请求
console.log('Home组件加载完成')
}
destroyed() {
console.log('Home组件要销毁了')
}
</script>
路由配置
{
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
路由传参
第一种
<!--vue文件中-->
<router-link :"`/course/detail?pk=${course.id}`">{{ course.title }}</router-link>
<router-link :to="{
name: 'course-detail',
query: {pk: course.id}
}">{{ course.title }}
</router-link>
js路由配置
{
path: '/course/detail',
name: 'course-detail',
component: CourseDetail
}
第二种
<router-link :to="`/course/${course.id}/detail`">{{ course.title }}</router-link>
js路由配置
{
path: '/course/:pk/:uid/detail',
name: 'course-detail',
component: CourseDetail
}
总结:
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）路由传参：两种传参
"""