vue63-83

指令

指令是对底层dom的封装

指令写法

v-指令名
指令加在哪个标签上，就可以获取那个标签的dom

指令的创建

inserted函数是指令相关的生命周期函数

inserted函数的第一个参数是指令绑定的dom节点，第二个参数是指令的值

update会在指令更新后触发，类似于生命周期的更新函数

指令应用

指令的值可以是对象

指令写法的轮播图

指令补充

指令创建时有简写的方法

可以把第二个参数对象变为一个函数

在指令创建或更新之后都会执行

一些不常用的指令

在vue3中把上面指令的生命周期函数与组件的统一化了，有几个指令没有，像beforecreate等


nextTick的写法，只监听一次

单文件组件

单文件组件的好处

vue-cli的安装与配置

vue脚手架，使用vue-cli来创建项目，一个环境的构建

vue2和3的最低配置安装

启动流程和入口文件

一般项目启动的方式在

运行代码，快速启动代码

压缩代码

修复代码

入口文件

入口模块，重要的js部分

-eslint修复

反向代理和别名

module.exports = {
  // devServer的配置
  devServer: {
    port: 8000,
    open: true,
    // 用于配置反向代理
    proxy: {
      // 代理请求， 匹配所有以/api开头的请求
      '/api': {
        // 目标服务器，所有以/api开头的请求接口代理到目标服务器
        target: 'http://touxxxxxx.itheima.net/',
        // 重写路径，此时用于匹配反向代理的/api可以替换为空
        pathRewrite: { '^/api': '' },
        // 如果代理到HTTPS服务器需要设置secure为true，默认为false
        secure: true
      }
    }
  }
}

spa和路由引入

spa就是单页面应用程序，即一个页面多个组件，切换页面就是切换组件

import VueRouter from 'vue-router'
Vue.use(VueRouter)//注册路由插件
//配置表
const routes = [
{
path:"/film",
component:Films
}
}

嵌套路由

    children: [
      {
        path: '/films/nowplaying',
        component: Nowplaying
      },
      {
        path: '/films/comingsoon',
        component: Comingsoon
      },
      {
        path: '/films',
        redirect: '/films/nowplaying'
      }
    ]

编程式导航

  methods: {
    handleChangePage (id) {
    //   console.log(id)
      // 编程式导航
      //   location.href = '#/detail'
      // /detail/1111
      this.$router.push(`/detail/${id}`)
    }
  }