注意区别

//鼠标滚轮事件
@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)应用区别

1 <div v-html = 'str'><div>
2 // v-html能够识别HTML标签,显示值
3 <div v-text = 'str'><div>
4 //v-text不区分变量中包含的HTML标签,不会显示
5
6 data:{
7 name:'安全性问题',
8 str:'<h1>变量的值包含HTML标签结构</h1>'
9 }

(2)安全性问题

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

vue的一些细节的更多相关文章

  1. Vue : props 使用细节(父组件传递数据给子组件)

    props使用细节 在Vue.js中我们可以使用 props 实现父组件传递数据给子组件,下面我们总结一下props的使用细节 1.基础类型检查 2.必填数据 3.默认值 4.自定义验证函数 其中每一 ...

  2. vue组件使用细节

    ref 当ref写在一个标签元素中,通过this.$refs.name 获取的是标签对应的dom元素 <section id="app" ref="froggy&q ...

  3. vue踩坑--细节决定成败

    1.错误示例 . 2.错误的地方 3.修改后代码 4.错误分析

  4. Vue.js 和 MVVM 小细节

    MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...

  5. Vue.js 和 MVVM 的小细节

    Vue.js 和 MVVM 的小细节 转载 作者:流云诸葛 链接:www.cnblogs.com/lyzg/p/6067766.html MVVM 是Model-View-ViewModel 的缩写, ...

  6. Vue.js与MVVM

    MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...

  7. vue和mvvm的一些小区别

    Vue.js 和 MVVM 小细节   MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这 ...

  8. 使用mpvue开发小程序教程(四)

    在上一章节中,我们将vue-cli命令行工具生成的代码骨架中的src目录清理了一遍,然后从头开始配置和编写了一个可以运行的小程序页面,算是正真走上了使用mpvue开发小程序的第一步.今天我们将进一步来 ...

  9. MVVM模式理解

    MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...

随机推荐

  1. Codeforces 1461F - Mathematical Expression(分类讨论+找性质+dp)

    现场 1 小时 44 分钟过掉此题,祭之 大力分类讨论. 如果 \(|s|=1\),那么显然所有位置都只能填上这个字符,因为你只能这么填. scanf("%d",&n);m ...

  2. Codeforces 715E - Complete the Permutations(第一类斯特林数)

    Codeforces 题面传送门 & 洛谷题面传送门 神仙题.在 AC 此题之前,此题已经在我的任务计划中躺了 5 个月的灰了. 首先考虑这个最短距离是什么东西,有点常识的人(大雾)应该知道, ...

  3. CUDA计算矩阵相乘

    1.最简单的 kernel 函数 __global__ void MatrixMulKernel( float* Md, float* Nd, float* Pd, int Width) { int ...

  4. Linux—su命令和su -命令的差别(切换登录账号)

    1.普通用户切换到root用户,命令su或su - 本人以前一直习惯直接使用root,很少使用su,前几天才发现su与su -命令是有着本质区别的! 大部分Linux发行版的默认账户是普通用户,而更改 ...

  5. MicrosoftPowerBI—2019-nCov 新型冠状病毒肺炎多功能动态看板

    https://app.powerbi.cn/view?r=eyJrIjoiNmE0ZDU0MGItOTFjYy00MWYyLWFmZjMtMThkM2EwMzg5YjgyIiwidCI6ImQxNj ...

  6. Mysql-多个left join 计算逻辑

    单个left join: (1)一对一:结果表的行数=左表行数 (2)一对多:结果表的行数>左表行数 多个left join: (0)多个left join由上到下,依次生成查询表,原理同单个l ...

  7. EXCEL-批量修改列宽

    WPS:先用鼠标选中一列,然后,长按ctrl键并且用鼠标选中剩余想要统一列宽的列,松开ctrl键,鼠标落在刚选中的任意一列的抬头上,鼠标右键,选择列宽,设置统一列宽即可.

  8. Redis篇:单线程I/O模型

    关注公众号,一起交流,微信搜一搜: 潜行前行 redis 单线程 I/O 多路复用模型 纯内存访问,所有数据都在内存中,所有的运算都是内存级别的运算,内存响应时间的时间为纳秒级别.因此 redis 进 ...

  9. WebRTC本地分享屏幕,录制屏幕

    WebRTC有分享屏幕的功能.使用的是getDisplayMedia方法.用户同意分享屏幕后,可以拿到视频流. 再结合MediaRecorder和Blob,把视频流数据存下来,就能得到录制屏幕的视频. ...

  10. 巩固javaweb的第十九天

    巩固内容: 使用 form 元素 使用 form 元素封装要提交的信息 要向服务器提交信息,需要使用 form 元素,所有要提交的信息都应该在 form 内部.在 注册界面中,所有要输入的信息都位于 ...