亚洲必赢登录 > 亚洲必赢app > Vue中结合clipboard完成复制功用,代码笔记

原标题:Vue中结合clipboard完成复制功用,代码笔记

浏览次数:106 时间:2019-12-29

黄金年代,展开Dreamweaver---->File---New---->如下图所示。选用HTML,点击OK。

先是今后Vue中引进clipboard
npm install clipboard --save

auto-workflow

用以急速营造各类关系图的库,举例流程图,可视化试行流等

github地址:

JS介绍

//来自 https://www.cnblogs.com/lhl66/p/8021730.html 侵删




el:element 需要获取的元素,一定是HTML中的根容器元素
data:用于数据的存储
methods:用于存储各种方法
数据绑定字面量只加载一次{{* msg}}
data里面可以进行简单的运算;
methods:{
 getHome(){
   return "早上好"
 }
}
--------------------------------------------------
HTML中渲染{{getHome()}}  //得到的结果是--->早上好

v-bind绑定属性简写就是一个冒号 如
data{
 id:12
}
<p :id="id">123</>
--------------------------------------------------
动态绑定dom元素

data{
  websiteTag:"<a href='http://www.baidu.com'>百度</a>"
}

html中 <p v-html="websiteTag"></p>
--------------------------------------------------
单击事件:v-on:click="方法"      @click="方法"(简写)
双击事件:v-on:dblclick="方法"    @dblclick="方法"(简写)
data:{
  x:0,
  y:0
}
updataXY(event){
  console.log(event) //js鼠标事件默认的
  this.x = event.offsetX;
  this.y = event.offsetY;
}

HTML渲染:

<div id="canvas" @mousemove="updataXY">
   {{x}}-----{{y}}
</div>

事件还有很多,用法都一样;
--------------------------------------------------
阻止冒泡:
data:{
  x:0,
  y:0
}
updataXY(event){
  console.log(event) //js鼠标事件默认的
  this.x = event.offsetX;
  this.y = event.offsetY;
}
updataStop(evevt){
 event.stopPropagation();
}
HTML渲染:
方法一:
<div id="canvas" @mousemove="updataXY">
   {{x}}-----{{y}}
   移到我这里不会改变xy坐标
</div>
方法二:
<div id="canvas" @mousemove="updataXY">
   {{x}}-----{{y}}
   移到我这里不会改变xy坐标 //vue中加stop修饰符即可阻止冒泡
</div>
--------------------------------------------------
阻止默认行为:
<a href="http://www.baidu.com" @click.prevent="">百度</a>
--------------------------------------------------
键盘事件:
changeName(){
 console.log("你正在输入名字")
}
<input type="text" @keyup="changeName">
<input type="text" @keyup.enter="changeName">
<input type="text" @keydown="changeName">
其他键盘事件类似,用法一致
--------------------------------------------------
数据双向绑定:
data:{
 name:""
}
<input type="text" v-model="name" ref="name">
补充一个知识点:获取vue获取input的value的方法--->this.$refs.name.value;
--------------------------------------------------
计算属性:
data:{
 a:0,
 b:0,
 age:10
}

methods:{
  addA(){
    console.log("add  to a")
    return this.a+this.age;
  }
  addB(){
    console.log("add  to B")
    return this.b+this.age;
  }
}
法一:用方法实现这个功能
<button @click="a++">Add to A</button>
<button @click="b++">Add to A</button>
<p>A-{{a}}</p>
<p>A-{{b}}</p>
<p>Age-A={{addA()}}</p>
<p>Age-B={{addB()}}</p>
法二:用计算属性实现
computed:{
  addA(){
    console.log("add  to a")
    return this.a+this.age;
  }
  addB(){
    console.log("add  to B")
    return this.b+this.age;
  }
}
<button @click="a++">Add to A</button>
<button @click="b++">Add to A</button>
<p>A-{{a}}</p>
<p>A-{{b}}</p>
<p>Age-A={{addA}}</p>
<p>Age-B={{addB}}</p>
--------------------------------------------------
动态css
data:{
  changeColor:false
}
<h1 @click="changeColor!=changeColor" :class="{changeColor:changeColor}">
   你好
</h1>

<style>
 .changeColor span{
    background:#f2f1f1;
  }
</style>
--------------------------------------------------
v-if指令(后面可以跟v-else-if  v-else)
v-show指令
区别在于v-if 判断dom结构是否存在,v-show是使用的display属性来是否显示
--------------------------------------------------
v-for指令数组遍历数组、对象

data:{
  arr:["bob","wow","pop"],
  list:[
    {name:"bob",age:18}
    {name:"wow",age:19}
    {name:"pop",age:20}
  ]
}

<ul>
  <li v-for="item in arr">{{item}}</li>
</ul>

