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>

自定义指令

参数：

指令的名字（定义的时候不加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>