vue基础备课笔记

1. vue中如何获取dom元素？

1. 定义一个dom节点
<h1 ref='refDom'>hello 你好 vue</h1>
----------------------------------------------------
2. 在mounted生命周期内，确保dom节点已经完全渲染加载完成！
通过this.$refs.refDom来获取dom元素

2. export 导出 以及 import 导入

• 在vue中，如果有一个很多页面都需要用到的公共方法，那么我们就需要将这个方法抽离出去，比如在src目录下新建一个utils/index.js文件，里面写一些公用的工具方法，举个🌰：大家很常见的一个场景，像在某个app、或者某个网站的个人中心，如果绑定了手机号码，我们手机号的中间4位数字是不是隐藏掉的呀，就像这样176****1636，在说一个在实战开发项目中经常用到的一个公共方法，时间格式化方法，后端给我们的返回的时间格式可能是一个时间戳1663588451019，也可能是一个中国标准时间2020-12-16 03:28:36.891 反正没一个我们前端能用的，你让后端改吧，他各种理由，你揍他，又打不过，那怎么办？自食其力呗，我们自己写一个时间格式化方法，是不是就可以搞定呀。

• 下面我们就来一个一个实现

• 先实现隐藏手机号中间4位数字的公共方法

• 在src/utils/index.js内写方法

//export 意思就是把我们定义的一个hidePhone方法暴露出去，外部才可以去使用，不暴露外部无法使用 
export function hidePhone(phone){
  return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
}

• 接下来再来实现一下时间格式化的方法

export function format(dat) {
  //获取年月日，时间
  //获取当前年份
  var year = dat.getFullYear();
  //获取当前月份
  var month = (dat.getMonth() + 1) < 10 ? "0" + (dat.getMonth() + 1) : dat.getMonth() + 1;
  //获取当前日期
  var day = dat.getDate() < 10 ? "0" + (dat.getDate()) : dat.getDate();
  //获取当前小时
  var hour = dat.getHours() < 10 ? "0" + (dat.getHours()) : dat.getHours();
  //获取当前分数
  var min = dat.getMinutes() < 10 ? "0" + (dat.getMinutes()) : dat.getMinutes();
  //获取当前秒数
  var seon = dat.getSeconds() < 10 ? "0" + (dat.getSeconds()) : dat.getSeconds();
  //将各个变量组合起来，并返回值
  var newDate = year + "-" + month + "-" + day + " " + hour + ":" + min + ":" + seon;
  return newDate;
}

• 我们要是想使用我们定义的公共方法，只需要在要使用的页面通过import引入即可！

import { hidephone,format } from '../utils/index';

console.log( hidephone('17601241636'))
--------------------------------------------------------
var date = new Date()
console.log(format(date));

3. 如何定义一个点击事件，如何映射这个事件？

• 点击方法定义使用v-bind:click，简写成@click

• 映射事件在methods函数里，如下

// 定义事件
<button @click="handleClick">点击事件</button>
// 映射事件
methods:{
  handleClick(){
      console.log('触发了点击事件');
  }
}

4. vue中route和router的区别是什么？如何新建页面，如何配置页面路由？

• router是vueRouter的一个对象，通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象，这个对象是一个全局的对象，他包含了所有的路由包含了很多关键的对象和属性和方法

• 比如我们的路由跳转就用到了router对象中的push方法this.$router.push('/test')

• 本质是向history栈中添加一个路由，在我们看来是 【切换路由】，但本质是在添加一个history记录，也就是历史记录；我们可以通过this.$router.go(-1)来回到前一个页面。

• route是一个跳转的路由对象，每一个路由都会有一个route对象，是一个局部的对象，可以获取对应的name、path、params、query、meta等

• 比如我们可以通过this.$route.meta.title 来获取到当前页面的网页标题

• 4.1 如何新建页面？如何配置页面路由？

• 一般新建页面在views目录下，新建组件在components目录下，我们新建页面在views目录下，新建Test.vue。
• 然后在src/router/index.js内新建页面路由

  import Test from "../views/Test.vue";
  // 页面路由的配置
  {
    path: '/test',
    name: 'Test',
    meta:{
      title:"测试页面"
    },
    component: Test
  },

5. 编程式路由跳转、传参、接参！

• 编程式路由跳转 实际上就是 this.$router.push('/')

• 如果要进行路由传参，有两种方式

• 第一种，通过query方式传参

this.$router.push({
    path:'/',
    query:{
     id:1,
     name:'张宇'
   }
 })

• 接收参数 使用this.$route.query.xx来接收参数，xx是key值

• 第二种，通过params方式传参数，注意，这种方式，只能通过name来跳转，在注意，这种也叫命名式路由跳转

this.$router.push({
    name:'Home',
    params:{
      id:100,
      name:'钟宏雄'
    }
  })

• 接收参数 使用this.$route.params.xx来接收参数，xx是key值

6. vue的计算属性

    <h2>数量：{{num}}</h2>
    <h2>单价：{{price}}</h2>
    <h2>总计：{{total}}</h2>
    <button @click="num++">+1</button>
--------------------------------------------------------------
data() {
    return {
      num:5,
      price:10
    };
  },
--------------------------------------------------------------
computed:{
// 如果要实现一个这样的需求，比如 当数量大于10的时候 我们的单价变成5 
// 怎么实现？找个同学来试一下
    total(){
      return this.num*this.price
    }
  }