Vue使用
一、vue生命周期
# 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({
el: '#app',
router,
store,
"render: function (readFn) {
return readFn(App);
},
})
# App.vue
<template>
<div id="app">
<!--
提供一个视图组件占位符,占位符被views下的视图组件替换,
浏览器就显示页面就是哪一个组件
-->
<router-view/>
<router-view/>
<router-view/>
</div>
</template>
# router-->index.js
路由脚本文件（配置路由url链接与页面组件的映射关系）
# views(文件夹)
页面组件总结:
main.js是vue项目的入口文件，在main.js中加载vue、router(路由)、store(仓库)等配置以及加载自定义配置的js、css,第三方js、css
在项目中只有一个根组件，在index.html中有一个全局的挂载点，渲染的组件会在App.vue中加载，App.vue中提供视图占位符，渲染App.vue,渲染的结果挂载到index.html中的挂载点，在页面显示(项目显示的就是App.vue组件中的占位符对应的组件)
渲染页面：使用App.vue中组件占位符实现页面组件的渲染
Vue服务器根据浏览器发送的url连接请求,首先进入router(路由)组件根据路径映射匹配到的组件，然后去渲染组件，将映射的组件去替换App.vue中设置的页面组件占位符，最终页面显示匹配的组件
eg： 请求路径 /user ===> 首先渲染组件User.vue===>替换App.vue中的<router-view/>
二、.vue文件说明
- vue文件就是一个组件: html、css、js
- html标签由template标签提供:有且只有一个根标签
- CSS由style标签管理: style标签添加scope属性,保证样式只在该组件内部其作用（样式组件化）
- Js由script标签管理: 内部书写的就是组件new Vue({})中在{}编写的语法,但是需要导出export default
三、 vue使用
1.@ 符号
@:代表 /src 也就是src项目绝对路径, @src,src可以省略，eg:'@/views/User'=>src/views/user2.路由表规则
# 注册页面组件，与url路径形成映射关系
import User from '@/views/User'
const routes = [
{
path: '/user', // url请求链接
name: 'user',
component: User // 对应的组件
}
];3.页面<a>标签
页面跳转不使用a标签使用router-link进行跳转，a标签跳转会页面刷新，而router-link则不会
<router-link to="/user">用户</router-link>
/*router-link渲染的a激活时的状态, 在浏览器中可以看到*/
a.router-link-exact-active {
color: royalblue;
}使用小组件：
- 首先导入组件
- import Nav from '../components/Nav' ，其中Nav名字可以随意
- 注册小组件，components
- 使用组件 template标签中使用<Nav/>
4.链接重定向
在路由层进行配置重定向
const routes = [
{
path: '/',
name: 'home',
component: Home
},
// url映射不存在映射到主页
{
path: '/index',
redirect: '/'
},
];
window.console.log(this.$router); // $router管理路由跳转的
window.console.log(this.$route); // $route管理路由数据的5.v-for循环产生多个标签
<Book v-for="books"></Book>:v-for循环产生多个标签会报错, 因为产生多条数据有可能下面多条数据将上面数据覆盖掉
解决: key的值必须唯一
<!-- key属性是为标签建立缓存的标识，不能重复，且在循环组件下，必须设置 -->
<Book v-for="book in books" :key="book.title" />6.页面跳转实现
直接使用router-link标签，写入要跳转的路径
<router-link to="/book/detail/">{{ book.title }}</router-link>通过点击事件实现页面跳转,路由逻辑跳转
<h2 @click="goDetail">{{ book.title }}</h2> methods:{ goDetail(){ # 路由逻辑跳转(push历史记录的跳转) this.$router.push('/book/detail') } }根据router路由中的name跳转
<h2 @click="goDetail">{{ book.title }}</h2> methods:{ goDetail(){ # 路由逻辑跳转(push历史记录的跳转) this.$router.push( { name: 'book-detail', params: {pk: id} // 携带参数 } ) } }go跳转
// go的参数是正负整数，代表历史记录前进或后退几步 this.$router.go(-1); // go(2)有名分组
# 有名分组 path: '/book/detail/:pk', path: '/book/detail/:pk/:acit', path: '/book/:pk/detail', # 方式一 this.$router.push( { name: 'book-detail', params: {pk: id} } ) # 方式二 this.$router.push(`/book/detail/${id}`) # 方式三 <router-link :to="'/book/detail/'+book.id">{{ book.title }}</router-link> # 方式四 <router-link :to="{name: 'book-detail', params: {pk: book.id}}">{{ book.title }}</router-link> 获取有名分组数据 created() { // 获取跳转到详情页的当前书本id，再根据id获得书本的详细信息 // window.console.log(this.$router); // $router管理路由跳转的 // window.console.log(this.$route); // $route管理路由数据的 let pk = this.$route.params.pk; if (!(pk in books_detail)) { this.$router.go(-1); // 数据不存在，返回 },
7.图片静态文件渲染
# 1. img访问图片路径
<!-- 资源的加载绝对路径才可以访问到资源 -->相对路径则不能访问到资源
<img class="../assets/img/1.jpg" :src="book.img" alt="">
# 2. require
<!-- 前台自己提供的静态资源，在传输后再使用(组件间交互)，要才有require函数来加载资源 -->
let img1 = require('../assets/img/西游记.jpg');四、组件生命周期钩子函数
- 一个组件会在页面中渲染，也会销毁存放到内存中不在页面渲染(从一个页面跳转到另一个页面则销毁)，就是一个组件的加载和销毁组件
- 从加载一个组件到销毁一个组件，整个的生命周期中勋在很多特殊的时间节点（组件要创建了，创建成功了,要加载了,加载成功了，要更新数据了,数据更新完毕了,组件要销毁了,销毁成功了）,这些特殊的时间节点,vue都提供了对应的回调方法,来辅助完成这些时间节点完成的业务逻辑
- 生命周期钩子函数书写的位置:钩子函数直接作为vue实例的成员
- 注意：钩子函数的书写位置,，每个钩子节点钩子函数的特性都在那个时间段触发
export default {
name: "BookDetail",
data() {
return {
num: 10,
book: {}
}
},
// 创建组件获取不到任何数据
beforeCreate() {
window.console.log('该组件要被创建了');
window.console.log(this.num);
},
// 最常用的钩子函数：组件加载后，可以请求后台数据，更新组件数据；组件间路由传参的值获取
created() {
window.console.log('该组件已经创建了');
window.console.log(this.num);
// 获取跳转到详情页的当前书本id，再根据id获得书本的详细信息
// window.console.log(this.$router); // $router管理路由跳转的
// window.console.log(this.$route); // $route管理路由数据的
let pk = this.$route.params.pk;
// window.console.log(pk in {'1': 100, '2': 200});
if (!(pk in books_detail)) {
this.$router.go(-1); // 数据不存在，返回
}
this.book = books_detail[pk];
},
// 当前页面跳转到另一个页面
destroyed() {
window.console.log('该组件已经销毁了')
}
}1.beforeCreate
在实例初始化之后，数据观测（data observer）和 event/watcher 事件配置之前被调用。
2.created
在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测（data observer）、属性和方法的运算、watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
3.beforeMount
在挂载开始之前被调用，相关的 render 函数将首次被调用。
注意：该钩子在服务器端渲染期间不被调用。
4.mounted
el 被新创建的 vm.el替换，并挂载到实例上去之后调用该钩子。如果root实例挂载了一个文档内元素，当mounted被调用时vm.el 也在文档内。页面渲染完成后初始化的处理都可以放在这里。
注意：mounted 不会承诺所有的子组件也都一起被挂载。
5.beforeUpdate
数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
6.updated
由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之。
注意：updated 不会承诺所有的子组件也都一起被重绘。
7.activated
keep-alive 组件激活时调用。
8.deactivated
keep-alive 组件停用时调用。
9.beforeDestroy
实例销毁之前调用。在这一步，实例仍然完全可用。
10.destroyed
Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
五、总结
生命周期
main.js是vue项目的入口文件，在main.js中加载vue、router(路由)、store(仓库)等配置以及加载自定义配置的js、css,第三方js、css
在项目中只有一个根组件，在index.html中有一个全局的挂载点，渲染的组件会在App.vue中加载，App.vue中提供视图占位符，渲染App.vue,渲染的结果挂载到index.html中的挂载点，在页面显示(项目显示的就是App.vue组件中的占位符对应的组件)
渲染页面：使用App.vue中组件占位符实现页面组件的渲染
Vue服务器根据浏览器发送的url连接请求,首先进入router(路由)组件根据路径映射匹配到的组件，然后去渲染组件，将映射的组件去替换App.vue中设置的页面组件占位符，最终页面显示匹配的组件
eg： 请求路径 /user ===> 首先渲染组件User.vue===>替换App.vue中的<router-view/>
.vue文件说明
- vue文件就是一个组件: html、css、js
- html标签由template标签提供:有且只有一个根标签
- CSS由style标签管理: style标签添加scope属性,保证样式只在该组件内部其作用（样式组件化）
- Js由script标签管理: 内部书写的就是组件new Vue({})中在{}编写的语法,但是需要导出export default
vue使用
- @ 符号
- 路由表规则
- 页面<a>标签
- 链接重定向
- v-for循环产生多个标签
- 页面跳转实现
图片静态文件渲染
组件生命周期钩子函数
- 一个组件会在页面中渲染，也会销毁存放到内存中不在页面渲染(从一个页面跳转到另一个页面则销毁)，就是一个组件的加载和销毁组件
- 从加载一个组件到销毁一个组件，整个的生命周期中勋在很多特殊的时间节点（组件要创建了，创建成功了,要加载了,加载成功了，要更新数据了,数据更新完毕了,组件要销毁了,销毁成功了）,这些特殊的时间节点,vue都提供了对应的回调方法,来辅助完成这些时间节点完成的业务逻辑
- 生命周期钩子函数书写的位置:钩子函数直接作为vue实例的成员
- 注意：钩子函数的书写位置,，每个钩子节点钩子函数的特性都在那个时间段触发
