Vue 项目中应用

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(文件夹)
	页面组件

总结:

1. main.js是vue项目的入口文件，在main.js中加载vue、router(路由)、store(仓库)等配置以及加载自定义配置的js、css,第三方js、css

2. 在项目中只有一个根组件，在index.html中有一个全局的挂载点，渲染的组件会在App.vue中加载，App.vue中提供视图占位符，渲染App.vue,渲染的结果挂载到index.html中的挂载点，在页面显示(项目显示的就是App.vue组件中的占位符对应的组件)

3. 渲染页面：使用App.vue中组件占位符实现页面组件的渲染

4. Vue服务器根据浏览器发送的url连接请求,首先进入router(路由)组件根据路径映射匹配到的组件，然后去渲染组件，将映射的组件去替换App.vue中设置的页面组件占位符，最终页面显示匹配的组件

   eg： 请求路径 /user ===> 首先渲染组件User.vue===>替换App.vue中的<router-view/>
   

二、.vue文件说明

1. vue文件就是一个组件: html、css、js
2. html标签由template标签提供:有且只有一个根标签
3. CSS由style标签管理: style标签添加scope属性,保证样式只在该组件内部其作用（样式组件化）
4. Js由script标签管理: 内部书写的就是组件new Vue({})中在{}编写的语法,但是需要导出export default

三、 vue使用

1.@ 符号

@:代表 /src 也就是src项目绝对路径, @src,src可以省略，eg:'@/views/User'=>src/views/user

2.路由表规则

# 注册页面组件，与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;
    }

使用小组件：

1. 首先导入组件
   • import Nav from '../components/Nav' ，其中Nav名字可以随意
2. 注册小组件，components
3. 使用组件 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.页面跳转实现

1. 直接使用router-link标签，写入要跳转的路径

    <router-link to="/book/detail/">{{ book.title }}</router-link>
   

2. 通过点击事件实现页面跳转,路由逻辑跳转

   <h2 @click="goDetail">{{ book.title }}</h2>
   methods:{
         goDetail(){
   		# 路由逻辑跳转(push历史记录的跳转)
             this.$router.push('/book/detail')
         }
   }
   

3. 根据router路由中的name跳转

   <h2 @click="goDetail">{{ book.title }}</h2>
   methods:{
         goDetail(){
   		# 路由逻辑跳转(push历史记录的跳转)
             this.$router.push(
                       {
                           name: 'book-detail',
                           params: {pk: id} // 携带参数
                       }
                   )
         }
   }
   

4. go跳转

   // go的参数是正负整数，代表历史记录前进或后退几步
   this.$router.go(-1);  // go(2)
   

5. 有名分组

   # 有名分组
   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');

四、组件生命周期钩子函数

组件生命周期钩子函数

1. 一个组件会在页面中渲染，也会销毁存放到内存中不在页面渲染(从一个页面跳转到另一个页面则销毁)，就是一个组件的加载和销毁组件
2. 从加载一个组件到销毁一个组件，整个的生命周期中勋在很多特殊的时间节点（组件要创建了，创建成功了,要加载了,加载成功了，要更新数据了,数据更新完毕了,组件要销毁了,销毁成功了）,这些特殊的时间节点,vue都提供了对应的回调方法,来辅助完成这些时间节点完成的业务逻辑
3. 生命周期钩子函数书写的位置:钩子函数直接作为vue实例的成员
4. 注意：钩子函数的书写位置,，每个钩子节点钩子函数的特性都在那个时间段触发

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 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

五、总结

1. 生命周期

   1. main.js是vue项目的入口文件，在main.js中加载vue、router(路由)、store(仓库)等配置以及加载自定义配置的js、css,第三方js、css

   2. 在项目中只有一个根组件，在index.html中有一个全局的挂载点，渲染的组件会在App.vue中加载，App.vue中提供视图占位符，渲染App.vue,渲染的结果挂载到index.html中的挂载点，在页面显示(项目显示的就是App.vue组件中的占位符对应的组件)

   3. 渲染页面：使用App.vue中组件占位符实现页面组件的渲染

   4. Vue服务器根据浏览器发送的url连接请求,首先进入router(路由)组件根据路径映射匹配到的组件，然后去渲染组件，将映射的组件去替换App.vue中设置的页面组件占位符，最终页面显示匹配的组件

      eg： 请求路径 /user ===> 首先渲染组件User.vue===>替换App.vue中的<router-view/>
      

2. .vue文件说明

   1. vue文件就是一个组件: html、css、js
   2. html标签由template标签提供:有且只有一个根标签
   3. CSS由style标签管理: style标签添加scope属性,保证样式只在该组件内部其作用（样式组件化）
   4. Js由script标签管理: 内部书写的就是组件new Vue({})中在{}编写的语法,但是需要导出export default

3. vue使用

4. @ 符号

5. 路由表规则

6. 页面<a>标签

7. 链接重定向

8. v-for循环产生多个标签

9. 页面跳转实现

10. 图片静态文件渲染

11. 组件生命周期钩子函数

    1. 一个组件会在页面中渲染，也会销毁存放到内存中不在页面渲染(从一个页面跳转到另一个页面则销毁)，就是一个组件的加载和销毁组件
    2. 从加载一个组件到销毁一个组件，整个的生命周期中勋在很多特殊的时间节点（组件要创建了，创建成功了,要加载了,加载成功了，要更新数据了,数据更新完毕了,组件要销毁了,销毁成功了）,这些特殊的时间节点,vue都提供了对应的回调方法,来辅助完成这些时间节点完成的业务逻辑
    3. 生命周期钩子函数书写的位置:钩子函数直接作为vue实例的成员
    4. 注意：钩子函数的书写位置,，每个钩子节点钩子函数的特性都在那个时间段触发