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

总结:

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/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;
    }

使用小组件：

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

五、总结

生命周期
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使用
@ 符号
路由表规则
页面<a>标签
链接重定向
v-for循环产生多个标签
页面跳转实现
图片静态文件渲染
组件生命周期钩子函数
1. 一个组件会在页面中渲染，也会销毁存放到内存中不在页面渲染(从一个页面跳转到另一个页面则销毁)，就是一个组件的加载和销毁组件
2. 从加载一个组件到销毁一个组件，整个的生命周期中勋在很多特殊的时间节点（组件要创建了，创建成功了,要加载了,加载成功了，要更新数据了,数据更新完毕了,组件要销毁了,销毁成功了）,这些特殊的时间节点,vue都提供了对应的回调方法,来辅助完成这些时间节点完成的业务逻辑
3. 生命周期钩子函数书写的位置:钩子函数直接作为vue实例的成员
4. 注意：钩子函数的书写位置,，每个钩子节点钩子函数的特性都在那个时间段触发

Vue å®ä¾çå½å¨æ

posted @ 2019-11-17 14:52 RandySun 阅读(414) 评论(0) 编辑收藏举报

刷新页面返回顶部

RandySun

有角度，才会有方向在当下的阶段，必将由程序员来主导，甚至比以往更甚

Vue 项目中应用

Vue使用

一、vue生命周期

二、.vue文件说明

三、 vue使用

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

五、总结

公告

RandySun

有角度，才会有方向 在当下的阶段，必将由程序员来主导，甚至比以往更甚

Vue 项目中应用

Vue使用

一、vue生命周期

二、.vue文件说明

三、 vue使用

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

五、总结

公告

有角度，才会有方向在当下的阶段，必将由程序员来主导，甚至比以往更甚