在正式开始先复习一下js基础。因为vue最通终也要操作这些元素，vue和以前学的js并不挂勾，他和传统的jquert  设计理念相反

## js 数据类型

1 基本类型

number  string   boolean  null undefined

object func....

symbol (es6)

##{}   []

操作数组方法  pop  push  unshifit  shift slice  splict reverse sort indexof  lastIndexof

concat

数组的变异能改变原数组

新版中增加了常用方法：

forEach filter（过虑） map(映射) some enery induce( includes find es6)

本文中所处环境版本  node.js  8.14    webstorm2018，先复习几个常用的EC6的方法。。。

循环数组中在es5中

let arr  = [1,2,3,4,5]
for(let i = 0; i<arr.length; i++){
    console.log(arr[i]);  //编程式
}

循环数组ES6中
arr.forEach(function (item) {
    console.log(item)    
})  //声明式   不能 return 

for(let key in arr){  //key会变成字符串类型，包括数组私有属性
　　console.log(dey)
}
for(let var of arr){//支持return 并且是值of数组
　　console.log(var);
}

遍历对象  注意object  中字母o   大写

let obj = {school:"b",age:8}
for(let va of Object.keys(obj)){
    console.log(obj[va])

filter（过滤，返回结果，不影响原数组）
例：
let newAry = [1,2,3,4,5,6].filter(function(item){
    return item>2&&item<5
})
console.log(newAry)   //(用于删除)

map  使用实例：

let arr1 =[1,2,3].map(function(item){
    return item*=3
})
console.log(arr1)

拼接中套字符串的方法：
let arr1 =[1,2,3].map(function(item){
    return `<li>${item}<li>`
})
console.log(arr1)  //注意上面是反相号  不是引号   //map  通常用于更新
//是否包含
let arr3 = [1,2,3,4,5]
console.log(arr3.includes(5))   

查找某一项。。。
find  的简单使用方法是：
  arr.find(5)   光是查找显然没有用，，所以应该查找并返回，请参看以下方法， 
let arr3 = [1,2,3,4,5]
let = result = arr3.find(function(item,index){
    return item.toString().indexOf(5)>-1
});
console.log(result)

reduce 方法：

[1, 2, 3, 4, 5].reduce(function(prev, cur, index, arr) {
    console.log(arguments);
})
实列二：

sum = [1, 2, 3, 4, 5].reduce(function(prev, cur, index, arr) { 

return prevres + cur;

}) 
实列三
let sum2 = [{price:30,count:2},{price:30,count:3}].reduce(function(prev,next){
return prev+next.price*next.count
})
console.log(sum2)

实列4
let a = [[1,2,3],[4,5,6],[7,8,9]].reduce(function(prev,next){

    return prev.concat(next);
})
console.log(a)

箭头函数：
//更改this 指向 常用方法：call  apply  bind  ,例;

function a(b){
    return function (c) {
        return b+c;
    }
}
//改写简头函数
let a = b =>{
    return c=>{
        return b+c;
    }
}
// 在次简化
let a = b => c=> b+c;

//二个箭头的叫高阶函数
使用：

console.log(a(1)(2));

vue使用一些经验：
 1， tbody 下面标签如果不是tr  或rt下面没有rd  不正常的编码规范，标签顺序会出错  别在html下不正确的标签，可以用is 来代替
     例如  


h5规范中，table中只能放tr  如果想放模板组件，需要用is  关健字：<tr is= "row">


组件参数效验，在子组件接收父组件传参时可以效验，使用如下：



子组件有一人属性，父属性也有，叫做props属性，，而非props属性则是父像子传了一个属性，而子组件没有定义，比如在子组件<child>
content = "hello" 而子组件 定义时没有接收  就是说vue.component(child,{......中没有props，  这个定义})就叫非props属性
基二，非prope属性，会把属性展示在html标签上。。。。。。



动画：一，原理。动画总是在出现和新建削失时才有。以下css部分




<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<script src ="./node_modules/vue/dist/vue.js"></script>

<style>

    .fade-enter{

        opacity: 0;

    }

    .fade-enter-active{

        transition: opacity 1s;

    }

    fade-leave-to{

        opacity: 0;

        transition: opacity 3s;

    }

</style>

<body>

<div id="root">

    <transition name = "fade">

    <div v-if = "show">hello world </div>

    </transition>

    <button @click = "handleClick">切换</button>

</div>

</body>

<script>

</script>

</html>














												


											
vue2.0  前端框架的更多相关文章
	

    
								
  1. 从壹开始前后端分离【 .NET Core2.0 +Vue2.0 】框架之十二 || 三种跨域方式比较，DTOs(数据传输对象)初探
		
    更新反馈 1.博友@落幕残情童鞋说到了,Nginx反向代理实现跨域,因为我目前还没有使用到,给忽略了,这次记录下,为下次补充.此坑已填 2.提示:跨域的姊妹篇——<三十三║ ⅖ 种方法实现完美跨 ...
    
		
    2. 
						
  2. 基于vue2.0前端组件库element中 el-form表单 自定义验证填坑
		
    eleme写的基于vue2.0的前端组件库: http://element.eleme.io 我在平时使用过程中,遇到的问题. 自定义表单验证出坑: 1: validate/resetFields 未 ...
    
		
    3. 
						
  3. 从壹开始前后端分离【 .NET Core2.0 +Vue2.0 】框架之七 || API项目整体搭建 6.2 轻量级ORM
		
    更新 1.在使用的时候,特别是更新数据的时候,如果不知道哪里有问题,可以查看数据库 和 实体类 的字段,是否大小写一致,比如 name 和 Name 2.在使用Sqlsugar 的 CodeFirst ...
    
		
    4. 
						
  4. 0前端  框架 库_千万别去碰js呀  混合APP_webAPP_美工  选有类型的语言，比如TypeScript
		
    常用知识点,技巧 添加库到本地: (举例 element-ui) 用npm命令行把包下载到本地 在电脑里找到资源文件,比如 C:\Users\XiaoCong\AppData\Roaming\npm\ ...
    
		
    5. 
						
  5. Z从壹开始前后端分离【 .NET Core2.2/3.0 +Vue2.0 】框架之七 || API项目整体搭建 6.2 轻量级ORM
		
    本文梯子 本文3.0版本文章 前言 零.今天完成的蓝色部分 0.创建实体模型与数据库 1.实体模型 2.创建数据库 一.在 IRepository 层设计接口 二.在 Repository 层实现相应 ...
    
		
    6. 
						
  6. Z从壹开始前后端分离【 .NET Core2.0/3.0 +Vue2.0 】框架之四 || Swagger的使用 3.2
		
    本文梯子 本文3.0版本文章 前言 一.swagger的一般用法 0.设置swagger页面为首页——开发环境 1.设置默认直接首页访问 —— 生产环境 2.为接口添加注释 3.对 Model 也添加 ...
    
		
    7. 
						
  7. 从壹开始前后端分离【 .NET Core2.0 +Vue2.0 】框架之四 || Swagger的使用 3.2
		
    前言 如果想直接在域名的根目录直接加载 swagger 比如访问:localhost:8001 就能访问,可以这样设置: app.UseSwaggerUI(c => { c.SwaggerEnd ...
    
		
    8. 
						
  8. 从壹开始前后端分离【 .NET Core2.0 +Vue2.0 】框架之三 || Swagger的使用 3.1
		
    常见问题 1.经常有小伙伴遇到这个错误 这是因为接口json文档定义和调用不是一个 1.定义: ConfigureServices 方法中的  services.AddSwaggerGen 注册的一个 ...
    
		
    9. 
						
  9. 从壹开始前后端分离【 .NET Core2.0 +Vue2.0 】框架之九 ||  依赖注入IoC学习 + AOP界面编程初探
		
    更新 1.如果看不懂本文,或者比较困难,先别着急问问题,我单写了一个关于依赖注入的小Demo,可以下载看看,多思考思考注入的原理: https://github.com/anjoy8/BlogArti ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. RHCE_DAY01
			
    shell概述 shell是一个程序,它连接了用户和Linux内核,它可以解释用户输入的命令传递给内核,让用户可以更加方便的使用Linux系统 shell 本身并不是内核的一部分,它只是站在内核的基础 ...
    
			
    2. 
						
  2. 开源爆款，阿里P7Android技术笔记，理论与实战齐飞，限时开放下载！
			
    自我介绍 2013年java转到Android开发,在小厂待过,也去过华为,OPPO等大厂待过,18年四月份进了阿里一直到现在. 被人面试过,也面试过很多人.深知大多数初中级Android工程师,想要 ...
    
			
    3. 
						
  3. @Valid和@Validated 区别
			
    Spring Validation验证框架对参数的验证机制提供了@Validated(Spring's JSR-303规范,是标准JSR-303的一个变种),javax提供了@Valid(标准JSR- ...
    
			
    4. 
						
  4. MySQL慢查询及开启慢查询
			
    一.简介 开启慢查询日志,可以让MySQL记录下查询超过指定时间的语句,通过定位分析性能的瓶颈,才能更好的优化数据库系统的性能. 二.参数说明 slow_query_log 慢查询开启状态 slow_ ...
    
			
    5. 
						
  5. Java HashMap【笔记】
			
    Java HashMap[笔记] HashMap HashMap 基本结构 HashMap 底层的数据结构主要是数组 + 链表 + 红黑树 其中当链表的长度大于等于 8 时,链表会转化成红黑树,当红黑 ...
    
			
    6. 
						
  6. VLAN-1 基础配置及access接口
			
    一.实验拓扑图 二.实验编制 三.实验步骤 1.给对应的PC设置对应的IP和掩码还有接口,以及根据需要划分不同的vlan区域,再用文本标记出不同部门. 2.启动设备(全选) 3.首先用ping命令检查 ...
    
			
    7. 
						
  7. HTML界的“苏炳添”——详解Canvas优越性能和实际应用
			
    Google Docs宣布将会把HTML迁移到基于Canvas渲染,这一消息的出现再次把几年前随HTML5诞生的标签重新推到了人们视线之中.Canvas在刚推出时主打的优势就是更快的渲染速度,堪称HT ...
    
			
    8. 
						
  8. .Net Core with 微服务 - 分布式事务 - TCC
			
    上一次我们讲解了分布式事务的 2PC.3PC .那么这次我们来理一下 TCC 事务.本次还是讲解 TCC 的原理跟 .NET 其实没有关系. TCC Try 准备阶段,尝试执行业务 Confirm 完 ...
    
			
    9. 
						
  9. NOIP 模拟 6 辣鸡
			
    题解 难得啊,本来能 \(AC\) 的一道题,注释没删,挂了五分,难受 此题暴力很好想,就是直接 \(n^2\) 枚举不同的矩阵组合,记录块内答案和跨块的答案 出题人不会告诉你,这题只要输出块内答案就 ...
    
			
    10. 
						
  10. JavaWeb学习笔记（五）
			
    本文内容 1. JSP: 1. 指令 2. 注释 3. 内置对象 2. MVC开发模式 3. EL表达式 4. JSTL标签 5. 三层架构 JSP: 1. 指令 * 作用:用于配置JSP页面,导入资 ...
    
			
    11.