● vue是单⻚⾯应⽤程序
● 什么是路由
○ 后端路由
■ 对于普通的⽹站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源
○ 前端路由
■ 对于单⻚⾯应⽤程序来说，主要通过URL中的hash ( # 号) 来实现不同⻚⾯之间的切换。
● vue create 项⽬名字（不能有中⽂）
● 使⽤路由
○ 引⼊路由
○ 创建路由实例
○ 创建映射关系（路由对象）
○ 挂载到vue实例上
○ 预留展示区域
● 路由跳转
○ <router-link to='跳转的路径'></router-link>
过滤器 管道符 |
什么是过滤器？
常用于文本格式化
用途
插值表达式
v-bind表达式
使用
{ {变量 | 过滤器的名字}
全局过滤器
Vue.filter(‘过滤器的名字’，function(data:管道符前面的变量，format:传递过来的参数){ return })
私有过滤器
filters：{ 过滤器的名字(){} }
//main.js文件
// 过滤器 全局
// 第一个参数 过滤器名字 第二个参数 callback 回调函数
// 你游戏玩的真好，太厉害了
Vue.filter('setMsg', function (data, format) {
console.log(data) // 管道符前面的变量
console.log(format) // 传递过来的参数
return data.replace('厉害', '**').replace('真好','**')
})
Vue.filter('setMsg1', function (data, format) {
console.log(data) // 管道符前面的变量
console.log(format) // 传递过来的参数
return data
})
<script>
import {
defineComponent} from 'vue'
export default defineComponent({
name: "fiterView",
data() {
return {
msg: '你游戏玩的真好，太厉害了'
}
},
// 私有过滤器 data 和methods平级
filters:{
setMsg2(data,format){
console.log(data)
console.log(format)
}
}
})
</script>
<template>
<div>
<!-- {
{
msg}}-->
<div></div>
<!-- {
{
msg | setMsg(666) | setMsg1(88)}}-->
<div></div>
{
{
msg | setMsg2(111111)}}
</div>
</template>
<style scoped lang="less">
</style>
自定义指令
参数：
- 指令的名字（定义的时候不加v-,使用vue指令的时候加上v-）
- 对象，里面包含三个钩子方法
● bind 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
● inserted 这个元素已经渲染到界面上之后执行
● update 当元素有更新的时候执行- 这三个方法的参数有哪些
● el：指令所绑定的元素，可以用来直接操作 DOM 。
● binding：一个对象，包含以下属性：
○ name：指令名，不包括 v- 前缀。
○ value：指令的绑定值，例如：v-my-directive=“1 + 1” 中，绑定值为 2。
● oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated钩子中可用。无论值是否改变都可用。
// main.js文件
// 全局 自定义指令
// 第一个参数 自定义指令的名字 第二个参数 对象
Vue.directive('color',{
// 初始化的时候执行 只会执行一次 dom元素还没有渲染到页面上
bind(el,binding){
console.log(el) // 当前元素
console.log(binding)
// el.style.color = 'red'
el.style.color = binding.value
},
// 渲染成功之后
inserted(el){
console.log(el)
// el.focus()
},
// 更新
update(el){
console.log(el)
}
})
<script>
import {
defineComponent} from 'vue'
export default defineComponent({
name: "directiveView",
data() {
return {
color: 'green',
value: ''
}
},
//私有 自定义指令 data和methods平级
directives: {
// 第一种写法 color1为指令名字
// color1(el,binding){
// console.log(el)
// console.log(binding)
// el.focus()
// }
// 第二种写法 color1为指令名字
color1: {
inserted(el) {
el.focus()
}
}
}
})
</script>
<template>
<div>
directive
<div v-color="'red'">这是盒子</div>
<div v-color="color">这是盒子111</div>
<input type="text" v-color>
<input type="text" v-color v-model="value">
<div v-color1>{
{
value }}11111111111</div>
<input type="text" v-color1>
</div>
</template>
<style scoped lang="less">
</style>
