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
}
}
网友评论