Vue学习日记3

scoped样式冲突

• 默认写在组件中的样式会全局生效，容易造成多个组件之间样式冲突的问题
• 在style中加上scoped属性，即可只作用于当前组件，避免样式冲突
• 原理
  • 给当前组件模板的所有元素添加一个自定义属性data-v-hash值，以此区分不同组件
  • css选择器后面被自动添加上了属性选择器

data是一个函数

• 一个组件的data选项必须是一个函数，这可以保证每个组件实例，维护独立的一份数据对象
• 每次创建新的组件实例，都会得到一个新的对象（函数是公用的，数据是独立的）

.sync修饰符

• 作用：实现子组件和父组件的双向绑定，简化代码
• 特点：prop属性名，可以自定义，非固定为value
• 场景：封装弹框类的基础组件，visible属性
  • 
• 本质：是:属性名和@update:属性名合写

ref和$ref

• 作用：利用ref和$ref可以用于获取dom元素或组件实例
• 特点：查找范围是当前组件内，更加精确稳定
• 步骤
  • 获取dom
    • 目标标签-添加ref属性

      • <div ref="chartRef">我是渲染图表的容器</div>

    • 恰当时机，通过this.$ref.xxx获取目标标签

      • mounted(){
            console.log(this.$ref.chartRef)
        }

  •  获取组件实例
    • 目标组件-添加ref属性
    • 恰当时机，通过this.$ref.xxx获取目标组件实例

Vue异步更新，$nextTick

• 需求：编辑标题，编辑框自动聚焦
  • 1.点击编辑，立刻获取焦点

    • this.isShowEdit=true
      this.$refs.inp.focus()
      //！！！不能成功，因为Vue是异步更新DOM

$nextTick

• 等DOM更新后，才会触发执行此方法里的函数体
• 语法：this.nextTick(函数体)

路由

路由模块封装

• 好处：拆分模块，利于维护
• 步骤：新建router/index.js文件，将相关程序写入文件，导入main.js
• Vue中绝对路径：@可以代表当前src目录的绝对路径

导航高亮

• vue-router提供了一个全局组件router-link(取代a标签)
• 能跳转，配置to属性指定路径（必须），本质还是a标签
• 能高亮，默认会提供高亮类名，可以直接设置高亮样式
• 两个高亮类名
  • router-link-exact-active
    • 精确匹配
  • router-link-active
    • 模糊匹配
• 高亮类名太长了，希望定制

  • const router=new VueRouter({
        router:[...],
        linkActiveClass:"类名1",
        linkExactActiveClass:"类名2",
    })

声明式导航-跳转传参

• 目标：在跳转路由时，进行传值
• 1.查询参数传参
  • 传参：to="/path?参数名=值"
  • 获取参数：$route.query.参数名
    • 在created()中，需要多写一个this.
• 2.动态路由传参
  • 配置动态路由
    • path:'./search/:words'
  • 配置导航链接
    • to="path/参数"
  • 对应页面组件接受传递过来的值
    • $route.params.参数名
• 查询参数传参适合传多个参数，动态路由传参适合单个参数（需要先配路由）
• /search/:words标识必须要传参数，可以加可选符?，比如/search/:words?，表示当前参数是可选的

路由重定向

• 问题：网页打开，url默认是/路径未匹配到组件时，会出现空白
• 重定向：匹配path后，强制跳转path路径
• 语法
  • {path:匹配路径,redirect:重定向到的路径}，
• 404
  • 配置在路由最后
  • {path:'*',component:NotFound}

模式设置mode

• 路由的路径看起来不自然，有#，能否切成真正路径形式
• hash路由（默认）
  • http://localhost:8080/#/home
• history路由（常用）
  • http://localhost:8080/home（以后上线需要服务器支持）
  • mode:history（需要在后端配置，否则可能出现页面空白的情况）
  • nginx服务器配置（nginx部署vue项目，规则和跨域调用都在nginx配置文件加）

编程式导航

点击按钮跳转

• 用JS代码来进行跳转
• 1.path路径跳转（简单方便）

  • this.$router.push('路由路径')
    //另一种语法
    this.$router.push({
        path:'路由路径'
    })

• 2.通过name命名路由进行跳转（适合path路径长的场景）

  • this.$router.push{(
        name:'路由名称'
    )}

路由传参

• 两种传参方式：查询参数+动态路由传参（$route.params.参数名）
•