小白学vue第四天,从入门到放弃(vue指令的使用加高阶函数)
v-on修饰符的使用
.stop 阻止事件冒泡
调用 stopPropagation()
.prevent 阻止默认事件
调用 event.preventDefault()
.keyCode 键盘事件
.once 只触发一次
————————————
v-model.lazy 懒加载 配合v-model使用:
回车或者失去焦点才会更新
v-model.number 输入框的数字类型为number
v-model.trim 去除输入内容的空格
v-if、v-else-if、v-else使用
在简单的情况 可以直接是使用 v-if
其他情况的话还是使用computed计算属性 比较好 有逻辑性 写起来方便
v-show
v-if直接删除dom元素
v-show 只是 添加了一个display:none
v-for
v-for = “item,index,key) in info”
在使用v-for最好在元素和组件上添加一个:key属性
key的作用高效的更新虚拟dom key最好绑定 item 保证唯一性 有重复就绑index
数组遍历渲染:在 abcde中在c后面加一个f
补充知识:在数组中间添加一个元素 用 splice(x,y,z)x从第几个开始 y 删除几个元素 z 添加元素
原先 没有效率
但是绑定了key 就没有那么麻烦,实现了性能的优化,给每个节点做了一个唯一标识,直接和以前的对比有什么不一样的然后直接插入 ,这个是Vue的虚拟dom的diff算法
数组元素操作 实现响应式
可以实现数据响应式
push()最后添加元素
pop()删除最后一个元素
shit() 删除第一个元素
unshift()最前面添加元素
splice() 删除元素、插入、替换
sort () 冒泡排序
resverse() 翻转
Vue内部函数修改数组:
Vue.set(array,idnex,"")
注意:但是直接通过索引来修改数据不是响应式的
高阶函数
<script>
高阶函数
let newNum = []
let nums = [1, 2, 3, 45, 56, 7]
// filter-----------------------
newNum = nums.filter(function (n) {
return n < 40
})
// map-----------------------
newNum = nums.map(function (n) {
return n * 2
})
// reduce-----------------------
newNum = nums.reduce(function (preValue, n) {
return preValue + n
preValue 就是一次遍历的结果相当于上一次 preValue + n
}, 0) 0是preValue 初始化值
console.log(newNum); </script>
//for ----------------------------
小白学vue第四天,从入门到放弃(vue指令的使用加高阶函数)的更多相关文章
- 一天带你入门到放弃vue.js(三)
自定义指令 在上面学习了自定义组件接下来看一下自定义指令 自己新建的标签赋予特殊功能的是组件,而指定是在标签上使用类似于属性,以v-name开头,v-on,v-if...是系统指令! v-是表示这是v ...
- 一天带你入门到放弃vue.js(一)
写在前面的话! 每个新的框架入手都会进行一些列的扯犊子!这里不多说那么多!简简单单说一下vue吧! Vue.js是目前三大框架(angular,vue,react)之一,是渐进式js框架,据说是摒弃了 ...
- 一天带你入门到放弃vue.js(二)
接下来我们继续学习一天带你入门到放弃系列vue.js(二),如有问题请留言讨论! v-if index.html <div id="app"> <p v-if=& ...
- webpack 配置 Vue 多页应用 —— 从入门到放弃
webpack 配置 Vue 多页应用 -- 从入门到放弃 一直以来,前端享有无需配置,一个浏览器足矣的优势,直到一大堆构建工具的出现,其中 webpack 就是其中最复杂的一个,因此出现了一个新兴职 ...
- Vue(四):实例化第一个Vue应用
实例化语法 var vm = new Vue({ // 选项 }) Vue 构造器中的内容 <!DOCTYPE html> <html> <head> <me ...
- 小白学Linux(四)--系统常用命令
这里记录一下基础的系统常用命令,都是日常可能用到的,需要记住的一些命令.主要分为5个模块:关于时间,输出/查看,关机/重启,压缩归档和查找. 时间: date :查看设置当前系统时间,dat ...
- 小白学Python(8)——pyecharts 入门
简介: pyecharts 是一个用于生成 Echarts 图表的类库. echarts 是百度开源的一个数据可视化 JS 库,主要用于数据可视化.pyecharts 是一个用于生成 Echarts ...
- 自学vue第二天,从入门到放弃(生命周期的理解)
生命周期的理解 beforeCreate 创建前 数据还没有监听,没有绑定到vue对象实例,同时也没有挂载对象 没有数据也没有方法 created 在创建后 数据和方法已经 data数据已经绑定好了 ...
- VUE的学习_从入门到放弃(一)
一.vue的功能及作用 工作方式如下 1.不用操作DOM 2.单页面应用web项目 简称:SPA 3.当下各种新框架都采用的类似Vue或者类似React的语法去作为主语法,微信小程序/MpVue... ...
随机推荐
- MATLAB导入txt和excel文件技巧汇总:批量导入、单个导入
在使用MATLAB的时候,想必各位一定会遇到导入数据的问题.如果需要导入的数据其数据量巨大的话,那么在MATLAB编辑器中将这些数据复制粘贴进来,显然会在编辑器中占据巨大的篇幅,这是不明智的. 一般来 ...
- Kubernetes使用节点亲缘性将POD调度到特定节点上
节点污点可以用来让pod远离特定的节点,尽量在不修改已有pod信息的前提,通过在节点添加污点信息,来拒绝pod在某些节点上的部署. 而现在介绍一种叫做节点亲缘性,通过明确的在pod中添加的信息,来决定 ...
- Python分析【公众号】历史评论,看看大家的留言情况!
大家好,我是辰哥~~~ 辰哥玩公众号有一段时间了,这期文章分析一波读者的留言情况,不仅可以对公众号的各位铁粉一目了然,还可以通过分析的结果对公众号的经营进行更好的规划.如读者留言的内容通常是内容是什么 ...
- Spring:Spring项目多接口实现类报错找不到指定类
spring可以通过applicationContext.xml进行配置接口实现类 applicationContext.xml中可以添加如下配置: 在application.properties中添 ...
- 《PHP扩展学习系列》系列分享专栏
<PHP扩展学习系列>系列分享专栏 <PHP扩展学习系列>已整理成PDF文档,点击可直接下载至本地查阅https://www.webfalse.com/read/20177 ...
- webpack(11)配置文件分离为开发配置、生成配置和基础配置
前言 上篇我们已经配置好了本地开发服务器,但是配置的相对比较凌乱,一个文件中有些是开发时用到的配置,有些是生成时用到的配置,有些是开发和生成都要用到的配置,所以我们这里把环境分为3个环境 webpac ...
- Formily教程 | formily是中后台复杂场景的表单解决方案
前言 formily 不是一个简单的前端轮子.Formily 是一个由阿里巴巴集团多 BU 共建的面向中后台复杂场景的表单解决方案,它也是一个表单框架.它的前身是供应链平台在 2019 年初对外开源的 ...
- Vue3 + Cesium + Typescript 集成搭建的快速启动模板(包含示例数据)
开门见山 项目地址:https://github.com/tanghaojie/vue3-cesium-typescript-start-up-template 好用的话给个star呗,有更新可以第一 ...
- mysql Authentication plugin 'caching_sha2_password' is not supported问题处理
使用mysql8.0版本,登录失败,提示 Authentication plugin 'caching_sha2_password' is not supported. 原因是在MySQL 8.0以后 ...
- Flask(11)- 操作 Cookie
前言 Cookie 详解:https://www.cnblogs.com/poloyy/p/12513247.html 这一节来瞧一瞧如何用 Flask 操作 Cookie 接下来就是 实战栗子!!! ...