vue.js-基础回顾

Vue.js基础回顾

1）vue.js 基础结构

2）vue.js 生命周期

3）vue.js 语法和概念

• 差值表达式
• 指令
• 计算属性和侦听器
• Class 和 Style 绑定
• 条件渲染、列表渲染
• 表单输入绑定
• 组件
• 插槽
• 插件（vue-router, vuex)
• 混入 mixin
• 深入响应式原理
• 不同构件版本的 Vue

Vue-Router 基础回顾

1) Vue-Router 基础回顾

1. 创建视图组件
2. 注册路由插件  
import VueRouter from 'vue-router'
Vue.use(VueRouter)
3. 创建路由对象，配置规则
4. 通过 router-view 设置占位
5. 通过 router-link 创建连接

• $route 路由规则
• $router 路由对象，一些信息（mode) 和 方法 （push, go)

2）动态路由

// router/index.js
{
    path: '/detail/:id',
    name: 'Detail',
    // 开启 props，会把 URL 中的参数传递给组件
    // 在组件中通过 props 来接收 URL 参数
    props: true,
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "detail" */ '../views/Detail.vue')
  }

// Detail.vue
<template>
  <div>
    <!-- 方式1： 通过当前路由规则，获取数据 -->
    通过当前路由规则获取：{{ $route.params.id }}

    <br>
    <!-- 方式2：路由规则中开启 props 传参 -->
    通过开启 props 获取：{{ id }}
  </div>
</template>

<script>
export default {
  name: 'Detail',
  props: ['id']
}
</script>

3) 嵌套路由

// router/index.js
// 嵌套路由
  {
    path: '/',
    component: Layout,
    children: [
      {
        name: 'index',
        path: '',
        component: Index
      },
      {
        name: 'detail',
        path: 'detail/:id',
        props: true,
        component: () => import('@/views/Detail.vue')
      }
    ]
  }

4) 编程式导航

• this.$router.push({ name: 'Detail', params: { id: 1 } })
• this.$router.replace('/login')
• this.$router.go(-2)

5）Hash 和 History 模式区别（客户端路由实现方式）

• Hash

  • 基于锚点，以及 onhashchange 事件

• History

  • 基于 HTML5 中的 History API
    • history.pushState() // IE10 以后才支持
    • history.replaceState()
  • 使用
    • 需要服务器的支持
    • 单页应用中，服务端不存在 http:// www.testurl.com/login 这样的地址会返回找不到该页面
    • 在服务端应该除了静态资源都返回单页应用的 index.html
  • node.js 配置

  // 导入处理 history 模式的模块
  const history = require('connect-history-api-fallback')
  // 注册处理 history 模式的中间件
  app.use(history())
  

  • nginx 配置

  // nginx.conf
  
  location / {
              root   html;
              index  index.html index.htm;
              try_files $uri $uri/ /index.html;
          }