orangecloudy-CSDN博客

原创 Vue学习记录-slot的使用

slot的使用基本使用<div id="app"> <cpn><button>按钮</button></cpn> <cpn><span>a</span></cpn> <cpn></cpn> </div> <template id="cpn"> <div> <h2>组件&lt

2020-07-18 12:37:13 226 1

原创 Vue学习-父子组件访问

父子组件访问1.父访问子$children$refs<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head>&l

2020-07-18 11:29:08 189

原创 Vue学习-父子组件通信

父子组件通信1. 父传子props<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> &l

2020-07-17 17:27:50 191

原创 Vue学习记录-组件data必须是函数

<div id="app"> <cpn></cpn> <cpn></cpn> </div> <script src="../js/vue.js"> </script>  <template id="cpn"> <div> <h1>{{title}}</h1> <

2020-06-17 21:13:40 157

原创 Vue学习记录-显示“缩略语列表”

2020年6月11日<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Explaining the Document Object Model</title> <lin

2020-06-11 11:30:09 204

2020-06-06 09:43:18 477

原创 Vue学习记录-复习js，图片库案例

2020.6.2<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>图片库</title> <link rel="stylesheet" href="layout.css

2020-06-02 21:09:29 133

原创 Vue学习记录-Vue组件模板分离

2020年5月22日 <div id="app"> <cpn1></cpn1> <cpn1></cpn1> <cpn2></cpn2> <cpn2></cpn2> </div> <script type="text/x-tempalte" id="cpn1"> <div> <h2&g

2020-05-22 22:02:32 184

原创 Vue学习记录-Vue注册组件语法糖

5月20日 <div id="app"> <cpn1></cpn1> <cpn2></cpn2> </div> <script src="../js/vue.js"> </script> <script> // 全局组件注册的语法糖 Vue.component('cpn1',{ template:` <div&g

2020-05-20 21:58:38 258

原创 Vue学习记录-Vue组件基本使用。父子组件

2020年5月13日<div id="app"> <my-cpn></my-cpn> <my-cpn></my-cpn> </div> <script src="../js/vue.js"> </script> <script> //ES6 // `ck // sfa` // 1.创建组件构造器对象 const cpnC

2020-05-13 23:33:01 125

原创 Vue学习记录-v-model

2020年5月12日<div id="app">  <input type="text" :value="message" @input="valueChange">  <input type="text" :value="message" @input="message

2020-05-12 22:33:51 154

原创 Vue学习记录-js高阶函数

2020年5月11日// 函数式编程// filter/map/reduce// filter中的回调函数有一个要求：必须返回一个boolean值//true:当返回true时，函数内部会自动将这次回调的n加入到新的数组中//false：当返回false时，函数内部会过滤带哦这次的nconst nums = [10,20,111,222,444,40,50];//1.filterlet newNums = nums.filter(function(n){ return n &l

2020-05-11 22:19:02 130

原创 Vue学习记录-vue购物车案例

2020年5月10日<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" h

2020-05-10 20:59:40 382

原创 Vue学习记录-li点击赋class

