全球访问量top100网站,浏览器直接进入网站,华为公司网站建设受众是,做流量网站挂广告还能挣钱吗● vue是单⻚⾯应⽤程序
● 什么是路由
○ 后端路由
■ 对于普通的⽹站#xff0c;所有的超链接都是URL地址#xff0c;所有的URL地址都对应服务器上对应的资源
○ 前端路由
■ 对于单⻚⾯应⽤程序来说#xff0c;主要通过URL中的hash ( # 号) 来实现不同⻚⾯之间的切换…● 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 vueexport default defineComponent({name: fiterView,data() {return {msg: 你游戏玩的真好太厉害了}},
// 私有过滤器 data 和methods平级filters:{setMsg2(data,format){console.log(data)console.log(format)}}})
/scripttemplatediv
!-- {{msg}}--div/div
!-- {{msg | setMsg(666) | setMsg1(88)}}--div/div{{msg | setMsg2(111111)}}/div
/templatestyle scoped langless/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 redel.style.color binding.value},// 渲染成功之后inserted(el){console.log(el)// el.focus()},// 更新update(el){console.log(el)}
})script
import {defineComponent} from vueexport 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()}}}
})
/scripttemplatedivdirectivediv v-colorred这是盒子/divdiv v-colorcolor这是盒子111/divinput typetext v-colorinput typetext v-color v-modelvaluediv v-color1{{ value }}11111111111/divinput typetext v-color1/div
/templatestyle scoped langless/style
