Vue2基础篇02

 1 v-bind

- 作用：让标签的属性变为动态。

1.1 基本用法

- 语法
  <标签 v-bind:id="表达式" v-bind:class="表达式" v-bind:属性名="表达式" ></标签>
  
  // 简写
  <标签 :id="表达式" :class="表达式" :属性名="表达式" ></标签>
  <标签 :style="{width: '20px', height: '30px'}" ></标签>
  ```

1.2 绑定style

<标签 :style="styleObjet" ></标签>

export default {
 data() {
     return {
         styleObjet: {width: '20px', height: '30px'}
     }
 }
}
       ```

 1.3 绑定class
<标签 class="classA" :class="{ classB: 表达式1, classC: 表达式2 }" ></标签>

// 说明：
/*
   如果表达式的值是true 就有这个类名，否则， 就没有这个类名
*/
```

 2 其他三个指令

- v-pre:  不编译Mustach表达式。
- v-once： 只会渲染一次，之后数据改变，不会重新渲染。
- v-cloak： 等数据回来再显示，不直接显示{{ xxx }} 【现在正常开发 没有这个问题】

 3 过滤器【掌握】

- 作用： 处理数据的格式。

- 用法：
  <template>
    <div>{{ message | 过滤器函数名 }}</div>    
  </template>
  
  export default {
      components: {},
      data() { return {} },
      methods: {},
      computed: {},
      // 过滤器
      filters: {
          过滤器函数名(val) {
              return 过滤结果
          }
      }
  }
  ```

 4 侦听器watch【掌握】

- 作用： 主要用于`暗中观察`数据的变化，如果数据变化，就会触发它的回调函数，我们就可以在回调中==搞点事情==。

- 语法：
  // 一般写法
  watch: {
      要观察的数据(newVal, oldVal) {
          // 如果观察的数据，发生改变，就会触发这个回调函数。
          // 函数中，可以获取到 newVal: 新的值【变化后的值】， oldVal： 旧的值【原来的值】
      }
  }
  
  // 如果对象嵌套太深，可能观察不到【 深度侦听 】
  watch: {
      要观察的数据: {
          handler(newVal, oldVal) {
              // 如果观察的数据，发生改变，就会触发这个回调函数。
              // 函数中，可以获取到 newVal: 新的值【变化后的值】， oldVal： 旧的值【原来的值】
          },
          deep: true // 深度观察
      }
  }
  ```

  

 5 Vue的生命周期

- 介绍：Vue的组件从初始化创建，到组件销毁。整个生命周期过程中，有==8== 个函数【生命周期的`钩子函数`】

  - 生命周期钩子`函数`：

  - 创建前后【1】

    - `beforeCreate`

      vue的实例创建之前，data中的属性都还没有初始化【不存在】。

    - ==`created`==

      vue的实例创建之后，data的属性已经有了，可以操作了。这个阶段==适合发送ajax==，初始化数据。

      这个阶段template还没有被编译为真正的DOM节点，所以不能操作DOM

  - 挂载前后【2】

    - `beforeMount`

      template模板已经编译完成，但是还是虚拟的dom，存在于内存中，没有挂载到页面。还是不能操作DOM

    - ==`mounted`==

      挂载完成，一般需要操作DOM,就在这个阶段， 主要用于==操作dom==。

  - 更新前后【3】

    - `beforeUpdate`

      用于获取更新之前的dom内容

    - `updated`

      用于获取更新之后的dom内容

  - 销毁前后【4】

    - `beforeDestroy`
    - `destroyed`

 6 路由vue-router

- 作用：做页面的跳转 【基于 `onhashchange`】。

### 6.1 安装

- 创建项目，多选择一个路由 Router

- 基本结构：

  /**
   * 路由配置
   * created by 小貂蝉 on 2020-09-06
   */
  
  import Vue from 'vue' // 引入vue
  import Router from 'vue-router' // 引入路由
  Vue.use(Router) // 注册一下路由 
  
  
  const routes = [
    // 路由的配置
    { path: '路径1', component: 组件1 },
    { path: '路径2', component: 组件2 },
    { path: '路径3', component: 组件3 },
  ]
  
  
  const router = new Router({
    routes
  })
  
  export default router
  
  ```

 6.2 使用步骤

- 建【1】     创建页面级别的组件

- 配 【2】    配置路由，配置路径`path` 和 组件` component` 的 一一对应关系

- 测试 【3】 测试是否生效

  `注意`： 一定要预留 ==路由出口== ：  组件要渲染出来的位置。

        ```javascript

  <router-view /> 或 <router-view></router-view> 
        ```

 6.3 路由跳转
<router-link to="要跳转的路径"></router-link>  // 最终这个路由自带的组件，会被渲染成a标签。

 6.4 嵌套路由
// 路由的配置
const routes = [
  { 
      path: '/home', 
      component: Home,
      children: [
          { path: '/home/路径1', component: 儿子组件1 },
          { path: '/home/路径2', component: 儿子组件2 },
      ]
  },
  { path: '/my', component: My },
  { path: '/friend', component: Friend },
]

 6.5 两个对象

- $route:    路由信息对象，主要用于获取一些路由信息
  - path  获取路径
  - query  获取query方式的参数
  - params   获取params方式的参数
- $router:   路由实例对象，相当于 new Router(), 主要有跳转方法
  - push()   跳转
  - go(-1)    返回