事件修饰符:
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:‘让跳转的页面’
}