Vue基础路由,链式编程
事件修饰符:
1 @click.stop 阻止事件冒泡(需要阻止那个标签的冒泡就将修饰符加到该标签的事件中)
2 @click.prevent 阻止事件默认行为
3 @click.capture 事件捕获模式
4 @click.shef 只有事件是通过自身被触发是调用事件处理函数(冒泡跟捕获都不会触发该事件)
5 @click.native 如果绑定事件的标签不是原生HTML是第三方组件,打多数情况下事件绑定不成功,这时候需要加native就可以绑定了
6. @click.once 绑定的事件只能触发一次
键盘修饰符:
1 .自定义修饰符
v-show跟v-if的区别:
v-show显示隐藏 (频繁使用用v-show)
v-if 删除跟构建 (使用比较少的情况下)
v-model数据双向绑定 原理
实现原理:当模型中的数据发生变化页面中的数据也会发生变化,视图中跟模型中的数据相互影响
1 模型中的数据改变了怎么去控制视图的更新:
关键点在于什么时候知道模型中的数据会被修改,此时就要使用数据劫持(object.defineProperty)通过这个方法可以监听到对象身上数据值得变化 defineProperty(三个参数)第一个对象,第二个需要定义的属性,第三个为{
set表示当给属性赋值时会触发
get当获取属性的时候触发
Vue实例data中定义的所有属性都是通过object.definProperty进行绑定到对象身上的,以后只要data中数据发送变化,必然会走对应的set方法,在set方法内部可以通知页面中所有有用到了这个属性 对应属性的dom,将dom的数据进行更新.这个过程就是数据劫持
视图中的数据修改怎么更新模型?
监听表单元素的change事件,在change事件中将用户输入的最新数据赋值给这个模型
scoped作用原理 ,
Vue路由传参
query传参 (传参不需要修改路由规则)
1 在跳转路由时使用查询字符串的方式将参数进行拼接
2 在跳转到的组件中使用this. r o u t e . q u e r y . i d 获 取 参 数 p a r a m s 传 参 ( 需 要 修 改 路 由 规 则 ) 1 修 改 对 应 的 路 由 规 则 , 使 用 : i d 用 于 标 识 参 数 2 在 跳 转 中 使 用 / 实 参 的 方 式 将 参 数 进 行 拼 接 3 在 跳 转 到 的 组 件 中 使 用 t h i s . route.query.id获取参数 params传参(需要修改路由规则) 1 修改对应的路由规则,使用:id用于标识参数 2 在跳转中使用/实参的方式 将参数进行拼接 3 在跳转到的组件中使用this. route.query.id获取参数params传参(需要修改路由规则)1修改对应的路由规则,使用:id用于标识参数2在跳转中使用/实参的方式将参数进行拼接3在跳转到的组件中使用this.route.params.id获取参数
编程式导航:
在web开发中,跳转页面有两种方式一种通过标签跳转,一种是可以通过js方式跳转,
跳转路由的时候用router
获取参数的时候用route
$router代表的是当前项目中集成的整个路由实例对象,就是new router创建出来的实例,不同的组件中访问都是同一个对象
$route 代表的是路由实例中routes数组中的每一个对象,不同组件中访问对应的对象也不同(当前组件对应的路由各不同)
第一种使用:this. r o u t e r . p u s h ( ′ 路 由 路 径 ′ ) 第 二 种 : t h i s . router.push('路由路径') 第二种:this. router.push(′路由路径′)第二种:this.router.push({name:‘路由规则对象中那么的值’,parmas:{参数名称:参数值}})
第三种:this. r o u t e r . p u s h ( p a t h : " 路 由 路 径 " ) 如 果 有 参 数 , 之 间 拼 上 第 四 种 : t h i s . router.push({path:"路由路径"}) 如果有参数,之间拼上 第四种:this. router.push(path:"路由路径")如果有参数,之间拼上第四种:this.router.push({path:‘路径’,query:{参数名称:参数值}}) (此时要修改路由规则)
如果希望在跳转路由时浏览器地址栏不出现参数如果做?
使用命名路由(就是给路由中加个name属性)的方式跳转,路由规则中不要要添加/:id
路由重定向:
path:’/’,
redirect:’/home’
{
path:’*’//除了自己所写到的路由,其他路径跳转的页面
redirect:‘让跳转的页面’
}