vue的一些细节

 

 

注意区别

//鼠标滚轮事件
@wheel = "demo"

demo()

注意执行顺序,用户滚动鼠标滚轮,触发事件执行demo()函数,函数执行完毕后,页面滚动条滚动
所以,当demo()函数操作量很大时,就会出现页面卡顿,滚动条不移动的问题

解决方法:passive事件修饰符:可以让事件默认行为立即执行,无需等待回调函数完毕

//滚动条事件
@scroll
滚动条则先执行滚动再执行回调

 

键盘事件

//keydown

//keyup

两者区别在于,前者按下键盘按键后就触发事件,后者按下再松开后触发事件

 

取得触发事件元素对象的值

event.target.value

 

vue对于常用按键的别名//在按键事件后添加别名

@keyup.enter/tab/ = "showname()"

对于其余按键,则可以用对应按键编码操作
keycode 例如 Enter == 13


//输出按键名/按键编码
console.log(e.key,e.keycode);

//对于组合单词按键
要用-分隔单词

 

 

vue默认data:{} 中的key都是data的属性,计算属性computed同理

 

 

计算属性

//计算属性的属性Key也会被挂载到vue实例上,和data类似有数据代理
computed : {
　fullname:{
  //将需求的属性写成对象,用get()  ,set() 定义它的读写
  //get被调用的时机? 1.初次读取对应值时(初始化) 2.所依赖的数据发生变化时
  //计算属性会使用缓存,数据不发生变化时就只会调用一次,相比于methods节约了内存  
  　　get(){
    console.log("get被调用了");
    return "小猪佩奇"
  // vue中get()的this指向是当前的vm实例,所以可以用this.属性来直接调用data中的数据    
　　　　　　}  
　　　　}
}

 

区别 v-html 和 v-text 指令

(1)应用区别

<div v-html = 'str'><div>
// v-html能够识别HTML标签,显示值
<div v-text = 'str'><div>
//v-text不区分变量中包含的HTML标签,不会显示

data:{
   name:'安全性问题',
   str:'<h1>变量的值包含HTML标签结构</h1>'
}

(2)安全性问题

v-html可能会导致xss攻击,盗取用户数据(cookie)

 

props/data/computed/methods 的属性不能有重名,因为都会挂载到实例上

 

只添加一次新属性的写法