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.$route.query.id获取参数params传参(需要修改路由规则)1修改对应的路由规则,使用:id用于标识参数2在跳转中使用/实参的方式将参数进行拼接3在跳转到的组件中使用this.$route.params.id获取参数

编程式导航:
在web开发中,跳转页面有两种方式一种通过标签跳转,一种是可以通过js方式跳转,

跳转路由的时候用router
获取参数的时候用route

$router代表的是当前项目中集成的整个路由实例对象,就是new router创建出来的实例,不同的组件中访问都是同一个对象

$route 代表的是路由实例中routes数组中的每一个对象,不同组件中访问对应的对象也不同(当前组件对应的路由各不同)

第一种使用:this.$router.push{(}^{\prime }路由路{径}^{\prime })第二种:this.$router.push({name:‘路由规则对象中那么的值’,parmas:{参数名称:参数值}})
第三种:this.$router.push(path:"路由路径")如果有参数,之间拼上第四种:this.$router.push({path:‘路径’,query:{参数名称:参数值}}) (此时要修改路由规则)

如果希望在跳转路由时浏览器地址栏不出现参数如果做?
使用命名路由(就是给路由中加个name属性)的方式跳转,路由规则中不要要添加/:id

路由重定向:
path:’/’,
redirect:’/home’

{
path:’*’//除了自己所写到的路由,其他路径跳转的页面
redirect:‘让跳转的页面’

}