01-路由传值:
当我们进行路由跳转时，时常是需要带一些参数过去的
main.js文件:
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
// 导入子组件
import one from './components/one.vue'
import two from './components/two.vue'
// 1.安装导入路由插件vue-router
import VueRouter from 'vue-router'
// 2.全局注册
Vue.use(VueRouter);
// 解决在one页面还点one页面的报错(百度找)
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err)
}
// 3.实例化与配置
const router = new VueRouter({
routes: [{
path: '/',
component: one
},
{
path: '/one',
component: one
},
{
path: '/two',
component: two
}
]
});
// 4.挂载到new Vue
// 5.路由出口
new Vue({
render: h => h(App),
router
// router:router,前面是固定写死的必要要是router,后面的一个router是实例化那个
}).$mount('#app')
App.vue(主组件):
<template>
<div>
<!-- 传值 -->
<button @click="gotoView('/one?id=22')">点我进入one页面</button>
<button @click="gotoView2">点我进入two页面</button>
<!-- 5.路由出口 -->
<router-view></router-view>
</div>
</template>
<script>
export default {
methods: {
// 路由传值有两种方式:
// 1.第一种传值:直接拼接在url上,在路由后面写 ,例如这里'/one?id=22'
gotoView(str) {
// 这句代码就是说去到/#/one?id=2这个路由的组件(页面)去
this.$router.push(str);
// 解决在one页面又点one页面的报错方法,这种方法要每个跳转路由的都去这样写很麻烦
// 可以直接写在main.js里面(百度找)
// this.$router.push(str).catch((err)=>{
// return err
// });
},
// 2.第二种传值:配置传值,通过query
gotoView2() {
this.$router.push({
path: "/two",
query: {
userName: "tangyali"
}
});
}
}
};
// 传过去的值怎么接收呢?在路由页面this.$route.query.传值键
</script>
<style>
</style>
one.vue(主子组件):
<template>
<div>我是one页面</div>
</template>
<script>
export default {
name: "one",
data() {
return {
msg: "我是one页面"
};
},
created() {
console.log(this.$route.query.id);//22
}
};
</script>
<style>
</style>
two.vue(子组件):
<template>
<div>我是two页面</div>
</template>
<script>
export default {
name: "two",
data() {
return {
msg: "我是two页面"
};
},
created() {
console.log(this.$route.query.userName);//tangyali
}
};
</script>
<style>
</style>
效果说明: 点击不同的button进入不同的路由,不同的路由分别展示不同的组件,
可以通过路由后面传值给不同的组件
传参有两种:
1：配制写法
this. $ router.push({
path:“路径xxx”,
query:{
//这里的query就好比在url上串了一些参;数，类似于接口get请求传参
userName:“xxx”
}
})
2：路径拼接写法，类似于get请求
this.$router.push(“路径?userName=xxx”),
接受传递的参数:(是在路由跳转到xxx组件后，在xxx组件里面接收):
this. $ route.query.name
//这里就可以收到this.$router.push传递过来的参数了 ,在相应组件接收参数
02-filter过滤器:
有的时候，有些数据没法直接拿来用，就需要对这些数据进行加工处理，过滤器就是用来做这个功能的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>filter过滤器</title>
</head>
<body>
<!--
过滤器的基本使用:
使用场景:给他一个或者多个值(通过参数给),他会加工返回一个新的值
定义在filters:{}里面,本质就是一个function,return回来的一个值
function 过滤器名字(参数名){
return 值;
}
使用它:{{参数名 | 过滤器方法名}}
它目前只能用在插值语法和v-bind里面
他不能使用this
计算属性:
使用场景: 依赖一个或者多个值产生一个新的值,依赖的值发生了改变,计算属性的值也会改变
他是可以使用this的.
定义在computed:{}里面
本质也是一个函数,直接当做属性来使用.
-->
<div id='app'>
{{arr | fileterArr}}
<!-- 用filter过滤器处理完之后,页面上就是过滤之后的:波波&清理 -->
<p>{{computeArr}}</p>
<!-- 用computed属性 把arr数组处理之后的,页面上就是处理之后的:波波❤清理-->
</div>
<script src='./vue.js'></script>
<script>
var app = new Vue({
el: '#app',
data: {
arr: [{ name: '波波', age: 19 }, { name: '清理', age: 19 }]
},
// 过滤器们都写在这里
filters: {
//写一个过滤器
// fileterArr(arr) {
// // 把arr的里面每一项的名字取出来返回
// let arrNew = []
// for(let i = 0;i < arr.length;i++) {
// arrNew.push(arr[i].name)
// }
// return arrNew.join('❤')
// },
fileterArr(arr) {
let arrNew = arr.map((item) => {
return item.name
})
return arrNew.join('&')
}
},
// 计算属性们都写在这里
computed: {
computeArr(){
let arrNew = this.arr.map((item)=>{
return item.name;
});
return arrNew.join('❤')
}
},
});
</script>
</body>
</html>
效果说明:
-
全局过滤器 （ 全局过滤器定义后，所有组件都可使用）
-
定义（在main.js中做全局定义）
-
//value是过滤器的要过滤的值，这里return的值就是最终过滤器的值 Vue.filter("过滤器名字",function(value){ return 返回值 })
-
-
使用
-
//这里的value就是过滤器方法里面的参数，也就是要过滤的值 <div class="time">{{value | 过滤器名字 }}</div>
-
-
-
局部过滤器（只能应用于当前组件）上面那个demo就是用的局部的
-
定义（在自己所在组件里面定义）
-
//上面的value是过滤器的要过滤的值，return的值就是过滤器定义的结果 filters: { 过滤器名字(value) { return 返回值 } }
-
-
使用
-
//这里的value就是过滤器方法里面的参数，也就是要过滤的值 <div class="time">{{value | 过滤器名字 }}</div>
作用: 平时项目中用的较多的，就是对一些字符串加工之类的，如：接口传了你一个时间戳，你需要转换成相应的正常时间格式等。
-
03-watch监听器:
watch：可以侦听某个数据是否发生变化，如果发生变化会立刻调用相关函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>watch监听器</title>
</head>
<!-- watch监听器
作用:监听某个数据,如果这个数据发生了改变,就会立马响应
定义:在watch()中
他的本质也是一个function
他的方法名有一些特殊:a.首先找到你要监听的数据
b.去掉this
c.加一个引号
这个监听器有两个参数:一个是变了之后的新数据,一个是老数据(基本不用)
调用:自动触发,只要监听的数据发生了改变就会触发
-->
<body>
<div id='app'>
<button @click="update">点我变数据</button>
<p>{{num}}</p>
</div>
<script src='./vue.js'></script>
<script>
var app = new Vue({
el: '#app',
data: {
num: 100
},
methods: {
update() {
this.num = Math.random() * 888
},
testsb() {
alert('嘻嘻')
}
},
// 监听器们
watch: {
"num"(newValue, oldValue) {
// console.log(newValue, oldValue); //一个是变了之后的新数据,一个是老数据
// console.log(this.num); //这样也可以拿到新数据
//只要num发生改变就调用这个函数
this.testsb();
}
},
});
</script>
</body>
</html>
效果说明: 只要num发生改变就会被监听到,就会在触发 “数据名”:function(newVal,oldVal){}
04-静默刷新:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>静默刷新</title>
</head>
<!--
无法显示更新后数据的原因
vue无法监控复合型数据的每一项.
解决方法:1.静默刷新
2.$set
-->
<body>
<div id='app'>
<button @click="change">点我变</button>
<ul>
<li v-for="(item, index) in list" :key="index" v-if="isShow">{{item}}</li>
</ul>
</div>
<script src='./vue.js'></script>
<script>
var app = new Vue({
el: '#app',
data: {
isShow: true,
list: [1, 2, 3, 4, 5]
},
methods: {
change() {
// 静默刷新
this.list[1] = Math.random() * 999
this.isShow=false
//这种是定时器在vue中的高级写法
this.$nextTick(()=>{
this.isShow=true
});
// 修改用$set来改
this.$set(this.list,1,Math.random() * 999)
}
}
});
</script>
</body>
</html>
效果说明:
本来点击按钮执行里面的change方法是不会使得该数组list的下标为1的改成随机数的,
因为这个数组是复合型数据,vue无法监控复合型数据的每一项
但是此时又想让这个数组的某一项变化可以使用静默刷新,
先让li用vi-f渲染出来,随后更改数据之后,就不渲染了再利用
this$nextTick( ()=>{
把他又渲染出来,此时数据已经改变,再渲染就是改变之后的数据
) ,
第二种方法就是用 $ set(该数组,要改变的下标,改成什么)
扫一扫
868
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