<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .active{ col...

2020-04-30 17:42:26 194

原创 Vue学习记录-数组响应式

<div id="app"> <ul> <li v-for="i in letters" :key="i">{{i}}</li> </ul> </div> <script src="js/vue.js"> </script> <script> co...

2020-04-26 11:12:54 156

原创 Vue学习记录-v-show,v-for遍历数组，对象，绑定key

<div id="app">  <h2 v-if="isShow">{{message}}</h2>  <h2 v...

2020-04-24 11:53:35 777

原创 Vue学习记录-v-if,v-else,登录切换

<body> <div id="app"> <h2 v-if="isShow">{{message}}</h2> <h1 v-else>world</h1> </div> <script src="js/vue.js"> </script> <scri...

2020-04-23 02:29:10 286

原创 Vue学习记录-v-on参数传递，修饰符

<div id="app"> {{message}}   <button @click="btn1Click()">1</button> <button @click="btn1Click">1</button> <...

2020-04-20 03:29:35 149

原创 Vue学习记录-const，ES6对象字面量的增强写法

// 1.const修饰的标识符被赋值后，不能修改 // 2.使用const定义标识符时，必须进行赋值 // 3.常量的含义时指向的对象不能修改，但可以改变对象内部但属性 //1.属性的增强写法 const name = 'why'; const age = 18; // ES5 // const obj = { // ...

2020-04-14 04:30:31 279

原创 Vue学习记录-js的let

//计算属性当返回值不变时，只运算一次，而methods运算多次 //ES5之前，var并不是局部变量 //相当于for,if是没有自己的块级作用域 //而function有 //所以需要借助闭包 //ES6中加入了let局部变量，相当于for/if有了块级作用域...

2020-04-13 05:26:56 133

原创 Vue学习记录-计算属性setter,getter

<div id="app"> <h2>{{fullName}}</h2> </div> <script src="js/vue.js"> </script> <script> const app = new Vue({ el: '#app', ...

2020-04-12 05:12:14 104

原创 Vue学习记录-计算属性

<body> <div id="app"> <h2>{{firstName+' '+lastName}}</h2> <h2>{{getfullName()}}</h2> <h2>{{fullName}}</h2> <h2>总价格:{{totalPrice...

2020-04-11 04:50:11 108

原创 Vue学习记录-v-bind绑定style

<div id="app"> <h2 :style="{fontSize: finalSize + 'px',color: finalcolor}">{{message}}</h2> </div> <script src="js/vue.js"> </script> <script> ...

2020-04-10 15:58:26 95

原创 Vue学习记录-v-bind绑定class

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</tit...

2020-04-09 01:43:17 92

原创 Vue学习记录-基本插值，v-bind初步

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</tit...

2020-04-07 23:02:55 99

原创 Vue学习记录-Mustache

Mustache语法：{{}} <div id="app"> <h2> {{firstName+lastName}} </h2> <h2> {{counter*2}} </h2> </div> <script src="js/vue.js"> </script...

2020-04-07 01:04:21 85

原创 Vue学习记录-初步了解Vue

总结：初步了解了vue.jsjs忘的有点多，先学着。ide：vscodevscode插件：https://juejin.im/post/5db66672f265da4d0e009aad响应式：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&gt...

2020-04-04 23:42:19 101

原创 577day(helloworld.js)

《2019年5月4日》【连续 576天】标题：helloworld.js；内容：var foo = 'hello nodejs'console.log(foo)

2019-05-04 21:42:33 110

原创 576day(认识canvas的转换.html)

《2019年5月4日》【连续 576天】标题：认识canvas的转换.html；内容：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> ...

2019-05-04 01:02:38 296

原创 575day(方向键控制的行走的小人.html)

《2019年5月3日》【连续 575天】标题：方向键控制的行走的小人.html；内容：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> ...

2019-05-03 01:26:05 252

原创 574day(帧动画.html)

《2019年5月1日》【连续 574天】标题：帧动画.html；内容：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> canva...

2019-05-01 23:12:59 113

原创 573day(绘制图片.html)

《2019年4月30日》【连续 573天】标题：绘制图片.html；内容： var myCanvas = document.querySelector('canvas'); var ctx = myCanvas.getContext('2d'); /*1.加载图片到内存即可*/ /*var img = document.createElement('img')...

2019-04-30 23:43:23 157

原创 572day(绘制饼状图3.html)

《2019年4月30日》【连续 572天】标题：绘制饼状图3.html；内容：PieChart.prototype.drawDesc = function (index,title) { /*绘制说明*/ /*矩形的大小*/ /*距离上和左边的间距*/ /*矩形之间的间距*/ this.ctx.fillRe...

2019-04-30 00:23:44 107

原创 571day(绘制饼状图2.html)

《2019年4月28日》【连续 571天】标题：绘制饼状图2.html；内容： PieChart.prototype.drawTitle = function (startAngle, angle ,color , title) { /*1.确定伸出去的线通过圆心点通过伸出去的点确定这个线*/ /*2.确定伸出去的点需要确定伸出去的线的长度*/...

2019-04-28 23:04:50 98

原创 570day(绘制饼状图1.html)

《2019年4月28日》【连续 570天】标题：绘制饼状图1.html；内容：/*var myCanvas = document.querySelector('canvas'); var ctx = myCanvas.getContext('2d');*/ /*1.绘制饼状态图*/ /*1.1 根据数据绘制一个饼图*/ /*1.2 绘制标题从扇形的弧...

2019-04-28 00:19:09 179

原创 569day(绘制在画布中心的一段文字.html)

《2019年4月27日》【连续 569天】标题：绘制在画布中心的一段文字.html；内容：var myCanvas = document.querySelector('canvas'); var ctx = myCanvas.getContext('2d'); /*1.在画布的中心绘制一段文字*/ /*2.申明一段文字*/ var str = '您吃-...

2019-04-27 00:01:16 126

原创 568day(绘制一个根据数据的饼图.html)

《2019年4月26日》【连续 568天】标题：绘制一个根据数据的饼图.html；内容：var myCanvas = document.querySelector('canvas'); var ctx = myCanvas.getContext('2d'); /*1.根据37期的年龄分布绘制饼图*/ /*2.准备统计的数据*/ /*15-20岁 6个*...

2019-04-26 00:06:46 397

原创 566day(绘制一个右上角的四分之一的扇形.html)

《2019年4月24日》【连续 566天】标题：绘制一个右上角的四分之一的扇形.html；内容： var myCanvas = document.querySelector('canvas'); var ctx = myCanvas.getContext('2d'); /*在中心位置画一个半径150px的圆弧右上角扇形边填充 */ var w = c...

2019-04-23 22:25:45 228

原创 567day(绘制一个圆分成六等分颜色随机.html)

《2019年4月25日》【连续 567天】标题：绘制一个圆分成六等分颜色随机.html；内容：var myCanvas = document.querySelector('canvas'); var ctx = myCanvas.getContext('2d'); var w = ctx.canvas.width; var h = ctx.canvas.hei...

2019-04-22 22:05:29 930

原创 562day(折线图.html)

《2019年4月19日》【连续 562天】标题：折线图.html；内容： /*1.构造函数*/ var LineChart = function (ctx) { /*获取绘图工具*/ this.ctx = ctx || document.querySelector('canvas').getContext('2d'); /*画布...

2019-04-22 22:03:29 160

空空如也

空空如也