vue学习-进阶

1、VUE相关指令

• v-bind:class=“user” : vue属性绑定 ，v-bind: 指令可以缩写为 : 符号

• v-model=“userName” : vue属性绑定

• v-if=“boolean” : 指令的表达式返回 true 时才会显示

  一般用于弹框的显示与关闭

• v-for : 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。使用elementui后用处不是很大

• vue变量

  用var命令声明的变量，是在全局范围内有效的,且变量可以先使用再进行声明，针对其中的问题，vue中不推荐使用var 而是提供了let和const

  let: es6新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。
  const:一个只读的常量。一旦声明，常量的值就不能改变
  

• computed : 计算属性在处理一些复杂逻辑时，比如一个字段需要依赖另一个字段并进行处理得到的（例如年龄需要依赖出生日期来计算），methods中使用方法也能达到相同的效果，但是computed的性能更好，它是基于依赖项的变化才会进行变化
  

• watch : Vue3 监听属性 我们可以通过 watch 来响应数据的变化,如果监听的对象内部属性变化则使用deep：true

  1、数据变化时执行异步或开销较大的操作时

  2、1父多子组件每一个子组件都用父组件的数据，同时子修改父数据，子修改后能确保所有子都能获取到新的数据 则所有子组件可以使用watch来监听数据。

  watch和computed区别

• vue事件相关指令 : 我们可以使用 v-on 指令来监听 DOM 事件，v-on 指令可以缩写为 @ 符号。

  # 单击事件
  <a v-on:click="doThis"></a>
  <a @click="doThis"></a>
  <!-- 阻止单击事件冒泡 -->
  <a v-on:click.stop="doThis"></a>
  <!-- 提交事件不再重载页面 -->
  <form v-on:submit.prevent="onSubmit"></form>
  <!-- 修饰符可以串联  -->
  <a v-on:click.stop.prevent="doThat"></a>
  <!-- 只有修饰符 -->
  <form v-on:submit.prevent></form>
  <!-- 添加事件侦听器时使用事件捕获模式 -->
  <div v-on:click.capture="doThis">...</div>
  <!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
  <div v-on:click.self="doThat">...</div>
  <!-- click 事件只能点击一次 -->
  <a v-on:click.once="doThis"></a>
  
  # onchange事件
  <a v-on:change="doThis"></a>
  <a @change="doThis"></a>
  

2、VUE路由

路由中有三个基本的概念 route, routes, router。

1. route:它是一条路由，指代一个具体的路由页面

2. routes: 是一组路由，把上面的每一条路由组合起来，形成一个数组。

3. router: 是一个机制，相当于一个管理者，它来管理路由。

路由方式	功能	原理
router-link	支持用户在具有路由功能的应用中 (点击) 导航	就是渲染出一个元素(默认为a),触发该元素上的事件会产生路由跳转
编程方式	编码的形式跳转	上述两种方式最终都是通过push()进行路由跳转的

最终都需要使用router-view去进行选择匹配后的渲染呈现.

2.1、router-link用法

​ 组件支持用户在具有路由功能的应用中（点击）导航。 通过 to 属性指定目标地址，默认渲染成带有正确链接的。作用类似于a标签

属性	作用
to (类型: string | Location)	表示目标路由的链接。当被点击后，内部会立刻把 to 的值传到 router.push()或者router.replace()
tag	vue路由被渲染成什么类型的html标签 默认渲染为 标签
replace	设置 replace 属性的话，当点击时，会调用 router.replace() 而不是 router.push()，于是导航后不会留下 history 记录
event	触发路由跳转的事件 默认为click
append	设置 append 属性后，则在当前（相对）路径前添加基路径。例如，我们从 /a 导航到一个相对路径 b，如果没有配置 append，则路径为 /b，如果配了，则为 /a/b
exact	严格匹配 路径完成匹配成功才进行跳转。

参考例子：

2.2、编程式的导航

除了使用 <router-link> 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。

方法	作用
router.push(location)	跳转到location对应目标路由。这个方法同时会向 history 栈添加一个新的记录
router.replace(location）	跟 router.push 类似但是它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。
router.go(n)	这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步 正数前进 负数后退

2.3、hash模式和History模式

​ Vue-router 中hash模式和history模式的关系 在vue的路由配置中有mode选项 最直观的区别就是在url中 hash 带了一个很丑的 # 而history是没有#的

• hash —— 即地址栏 URL 中的 # 符号（此 hash 不是密码学里的散列运算）。比如这个 URL：www.abc.com/#/hello的值为 #/hello。它的特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。

• history —— 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定浏览器支持）这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求。

2.4、路由守卫

​ 主要用于在每次路由跳转过程中通过钩子函数去动态的改变导航行为，可以用来进行验证 用户登录与否权限控制。

全局, 单个路由独享, 组件级

每个守卫方法接收三个参数：

• to: Route: 即将要进入的目标 路由对象
• from: Route: 当前导航正要离开的路由
• next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
  • next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。
  • next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。
  • next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向 next 传递任意位置对象，且允许设置诸如 replace: true、name: 'home' 之类的选项以及任何用在 router-link 的 to prop 或 router.push 中的选项。
  • next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。

2.4.1、全局

​ 1. router.beforeEach 注册一个全局前置守卫，进入路由之前

2. router.beforeResolve 注册一个全局守卫。这和 router.beforeEach 类似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。

3. router.afterEach 全局后置钩子 进入路由之后

2.4.2、路由独享

router.beforeEnter注册一个路由独享的前置守卫，与一个全局前置守卫类似

2.4.3、组件路由

 beforeRouteEnter(to, from, next) {
   
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  },
  beforeRouteUpdate(to, from, next) {
   
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave(to, from, next) {
   
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }

2.5、路由其他用法

2.5.1、嵌套路由

在真是开发场景中，嵌套路由多用于多级菜单栏的展示，他的用法如下：

 //#嵌套路由
    {
   
      path: '/nesting',
      name: 'nesting',
      component: nesting,
      children:[
        {
   
          // 当 /nesting/home2 匹配成功，
          // home2 会被渲染在 nesting 的 <router-view> 中
          path: 'home2',
          component: home2
        },
        {
   
          // 当 /nesting/studentManager 匹配成功，
          // StudentManager 会被渲染在 nesting 的 <router-view> 中
          path: 'studentManager',
          component: StudentManager
        },
      ]
    },

http://localhost:8083/#/nesting

2.5.2、路由重定向