总结Vue第一天~简单介绍、基本知识、辅助函数和js数组的高阶函数
目录
vue中文官网
一、简单介绍：
（1）vue.js ：本质就是一个js 核心类库【跟咱使用的其他组件插件而安装他们】：
■ 安装方式：
（2）小demo了解一下vue.js:
（3）响应式：
二、基本常用的知识：
1、绑定属性 v-bind （简写：）
（1）举例：我们的图片路径、标签的样式、类选择器等等不希望写死，希望实现动态绑定，从vue实例中获取数据：
（2）v-bind绑定class
2，事件监听 v-on （简写 @）：常用的就是监听点击事件【也可以监听自定义事件】
□ 我们可以将事件指向表达式，也可以是一个在methods中定义的函数
□ 事件指向method 带参数问题：
□ v-on修饰符：① .stop ② .prevent ③ .native ④ .once 等
3，v-if、v-else-if、v-else 【v-show】
(1) v-if、v-else-if、v-else
(2) v-show:
（3）v-for 遍历数组、遍历对象：
4，v-model 双向绑定的本质
① v-model：radio
② v-model：checkbox （单个勾选框：v-model即为布尔值。当是多个复选框时，因为可以选中多个，所以对应的data中属性是一个数组）
③v-model：select
■ v-model的修饰符：① lazy ② number ③ trim
5，计算属性 computed
三、❀ 辅助函数和js数组的高阶函数
（1-1）响应式函数 （数组更新检测）
（1-2）对象更新检测
（1-3）js 中数组的高阶函数 map、filter、reduce：
■ filter：过滤（通过回调函数拿到当前数组的每个元素）
■ map：映射 （通过回调函数拿到当前数组的每个元素）
■ reduce：汇总（通过回调函数拿到当前数组的每个元素）
遇到不熟悉的可以先看一下官网，然后再看一下一些别人写的优质博文
vue中文官网
一、简单介绍：
（1）vue.js ：本质就是一个js 核心类库【跟咱使用的其他组件插件而安装他们】：
■ 安装方式：
- CDN引入【也是通过js标签的src】
- 下载引入 【也是通过js标签的src】
- NPM安装管理
■ 方式一：直接CDN引入
□ 你可以选择引入开发环境版本还是生产环境版本
<!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><!-- 生产环境版本，优化了尺寸和速度 --><script src="https://cdn.jsdelivr.net/npm/vue"></script>■ 方式二：下载和引入
开发环境 https://vuejs.org/js/vue.js
生产环境 https://vuejs.org/js/vue.min.js
■ 方式三：NPM安装
后续通过webpack和CLI的使用，我们使用该方式。
❀ 学习过程一开始就是通过下载引入：<script type="text/javascript" src="../js/vue.min.js"></script>（2）小demo了解一下vue.js:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.active{color: goldenrod;}.line{font-style:italic;}</style>
</head>
<body>
<div id="app" >{{message}}
<!-- <button @click="{{message + ''">+文字</button>--><a :class="{'active':isActive,'line':isLine }">没毛病</a><!-- 封装成一个getClass函数 -->
<!-- <div class="tt" :class="getClass()">谢谢</div>-->
<!-- <button @click="btnActive">变变变</button>--><div class="tt" :class="getClass()">哈哈哈</div>
</div>
</body>
<script type="text/javascript" src="../js/vue.min.js"></script>
<script>let app = new Vue({el: '#app',data: {message:'漂亮',isActive: true,isLine: true,active: 'active',line: 'line'},methods: {btnActive: function () {this.isActive = !this.isActive;},//对象// getClass: function () {// return{active: this.isActive, line: this.line}// }//数组getClass: function () {return [this.active, this.line];}}});
</script>
</body>
</html>- 阅读script标签中的代码，会发现创建了一个Vue对象。
- 创建Vue对象的时候，传入了一些options：{}
- {}中包含了el属性：该属性决定了这个Vue对象挂载到哪一个元素上，很明显，我们这里是挂载到了id为app的元素上
- {}中包含了data属性：该属性中通常会存储一些数据
- 这些数据可以是我们直接自定义出来的。
- 也可能是来自网络，从服务器加载的。
（3）响应式：
■ “响应式”，是指当数据改变后，Vue 会通知到使用该数据的代码（例如这里的界面的dom元素）。
■ 效果：就是在界面上可以直观的看见-----数据改变，界面变成使用改变过的数据。
■ 原理：可以看一下官网+优质博文分析
（4）简单了解一下vue的生命周期
二、基本常用的知识：
- 插值操作 {{ }} 将值插入到我们模板的内容当中
- 绑定属性 v-bind （简写：）
- 事件监听 v-on （简写 @）
- v-if、v-else-if、v-else 【v-show】、v-for
- v-model 表单的双向绑定
- 条件判断
- 循环遍历
- 计算属性 computed
□原因：计算属性会进行缓存，如果多次使用时，计算属性只会调用一次。
9.监听属性 watch
10.过滤属性 filters
□ html 页面的使用：参数 | 过滤函数名
1、绑定属性 v-bind （简写：）
☆ 通过绑定属性（数据可以从vue实例中获取）
（1）举例：我们的图片路径、标签的样式、类选择器等等不希望写死，希望实现动态绑定，从vue实例中获取数据：
（2）v-bind绑定class
■ 绑定class有两种方式：
- 对象语法
- 数组语法
● 绑定方式：对象语法
<h2 class="title" :class="{'active': isActive, 'line': isLine}">Hello World</h2>
（和普通的类同时存在，并不冲突）
- 我们可以利用v-bind:style来绑定一些CSS内联样式【跟绑定class差不多，只是要记得那种属性有连字符- 要给它加单引号‘’】
2，事件监听 v-on （简写 @）：常用的就是监听点击事件【也可以监听自定义事件】
□ 我们可以将事件指向表达式，也可以是一个在methods中定义的函数
● v-on:click可以写成@click
□ 事件指向method 带参数问题：
□ v-on修饰符：① .stop ② .prevent ③ .native ④ .once 等
3，v-if、v-else-if、v-else 【v-show】
(1) v-if、v-else-if、v-else
----缓存问题：Vue在进行DOM渲染时，出于性能考虑，会尽可能的复用已经存在的元素，而不是重新创建新的元素。
-----如果我们在有输入内容的情况下，切换了类型，我们会发现文字依然显示之前的输入的内容。
------解决：加上唯一的key属性：
(2) v-show:
□ 当需要在显示与隐藏之间切片很频繁时，使用v-show (本质上就是使用了cloak)
□ 当只有一次切换时，通过使用v-if
（3）v-for 遍历数组、遍历对象：
语法格式：v-for=(item, index) in items
4，v-model 双向绑定的本质
（① 绑定input回显value属性=message ② 监听输入事件，同时事件指向表达式【dom中输入的值赋值给message】）
<input type="text" v-model="message"> <input type="text" v-bind:value="message" v-on:input="message = $event.target.value">① v-model：radio
② v-model：checkbox （单个勾选框：v-model即为布尔值。当是多个复选框时，因为可以选中多个，所以对应的data中属性是一个数组）
③v-model：select
■ v-model的修饰符：① lazy ② number ③ trim
5，计算属性 computed
□ 原因：计算属性会进行缓存，如果多次使用时，计算属性只会调用一次。【缓存作用】
--------- 使用计算属性，可以让我们的代码变得更加简洁（将一大串的方法调用，封装到计算属性中去【计算属性本质就是一个对象（省略了setter方法）】）
三、❀ 辅助函数和js数组的高阶函数
（1-1）响应式函数 （数组更新检测）
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()
（1-2）对象更新检测
- 使用Vue.set(object, propertyName, value) 或者 实例.$set(object, propertyName, value);
例如：Vue.set(this.stu，’love’，’sing’)；2.使用Object.assign( )
例如：this.stu = Object.assign({ }, this.stu, {name: ‘玉山’，love：‘money’} )（1-3）js 中数组的高阶函数 map、filter、reduce：
■ filter：过滤（通过回调函数拿到当前数组的每个元素）
遍历数组，对元素通过设定某种条件，不满足的元素过滤掉了，最终返回经过过滤的数组。
● 要求回调函数返回值是布尔值，为true时，当前的元素添加到内部数组中，为false则过滤掉。
// 1.filter函数的使用（让原数组中元素值小于10的被过滤掉）
let newNums = nums.filter(function (n) {return n < 10})
■ map：映射 （通过回调函数拿到当前数组的每个元素）
遍历数组，对元素设定某种处理条件（例如增删改查操作），最终返回经过处理的数组。
● 数组调用map函数，返回值是经过map函数的参数---回调函数处理过的新数组。
● 回调函数的参数（当前数组的元素）
//map函数的使用：(让原数组中的每个元素值翻倍)
let new2Nums = newNums.map(function (n) { return n * 2
})
■ reduce：汇总（通过回调函数拿到当前数组的每个元素）
遍历数组，对元素进行“累加”，最终返回“累加结果”。
● 数组调用reduce函数（作用就是汇总，从初始值开始不断的“累加”），
所以一般数组调用reduce函数需要有两个参数【第一个是回调函数，第二个是初始值】
● 回调函数（“累加器”--为了实现“累加”作用）往往也是需要两个参数的（+运算符的作用对象就是2个呀，例如1+2（+两边各有一个对象）哈哈哈）：
第一个参数：preValue 前一次汇总后return的值， 第二个参数：n 当前元素
// 3.reduce函数的使用（对数组中所有的所有元素进行累加）//new2Nums是一个数组let total = new2Nums.reduce(function (preValue, n) {return preValue + n}, 0)<div id="app"><div>总价格:{{total | getPrice}}</div>
</div><script>let app = new Vue({el: '#app',data: {books: [{name: '算法导论1', date:'2018-1-1', price:100.5099, count:'1'},{name: '算法导论2', date:'2018-1-1', price:100.9988, count:'1'},{name: '算法导论3', date:'2018-1-1', price:100.98, count:'1'},{name: '算法导论4', date:'2018-1-1', price:100.00, count:'1'},]},computed: {total(){return this.books.reduce(function (preValue, n) {return preValue + n.count * n.price;}, 0);}},filters: {getPrice(price){// return '￥' + parseFloat(price).toFixed(2) ;return '￥' + price.toFixed(2) ;}}
</script>总结Vue第一天~简单介绍、基本知识、辅助函数和js数组的高阶函数相关推荐
- 光纤终端服务器,[原创]简单介绍光缆终端盒知识
原标题:[原创]简单介绍光缆终端盒知识 光缆终端盒又叫光纤终端盒,很多工程商也叫光缆盘纤盒,是在光缆敷设的终端保护光缆和尾纤熔接的盒子,主要用于室内外光缆的直通熔接和分支接续及光缆终端的固定,起到尾纤 ...
- Python学习札记(二十) 函数式编程1 介绍 高阶函数介绍
参考: 函数式编程 高阶函数 Note A.函数式编程(Functional Programming)介绍 1.函数是Python内建支持的一种封装,我们通过一层一层的函数调用把复杂任务分解成简单的任 ...
- python高阶函数map_简单了解python高阶函数map/reduce
高阶函数map/reduce Python内建了map()和reduce()函数. 我们先看map.map()函数接收两个参数,一个是函数,一个是Iterable,map将传入的函数依次作用到序列的每 ...
- [译]介绍Spark2.4的用于处理复杂数据类型的新内置函数与高阶函数
[译]介绍Spark2.4的用于处理复杂数据类型的新内置函数与高阶函数 本文翻译自databricks的介绍spark2.4新特性的blog,英文原文参考原文链接 Apache Spark2.4总共支 ...
- Kotlin小知识之高阶函数
文章目录 高阶函数 定义高阶函数 函数类型 高阶函数示例 内联函数 内联函数的作用 内联函数的用法 noinline与crossinline 高阶函数 定义高阶函数 高阶函数和Lambda的关系是密不 ...
- js最简单的几个特效_高阶函数不会用?教你JS中最实用的几个高阶函数用法
不废话,先来看下什么是高阶函数 高阶函数 函数可以作为参数传递 函数可以作为返回值输出 函数作为参数传递 回调函数 在ajax异步请求的过程中,回调函数使用的非常频繁 在不确定请求返回的时间时,将ca ...
- 高阶函数||编程范式: 命令式编程/声明式编程 || 编程范式: 面向对象编程(第一公民:对象)/函数式编程(第一公民:函数)
编程范式: 命令式编程/声明式编程 编程范式: 面向对象编程(第一公民:对象)/函数式编程(第一公民:函数) 高阶函数 filter/map/reduce filter中的回调函数有一个要求: 必须返 ...
- 深入理解javascript函数进阶系列第一篇——高阶函数
前面的话 前面的函数系列中介绍了函数的基础用法.从本文开始,将介绍javascript函数进阶系列,本文将详细介绍高阶函数 定义 高阶函数(higher-order function)指操作函数的函数 ...
- python自定义高阶函数_python基础知识5（集合，高级特性，高阶函数）
** 删除列表中重复的元素:l = [1,2,3,1,2,3] - 强制转化列表为集合类型:list(set(l)) - 将列表转化为字典,拿出里面的所有key值: dict.fromkeys(l). ...
最新文章
- ICML 2020论文贡献榜排名出炉：Google单挑斯坦福、MIT、伯克利；清华进TOP 20
- 斯坦佛编程教程-Unix编程工具（五）
- sftp java测试连通性_如何使用知行EDI系统模拟连通性测试？
- php主题怎么增加导航页,为twentytwelve子主题添加pagenavi分页导航 | 科研动力
- python爬虫怎么挣钱-个人利用Python爬虫技术怎么挣钱
- 创业码农被公司套路最惨的一次经历
- SQL教程（从入门到精通）
- java实现删除本地文件夹
- 王道训练营 Java 部分测试
- 数据分析案例（6）淘宝电商数据客户价值分析
- linux修复磁盘坏道
- PHPExcel导出excel入门实例教程
- 北洋UAM-05LX（网口系列适用）ROS节点
- 字符串复制的两种方法
- 上海睿昂生物获得数亿元战略融资，浙江大健康产业基金领投
- okhttputils使用（zhuan）
- Python爬虫：抓取智联招聘岗位信息和要求（基础版）
- linux挂载u盘的方法,linux挂载U盘的方法
- 图像融合质量评价方法SSIM、PSNR、EN、MSE与NRMSE（一）
- html方法标签不起作用,Angular中innerHTML标签的样式不起作用的原因解析