<ul>
  <li v-for="(item,index) in list">{{item.name}}</li>
  <li v-for="(item,index) in list">{{item.age}}</li>
  <li v-for="(item,index) in list">{{index}如果下标需要从一开始如排行榜{{index+1}}</li>
</ul>
注意如果用div渲染会直接渲染div包着的结构;(3个div)
<div v-for="(item,index) in list">
  <h3>{{item.name}}</h3>
  <p>{{item.age}}</p>
</div>
改用template的话可以去掉不必须要的空元素div (1个div)
<template v-for="(item,index) in list">
  <h3>{{item.name}}</h3>
  <p>{{item.age}}</p>
</template>
--------------------------------------------------
index.html-->main.js(实例化vue对象)-->app.vue
html(template)--->js---->style三部分内容
--------------------------------------------------
全局注册组件在main.js写上Vue.component("自定义名字",组件名)
调用组件<自定义名字></自定义名字>
局部组件:
data(){
  return{

  }
},
components:{组件名}
--------------------------------------------------
组件css作用域 scoped限定
组件预处理器<style lang="预处理器" scoped></style>
--------------------------------------------------
组件传值(父组件-->子组件(props)/子组件--->父组件(自定义事件))
需要用的数据放置父组件的data里面
假定在app.vue
data:{
  list:[
    {name:"bob",age:18}
    {name:"wow",age:19}
    {name:"pop",age:20}
  ]
}
<header><header>
<content :list="list"></content>
<footer><footer>
在content组件内props接收
法一:  props["list"]
法二(官方推荐):
props{
  list:{
    type:Array
    required:true
  },
}
法三:vuex状态管理仓库
传值:string、number、boolean (单个变)
传引用:array、object  (整个变)

子--->父
changeTitle(){
  this.$emit("titleChange","子到父传东西")
}

父组件@titleChange="方法名($event)"

methods:{
  //做的事情
  方法名(形参){
    //做什么事情
  }
}
--------------------------------------------------
路由:(写法routes数组里面包着对象)
import 自定义名字 from "组件路径"
const router = new VueRouter ({
   model:"history",
   routes:[
      {
          pateh:"xxx",
          meta:{单页面配置标题},     //---->该字段也可以校验路由
          components:{组件}          //---->该方法component: resolve => require(['组件路径'], resolve)路由懒加载(不用import组件了)
      },
   ]

})

 

在需求使用的构件中import 引进clipboard
import Clipboard from 'clipboard';

高速起首

npm install aworkflow

要么援用dist文件夹下的面世文件

// JavaScript的发明人
// 布兰登·艾奇(Brendan Eich),用了十天时间发明了JavaScript模型

// JavaScript简称JS

// JavaScript是什么?
// 1.脚本语言
// 编译语言:需要把代码编译成计算机所认知的二进制语言才能执行
// 脚本语言:不需要编译,直接执行
// 2.解释性语言
// 解释性语言:遇到一行代码就解释一行代码
// 其他语言:把所有代码编译完成后在执行代码
// 3.动态类型的语言
// 4.基于对象的语言
// 5.弱类型语言
// 弱类型语言:声明变量都用var,会自动辨别类型:var num = 10; var num2 = 10.23;
// 强类型语言:声明变量的时候必须写上对应变量的类型:int num = 10; double num2 = 10.23;

// JS分三个部分: 
// 1.ECMAScript js的基本语法
// 2.DOM  Document Object Model 文档对象模型
// 3.BOM Browser Object Model 浏览器对象模型

// js代码注意问题
// 1.如果script的标签中有错误的js代码,那么这对script标签就不会执行
// 2.如果有一个script标签代码错误,但它不会影响其他的script标签
// 3.script标签在页面中可以多对出现
// 4.script标签一般放在body标签内容的最后,可以放在head中
// 5.如果script标签引用外部js文件,那么就不要在这对标签里面放任何js代码

图片 1

clipboard的实在应用

不管是单开关复制照旧多开关复制,必须求在页面加载DOM完毕后先New出来有所复制作用的按钮,假如在函数内再New那么或者会冒出点击复制开关四回,才复制作而成功的风貌,如下:

 mounted() {
    var copybtn = document.getElementsByClassName('btn')
    this.clipboard = new Clipboard(copybtn);
    }
<!--并不一定非要在mounted中也可以在其他周期内,
    只要页面已经加载完DOM即可,如果是动态生成可以使用nextTick中New。-->

绑定复制内容的法子有以下三种:

<!--第一种直接绑定在按钮上-->
 <button class="marleft10 btn" style="float: right;border: none;" :data-clipboard-text="2"
        @click="copy()">复制
        </button>
<!--第二种单个复制按钮动态获取需要复制的内容-->
<input type="text" v-model="copyContent"  id="copy_text" style="opacity: 0">
<button ref="copy"  data-clipboard-action="copy" data-clipboard-target="#copy_text" @click="copy">复制</button>
<!--第三种可以在New Clipboard时设定要复制的内容-->
new Clipboard('copyBtn',function(){
    return <!--要复制的内容-->
})

copy(){
    let _this = this
    <!--如果在内部new会出现点击两次在复制成功的现象所以还请各位多多注意-->
    clipboard.on('success', function () {
        Toast('复制成功')
        _this.destroy() <!--销毁缓存,然后在重新new这样不会出现点击复制上出现之前复制的内容的情况-->
        _this.clipboard = new Clipboard(copyBtn);
    })
    clipboard.on('error', function () {
        Toast('复制失败,请手动复制')
      })
    }

上述是作者本身在其实中遭受的题材及消除办法并不适用全数,仅供参谋,如有不对的地点还请多多之指正,同盟学习发展

访问demo

npm install

npm run dev

暗许模版:

动画:

自动排列:

自定义模版:

也得以访谈在线demo:

私下认可模版:

动画:

电动排列:

自定义模版:

数据输出输入

 

本领文书档案

// 在浏览器弹出的提示框中显示
alert();
// 在浏览器的控制台中显示
console.log();
// 在浏览器页面中显示
document.write();
// 在浏览器中弹出输入框
prompt();

二,晤面世如下图所示分界面。把光标放到Body处。

快快起先

JS变量

 

1,定义node:

let node1 = {
    // 唯一标识,必须
    id: '123',
    // 自定义数据,用于填充模版,nodeName为组件文案
    defineData: {
        nodeName: '数据拆分'
    },
    // 画布中位置
    position: [100, 100],
    // 输入圈,对象数组,每个对象表示一个输入,以下标区分
    input: [
        {
        }
    ],
    // 输出圈,对象数组,每个对象表示一个输出,allInputs:能链接到所有node的输入,enbaleInputs:对象数组,每个对象定义可以输入的圈信息(id对应节点,inputIndex对应输入点下标)
    output: [
        {
            allInputs: true,
            enbaleInputs: [{
                id: '124',
                inputIndex: 0
            }]
        }
    ]
};
let node2 = {
    // 使用的模版,默认使用defaultTemplate
    templateName: 'iconTemplate',
    id: '124',
    defineData: {
        nodeName: '随机采样',
        imgSrc: 'base64...'
    },
    // 画布中位置
    position: [300, 100],
    // 输入
    input: [
        {
        }
    ],
    // 输出
    output: [
    ]
};

图片 2图片 3

/*什么是变量:
 变量是计算机内存中存储数据的标识符,根据变量名可以获取到内存中存储的数据*/

/*为什么使用变量:
 使用变量可以方便的获取或者修改内存的数据*/

// 变量的作用:
// 操作数据:存储数据、读取数据

/*变量名的规范:
一般以字母,$符号,下划线开头
变量名一般都是小写,如果是多个单词,那么第一个单词的首字母小写,后面的单词首字母大写
变量名不能是关键字
区分大小写*/

// 变量声明
var  name;// 有var 有变量名字但没有赋值

// 声明多个变量
var name,age,sex;

// 变量的初始化:声明变量同时赋值
var xiu = undefined;// 声明变量没有赋值默认为undefined:未定义
var number = 20;// 存储一个数字(number)
var name = "修抗";// 存储一个字符串(string) 字符串应该用单引号或者双引号包裹起来
var flag = true;// 存储一个真(true) 假(false)
var nll = null;// 存储一个空(null)

// 声明多个变量依次赋值
var num1,num2,num3;
num1 = 10;
num2 = 20;
num3 = 30;

// 声明多个变量并赋值
var num1 = 10,num2 = 20,num3 = 30;

// 变量的交换(1)
var num1 = 10,num2 = 20;
var num3;//重新声明一个变量
num3 = num1;//num3 = num1 = 10
num1 = num2;//num1 = num2 = 20
num2 = num3;//num2 = num3 = 10

// 变量的交换(2)一般适用于数字的交换
var num4 = 10,num5 = 20;
num4 = num4 + num5;//10+20=30
num5 = num4 - num5;//30-20=10
num4 = num4 - num5;//30-10=20

// 变量的交换(3)
var num6 = 10,num7 = 20;
num6 = num6 ^ num7;
num7 = num6 ^ num7;
num6 = num6 ^ num7;

图片 4

2,定义节点关系:

let edges = [
    {
        // 输出节点及输出圈,‘123:0’表示id为123的node的下标为0的输出点
        src: '123:0',
        // 输入节点及输入圈,'124:0'表示id为124的node的下标为0的输入点
        to: '124:0'
    }
];

图片 5图片 6

JS数据类型

 

3,实例化:

// 全局配置
let globalConfig = {
    // 是否静态图片,true:节点和连线都不可拖动,false:可以添加事件监听
    isStatic: false,
    // 整个图默认模版,默认为defaultTemplate
    templateName: 'defaultTemplate',
    // templateName: 'iconTemplate',
    // 是否需要自动排序,true: 程序智能计算每个node的位置,false: 根据node position来定位
    autoSort: true,
    // 自动排序时,true: 水平排序,false: 垂直排序
    horizontal: false,
    // 可选,node对齐方式,start: 水平排列时表示上对齐,垂直排列时表示左对齐 middle: 中间对齐 end: 水平排列时表示下对齐,垂直排列时表示右对齐
    align: 'middle',
    // 可选,beginX 起点X坐标,默认10
    beginX: 30,
    // 可选,beginY 起点Y坐标,默认10
    beginY: 30,
    // 可选,spaceX 横向间距,默认200
    spaceX: 200,
    // 可选,spaceY 纵向间距,默认100
    spaceY: 60
};
// 实例化
let workflow = new AWrokflow(document.getElementById('aw'), {nodes, edges}, globalConfig);

图片 7图片 8

/*
原始数据类型:number,string,boolean,undefined,null,object
基本类型:number,string,boolean
复杂类型:object
空类型:undefined,null

基本类型的值在栈空间存储
复类类型的值在堆空间存储,然后在栈空间引用堆空间的地址
*/
// 获取变量的数据类型
var xiu = "修抗";
console.log(typeof(xiu)); //string

三,Insert--->Table--->会弹出如图所示对话框。点击OK。

API

接口文书档案: 

进制介绍

 

幼功概念

// 八进制(数字前面加一个0代表八进制)
var num = 012;

// 十进制
var num2 = 10;

// 十六进制(数字前面加一个0x代表十六进制)
var num3 = 0xa;

/*二进制-->十进制
1----1----0----0----1----0----1----0----1(二进制)
256--128--64---32---16---8----4----2----1
256--128--0----0----16---0----4----0----1(十进制)
二进制:110010101 = 256+128+0+0+16+0+4+0+1 = 405:十进制
*/ 

/*二进制-->八进制
110----010----101(二进制)
6------2------5(八进制/每三位二进制为一组)
二进制:110010101 = 625:八进制
*/

/*二进制-->十六进制
1----1001----0101(二进制)
1----9-------5(十六进制/每四位二进制为一组)
二进制:110010101 = 195:十六进制
*/

/*十进制-->二进制
405-202-101-50--25--12--6---3---1
1---0---1---0---1---0---0---1---1(倒叙)
十进制:405 = 110010101:二进制
 */

图片 9

模版

模版是形象和样式的结合体,定义了节点(node)和连线(edge)的求实形象和体裁 默认为defaultTemplate,由矩形和文案组成 系统还提供了iconTemplate模版,由一个icon和文案组成 当然还能自定义模版,能够参见demo,定义了二个品绿模版 定义的沙盘模拟经营能够在node和edge中运用,那样就足以画出分歧的节点和连线了

数字(Number)

 

node

节点,能够定义使用的模板,模版中参数,输入,输出圈消息

// 小数类型和整数类型都是数字类型(Number)

//数字的最大值和最小值
console.log(Number.MAX_VALUE);//最大值
console.log(Number.MIN_VALUE);//最小值

// Infinity 无穷大
// -Infinity 无穷小

// 小数的bug
console.log(0.1+0.2);//结果不是0.3而是0.30000000000000004

// 不要用NaN验证NaN
var xiu;
console.log(xiu+10);//返回NaN
console.log("你好" == "我好");//false:都是字符串,但是字符串内容不一样
console.log(xiu+10 == NaN);//false:都是NaN,但是里面的值不一样

// isNaN()判断是否不是数字,如果不是数字返回true
console.log(isNaN(NaN));

四,会如下图所示。

edge

连线,能够定义模版,连线音讯

字符串(String)

 

高等用法,自定义node和edge的根基绘制方法

// 字符串可以使用单引号,也可以使用双引号
var str = "xiu ";
var str2 = 'kang';

// 查看字符串的长度
console.log(str.length);

// 字符串拼接,用+链接
// 如果两边只要有一边为字符串,那么+就为拼接
// 如果两边都是数字。那么就是算术功能
var str3 = "1";
var str4 = '2';
console.log(str3 + str4);//12

图片 10

DrawView

在渲染职业流中,为了便于地拍卖缩放,所以总体育赛职业流的图片集合是二个目标,对应zrender中的Group类,暗许情况下是Aworkflow中的DrawView类,在DrawView中蕴涵了NodeViewEdgeViewNodeViewEdgeView是由区别的Shape组成的Group。
只要想自定义三个渲染准则,能够参照src/draw/basicdraw/DrawView.js中的代码,使用Draw.extend()兑现五个自定义的类,供给安装type字段,而且实现render()方法,render()办法中要求将最终利用的zrender的形状实例对象return出去,以便于在Aworkflow中add到zrender对象中。
(这一个地点落到实处的临近不太好卡塔尔(قطر‎

Vue中结合clipboard完成复制功用,代码笔记。Boolean类型/Undefined类型/Null类型

 

NodeView

Node是职业流中的节点,暗许的贯彻类是src/draw/basicDraw/NodeView,父类是src/draw/Node,Node也是一个Group,包蕴了像文字(Text),图标(Image),矩形(Rect)等中央造型。在NodeView中render输入输出点的时候,会遵照点的个数和Node的position来总计出各种点的坐标来绘制,同不经常间可以在config中构造input或然output在node中之处,如top、right、bottom、left。
风流倜傥律,要是想要自定义二个Node,需求利用Node.extend()措施,须求定义type和落实render()方法,render()格局中供给将最终使用的zrender的样子实例对象return出去,以便于在DrawView也许父集结对象中add到相应的Group对象中。

// Boolean类型
// 布尔类型只有两个值 true(真) false(假)
var flag = true;

// Undefined
// 表示声明一个变量没有赋值,变量只有声明的时候值默认为undefined
var unde = undefined;

// null类型
// 表示一个空,变量的值如果为空,必须手动设置
var str = null;

五,纠正有关的 更改为大家想要的文字。

EdgeView

Edge是职业流中的连线,暗中认可的落到实处类是src/draw/basicDraw/EdgeView,父类是src/draw/Edge,Edge也是一个Group,包罗了像贝塞尔曲线和三角形箭头基本造型。渲染连线须要在渲染节点之后进展,因为连线的消息只有节点音讯并未有坐标音讯,所以需求在节点渲染后,依据起止节点来计算处连线的开首点坐标,同不经常候会依赖箭头的岗位对终极坐标进行细微的调治。
生龙活虎律,假使想要自定义三个Edge,需求动用Edge.extend()方法,需求定义type和落实render()方法,render()措施中需求将最终利用的zrender的模样实例对象return出去,以便于在DrawView抑或父集合对象中add到相应的Group对象中。

类型转变

 

Shape

Shape是有的主干造型,近年来达成了的有BezierCurve、CirCle、Image、Text、React、Triangle,是对zrender中Displayable中的不难封装。在动用Shape的时候,必要先实例化,然后调用shape.init()主意实例化对应的zrender对象,init之后shape.dom中贮存正是相应的zrender对象。 必要自定义Shape的时候,必要使用Shape.extend()主意。和方面多少个相通,具体可参看src/draw/shape目录中的代码。

// 其他类型转为数字类型:三种方式
// parseInt();转整数
console.log(parseInt("8sa"));//8
console.log(parseInt("as8"));//NaN
console.log(parseInt("8.9"));//8
console.log(parseInt("8.2as"));//8
console.log(parseInt("sa6.8"));//NaN

// parseFloat();转小数
console.log(parseFloat("8sa"));//8
console.log(parseFloat("as8"));//NaN
console.log(parseFloat("8"));//8
console.log(parseFloat("8.9as"));//8.2
console.log(parseFloat("sa6.8"));//NaN

// Number();转数字
console.log(Number("8sa"));//NaN
console.log(Number("as8"));//NaN
console.log(Number("8"));//8
console.log(Number("8.9as"));//NaN
console.log(Number("sa6.8"));//NaN

// 其他类型转为字符串类型:两种方式
// toString;不能转换没有意义的变量:null、undefined
var xiu = 10;
console.log(xiu.toString());

// String();
var kang = 20;
console.log(String(kang));

// 其他类型转为布尔类型
// Boolean();
console.log(Boolean(0));//false
console.log(Boolean(""));//false
console.log(Boolean(null));//false
console.log(Boolean(undefined));//false

图片 11

测试

npm run test

运算符

 

讨论

qq群:869605396

// x+y
// x和y是操作数 +是操作符

// 算术运算符(+、-、*、/、%)
10%4;//10除于4的余数

// 一元运算符(++、--)
// 这个运算符只需要一个操作数就可以运算的表达式
// 前+ 后+ 前- 后-
var x = 2;
var y = 2;
console.log(x++ +3);//5,后+,先参与运算,运算结束后在+1
console.log(x);//3
console.log(++y +3);//6,前+,先+1,然后在参与运算
console.log(y);//3

// 二元运算符()
// 这个运算符需要两个个操作数就可以运算的表达式

// 三元运算符()
// 这个运算符需要三个操作数就可以运算的表达式
// var 变量 = 表达式1 ? 表达式2 : 表达式3
// 如果表达式1结果为true,就执行表达式2,然后把表达式2的结果给变量
// 如果表达式1结果为false,就执行表达式3,然后把表达式3的结果给变量
var sear = true ? 1 : 2;//sear=1

// 复合运算符(+=、-=、*=、/=、%=)
var num;
num+=10;//num=num+10;

// 关系运算符(<、>、<=、>=、!=、==、===、!=、!==)
var xiu = "10";
var kang = 10;
console.log(xiu==kang);//两个值都一样所以为true
console.log(xiu===kang);//值一样,但是类型不一样所有为false

// 逻辑运算符($$与-并且、 ||或-或者、 !非-取反、)
console.log(true && true);//两个为true则为true
console.log(true || false);//一个为true则为true
console.log(!false);//false为true,true为false

/*
运算符的优先级
1.() 优先级最高
2.一元运算符 ++ -- !
3.算术运算符 先* / 后 + -
4.关系运算符 < <= > >=
5.相等运算符 == != === !==
6.逻辑运算符 先&& 在||
7.赋值运算符 =
 */

六,点击Design,如下图所示。

流程序调整制

 

// 流程控制:代码的执行过程

// 流程控制的三种方式:
// 1.顺序结构
// 从上到下,从左往右执行的顺序叫顺序结构(不严谨)
// var xiu = 2;(不严谨的原因:先找到2,然后在将2赋值给xiu)

// 2.分支结构

// if语句
/*
if(表达式1) {
    代码块1
}else if(表达式2) {
    代码块2
}else {
    代码块3
}
先运行表达式1,如果表达式1为true就执行的代码块1,如果为false就执行表达式2
如果表达式2,如果表达式2为true就执行的代码块2,如果为false就执行代码块3
else if()可以多次出现,也可以不写
else 只能出现一次,也可以不写
*/
var x = prompt("请输入数字");//prompt()弹出一个输入框
if(x > 5){
    console.log("大于5");
}else if(x < 5) {
    console.log("小于5");
}else if(x == 5) {
    console.log("等于5");
}else {
    console.log("请输入数字");
}

// switch-case
/*
switch(表达式){
    case 值1: 代码块;break;    
    case 值2: 代码块;break;    
    case 值3: 代码块;break;    
    default:代码4;   
}
获取表达式的值,然后和值依次比较,如果和值相等执行相对应的代码块,遇到break跳出switch语句
如果和值都不相等,那么就执行default语句
表达式的值跟case的值比较是严格模式的比较(===)
default可以省略
break可以省略:省略后不会跳出语句 会依次往下执行
 */
var y = prompt("请输入1到3的整数");
switch(y){
    case "1":console.log(y);
    break;//该语句为跳出语句
    case "2":console.log(y);
    break;
    case "3":console.log(y);
    break;
    default:console.log("请输入1到3的整数");
}

// 三元表达式

// 3.循环结构
// while
/*
var 变量 = 0;
while(条件){
    循环体;
    计数器;
}
如果条件为false,就不执行while大括号里面的内容
如果条件为true,就执行循环体,然后执行计数器,循环结束后计数器+1,然后又去判断条件,直到条件为false停止循环
*/
var xiu = 0;//计数器
while(xiu<10){
    console.log(xiu);//循环体
    xiu++;//计数器+1
}

// do-while
/*
do {
    循环体
}while(条件);
先执行循环体,然后在判断条件是否成立,如果为true继续执行循环体,然后在判断条件,直到条件为false跳出循环
*/
var kang = 0;
do {
    console.log(kang);
    kang++;
}while(kang<0);

// for
/*
for(表达式1;表达式2;表达式3;){
    循环体;
}
先获取表达式1的值,然后判断表达式2,如果为false跳出循环,如果为true就执行循环体然后在执行表达式3,然后继续执行表达式2,直到条件为false
*/
for (var i = 1; i <= 10; i++) {
    console.log(i);
}

图片 12

 break与continue关键字

 

// break关键字
// 作用:在循环中使用,遇到break则跳出当前循环
while(true){
    console.log("修抗");
    break;//本来是一个死循环,但是遇到break就跳出循环,所有就执行一次
}

// continue关键字
// 作用:在循环中使用,遇到continue直接执行下次循环
// 输出10以内的奇数
var i = 0;
while(i<10){
    if(i%2==0){
        i++;
        continue;//如果为偶数就继续下次循环
    }
    document.write(i);
    i++;
}

参考资料:《生手教程》

数组(Array)

// 数组:存储一组有序的数据

// 作用:可以一次性存储多个数据

// 数组的定义:
/*
1.通过构造函数创建数组
var 数组名 = new Array();
var 数组名 = new Array(长度);
如果Array中只有一个值(整数),那么这个值就是该数组的长度(元素就个数)
如果有多个值,那么这些值就是该数组的数据(数组的长度就是有多少个值)
 */
var array = new Array();//创建一个空数组,没有数据
var array2 = new Array("25");//如果数组中没有数据,但有长度,那么数组的每个值就是undefined

/*
2.通过字面量的方式创建数组
var array = [];
 */
var array3 = [];//创建空数组
var array4 = [3,34,46,7];//创建数组并添加数据

/*
数组元素:就是数组中存储的数据
数组个数:就是数组中元素的个数
数组下标:从0开始,到数组长度减1结束
通过下标设置数组元素值:数组名[下标] = 值
通过下标访问数组元素值:数组名[下标]
 */

// 获取数组的长度
array.length;

// 注意: 数组中的数据类型可以不一样,但一般存储一样的数据,数组的长度可以任意改变
var array5 = [10,"哈哈",true,undefined,null,new Object()];

// 遍历数组
var array6 = [2,5,72,58,3,52];
for(var i=0;i<array6.length;i++){
    console.log(array6[i]);
}

// 求数组的和
var array7 = [1,2,3,4,5];
var sum = 0;
for(var i=0;i<array7.length;i++){
    sum+=array7[i];
}
console.log(sum);

// 求数组的平均值
var array8 = [1,2,3,4,5];
var avg = 0;
for(var i=0;i<array8.length;i++){
    avg+=array8[i];
}
console.log(avg/array8.length);

// 求数组的最大值
var array9 = [1,2,3,4,5];
var max = array9[0];
for(var i=1;i<array9.length;i++){
    if(max<array9[i]){
        max=array9[i];
    }
}
console.log(max);

// 数组的倒叙
var array10 = [1,2,3,4,5];
for(var i=array10.length-1;i>=0;i--){
    console.log(array10[i]);
}

// 去掉数组中的0
var array11 = [1,0,3,0,5];
var newArray11 = [];
for(var i=0;i<array11.length;i++){
    if(array11[i] != 0){ 
        newArray11[newArray11.length] = array11[i];
    }
}
console.log(newArray11);

// 冒泡排序:把所有数据按照一定顺序进行排序(从大到小,从小到大)
var arr = new Array(3,36,2,47,42,436,54);
for (var i=0;i<arr.length-1;i++) {
    for(var j=0;j<arr.length-1-i;j++){
        if(arr[j]>arr[j+1]){
            var tame = arr[j];
            arr[j] = arr[j+1];
            arr[j+1] = tame;
        }
    }
}
console.log(arr);

 函数(function)

/*
函数:将重复的代码进行封装,在需要的时候进行调用

定义函数:
function 函数名(){
    函数体;
}
调用函数:
函数名();

函数参数:
定义函数的时候,函数名后面的小括号里的变量就是参数
function 函数名(x,y){
    函数体;
}

形参:定义函数时小括号里面的参数
function 函数名(x,y){
    函数体;
}
实参:调用函数时小括号里面的参数
函数名(x,y);

函数的返回值:
在函数内部有return关键字并且关键字后面有内容,那么这个内容就是返回值
在调用的时候,如果需要返回值,就定义变量接收就行了
function 函数名(){
    return 520;
}
var fun = 函数名();//此时fun变量的值就是函数返回的值

无参数无返回值的函数
function xiu(){
    console.log("修抗");
}
无参数有返回值的函数
function xiu(){
    return "修抗";
}
有参数无返回值的函数
function xiu(x,y){
    console.log(x+y);
}
有参数有返回值的函数
function xiu(x,y){
    return x+y;
}

命名函数:函数有名字
匿名函数:函数没有名字

定义匿名函数:
function(){
    函数体;
}
匿名函数不能直接调用,需要赋值给变量才能调用(这就是函数表达式)
var fun = function(){
    函数体;
}
fun();//在变量后面添加小括号就可以调用匿名函数了

函数的自调用:
(匿名函数)();
(function(){alert("修抗");})();

函数做为参数使用:
如果一个函数作为参数使用,那么这个参数(函数)就是回调函数
function xiu(){
    kang();
}
function kang(){
    函数体;
}

函数做为返回值使用:
function xiu(){
    return function(){
        函数体;
    };
}
var kang = xiu();//将xiu的返回值赋值给变量,现在变量就是一个函数
kang();//直接加小括号掉用就行了

注意:
函数一旦重名,就会把前面的函数覆盖
匿名函数就不会出现重名的问题
形参和实参的个数可以不一致
函数没有明确返回值,但调用的时候接收了,那么接收的值为undefined
没有明确返回值:没有return或者return后面没有跟任何内容
return后面的代码不会执行
函数也有数据类型:function类型
 */

函数中的多少个参数

function f1(x,y){
    //获取的函数的名字,只读
    console.log(f1.name);
    // 获取实参的个数
    console.log(f1.arguments.length);
    // 获取形参的个数
    console.log(f1.length);
    // 调用者,如果该函数被其他函数调用,那么该属性就输出其他函数的源码
    console.log(f1.caller);
}
f1(1,2);

 sort()

// sort()对数组的元素进行排序,并返回数组
var arr = ["dfg","dgh","dsgar"];
arr.sort(function(x,y){
    if(x>y){
        return 1;
    }else if(x==y){
        return 0;
    }else {
        return -1;
    }
});
console.log(arr);

闭包

/*
闭包的概念:
在函数A中有一个函数或者对象,该函数或者对象可以访问函数A中定义的变量或者数据,此时形成了闭包
闭包的模式:
函数模式的闭包,对象模式的闭包
闭包的作用:
缓存数据,延长作用域链
闭包的优点缺点:
优点:可以缓存数据,缺点:缓存数据的同时不能释放空间
局部变量是在函数中,函数使用结束后,局部变量就会被自动释放
闭包后,里面的局部变量的使用作用域就会被延长,不会被释放
 */
// 函数模式的闭包:在一个函数中有一个函数
function f1(){
    var num = 10;
    function f2(){
        console.log(num);
    }
    f2();
}
f1();
// 对象模式的闭包:在一个函数中有一个对象
function f3(){
    var num = 3;
    var obj = {age:num};
    console.log(obj.age);
}
f3();

// 列子:
function person(){
    var num = 1;
    return function(){
        num++;
        console.log(num);
    }
}
var per = person();
per();//2
per();//3
per();//4

沙箱

作用域

/*
局部变量:在函数内部定义的变量叫局部变量,只能在函数内部才能使用
全局变量:除了函数以外在其他任意位置定义的变量叫全局变量,可以在页面任意位置使用
隐式全局变量:声明变量的时候没有var就是隐式全局变量(可以在页面任意位置使用)

局部作用域:局部变量的使用范围
全局作用域:全局变量的使用范围
块级作用域:大括号里面定义的变量只能在当前大括号里面使用,而js不支持块级作用域(函数除外)

注意:
定义全局变量,只要页面不关闭就会一直占空间,消耗内存(就是卡),只有在页面隔壁的时候才会释放空间
定义局部变量,就只有在调用的时候占空间,调用完后就会释放空间(所以尽量使用局部变量)
全局变量不能被删除而隐式全局变量可以被删除,删除变量(delete 变量名;)

作用域链:
var sum = 0;
function f1(){
    var sum = 1;
    f2();
    function f2(){
        var sum = 2;
        f3();
        function f3(){
            var sum = 3;
            alert(sum);
        }
    }
}
如果当前没有变量就会去上一级找变量,没有继续去上一级,直到全局变量,这就是作用域链
 */

预解析

// 预解析:提前解析代码

// 提前解析变量
console.log(sum);//输出undefined
var sum = 0;
/*
理解:浏览器帮我们做的事,浏览器将声明变量提前了,但没有把赋值提前
var sum;
console.log(sum);//因为声明变量没有赋值,所以就是undefined
sum = 0;
 */

// 提前解析函数
xiu();
function xiu(){
    console.log("爱心");
}
/*
理解:浏览器帮我们做的事,浏览器将声明的函数提前了
function xiu(){
    console.log("爱心");
}
xiu();
 */

// 同时解析函数和变量
kang();
function kang(){
    console.log(str);
}
var str = "埃辛";
/*
理解:浏览器帮我们做的事,浏览器先将声明的变量提前然后在将声明的函数提前
var str;
function kang(){
    console.log(str);
}
kang();
str = "埃辛";
 */

函数注脚现身的标题

/*
函数的声明
function f1(){}

函数表达式
var f1 = function(){};
 */
if(true){
    function f1(){
        console.log("true");
    }
}else {
    function f1(){
        console.log("false");
    }
}
f1();
// 在IE10及之前输出的结果都是false,因为会把函数的声明提前
// 解决办法就是使用函数表达式,函数表达式不会被提前
 var f2;
 if(true){
    f2 = function(){
        console.log("true");
    }
}else {
    f2 = function(){
        console.log("false");
    }
}
f2();

创造对象

/*
编程思想:
把一些生活中的经验融入到程序中

面向过程:
每件事的具体过程要知道,注重的是过程

面向对象:
所有的事都用对象来做,注重的是结果

面向对象的基本特性:
封装,继承,多态(抽象性)

对象的特征:
有属性或者方法

面向对象的编程思想:
根据需求,找出相关的对象,总结对象的特征和行为,把特征变成属性,行为变成方法,然后定义构造函数,实例化对象,通过对象调用属性或者方法,完成对应的需求,这就是编程思想

js不是面向对象的语言,但是可以模拟面向对象的思想
js是一门基于对象的语言
 */

// 第一种方式创建对象:调用系统自带的构造函数 new Object()
var obj = new Object();
obj.name = "修抗"; //添加属性1
obj.sex = "男"; //添加属性2
obj.xiu = function(){ //添加方法1
    console.log("方法1");
}
obj.kang = function(){ //添加方法2
    console.log("方法2");
}
// 调用属性的两种方式
console.log(obj.name); //对象.属性
console.log(obj["sex"]); //对象["属性"]
// 调用方法的两种方式
obj.xiu(); //对象.方法名()
obj["kang"](); //对象["方法名"]()

// 第二种方式创建对象:自定义一个构造函数,然后在创建对象
// 创建自定义构造函数,构造函数与函数的区别在于首字母是否大写
function Person(name,age){
    //添加属性
    this.name = name;
    this.age = age;
    //添加方法
    this.type = function(){
        console.log("我叫"+this.name+",今年"+this.age+"岁");
    };
}
//调用自定义的构造函数创建对象,同时对属性进行初始化(实例化对象)
var obj2 = new Person("修抗",24);
// 调用属性和方法
console.log(obj2.name);
obj2.type();

// 第三种方式创建对象:工厂模式创建对象
// 把创建对象的代码放在函数中,返回值就是这个对象,
function createObject(name,age){
    var obj3 = new Object();
    obj3.name = name;
    obj3.age = age;
    obj3.xiu = function(){
        console.log("我叫"+this.name+",今年"+this.age+"岁");
    }
    return obj3;
}
var kang = createObject("修抗",20);
kang.xiu();

// 第四种方式创建对象:字面量创建对象
// 方式1:
var obj4 = {};
obj4.name = "修抗";// 添加属性
obj4.type = function(){// 添加方法
    alert("方法");
}
// 方式2:
var obj5 = {
    name: "修抗",
    type:function(){
        alert("方法2")
    }
};

遍历对象的品质和值

本文由亚洲必赢登录发布于亚洲必赢app,转载请注明出处:Vue中结合clipboard完成复制功用,代码笔记

关键词:

上一篇:没有了

下一篇:Javascript的可怜捕获机制,手提式有线电话机端的