vue脚手架，路由，过滤器，自定义指令

● 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>

自定义指令

参数：

1. 指令的名字（定义的时候不加v-,使用vue指令的时候加上v-）
2. 对象，里面包含三个钩子方法
   ● bind 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
   ● inserted 这个元素已经渲染到界面上之后执行
   ● update 当元素有更新的时候执行
3. 这三个方法的参数有哪些
   ● 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>