- 博客(28)
- 收藏
- 关注
RSS订阅原创 vue脚组件安装
安装步骤1.打开cmd全局安装（随便找个地方安装），命令：npm install -g @vue/cli注意：耐心等，不要中断下载，不要回车！2.检查是否安装成功，命令：vue --version3.若显示版本则安装成功，创建文件夹，自己命名文件，命令：vue create如：4.选择Manua-开头的文件5.选择以下文件，步骤：6.最后选择以下即可：7.用以下其中一个命令在页面访问，页面显示如下：...
2021-10-19 14:07:20
112
原创 BOM #第二天
目录一、事件绑定的方式二、事件解除三、event对象四、事件响应链五、事件代理六、停止冒泡一、事件绑定的方式1.句柄式写法 ：只能绑定一个事件处理函数<style> .box { width: 200px; height: 200px; background-color: green; } .active { background-color: red; }</style><div cl
2021-08-31 19:57:11
86
原创 BOM #第一天
目录一、窗口大小和事件二、窗口滚动距离和滚动事件三、懒加载和预加载四、盒子大小和位置五、表单方法和事件六、input事件一、窗口大小和事件1.窗口大小（1）innerWidth、innerHeight：这里的宽度和高度只是窗口可见区域的宽高,不包括菜单栏、工具栏以及滚动条等的高度。任何模式下都适合兼容性不是很好 <style> img { width: 200px; height: 200px; di...
2021-08-31 18:29:07
56
原创 DOM #第二天
目录一、操作节点二、操作class一、操作节点1.node.style：只能获取/修改行内的样式，不能够操作选择器里面的样式2.getComputedStyle(node)：获取元素当前的所有样式 <style> .box { width: 200px; height: 200px; background-color: pink } </style> <div class="box
2021-08-30 19:54:44
146
原创 JS基础 #第九天
一、Date对象1.创建一个Date对象 // 直接使用构造函数创建一个Date对象，则会封装为当前的时间 var d = new Date(); console.log(d); // Sun Aug 15 2021 14:07:192.创建一个指定的时间对象格式：年/月/日时:分:秒 var d1 = new Date("2021/8/16 11:10:30"); console.log(d1); // Mon Aug 16 2021 11:10..
2021-08-30 19:14:48
143
原创 DOM #第一天
一、事件三要素1.事件源2.事件类型3.事件处理函数【例】：随机改变背景的颜色 // 获取元素 let box = document.querySelector('.box'); // 绑定点击事件 box.onclick = function() { // 1.使用十六进制改变背景颜色 // let numRandom = Math.random().toString(16).substring(2, 8); // thi
2021-08-30 19:13:08
100
原创 JS基础 #第八天
目录一、创建数组new创建数组字面量创建数组二、数组的常用方法三、遍历数组四、函数的call()和apply()五、arguments一、创建数组new创建数组 // 创建一个数组 var arr = new Array(); // 1.使用typeof检查一个数组时，会返回Object console.log(typeof arr); // Object // 2.向数组添加元素 语法：数组[索引] = 值 索引从0开始
2021-08-15 13:41:17
73
原创 JS基础 #第七天
作用域作用域:指一个变量作用的范围,在JS中一共有两种作用域。一、全局作用域1.直接编写在script标签中的JS代码，都在全局作用域2.全局作用域在页面打开时创建，在页面关闭时销毁3.在全局作用域中有一个全局对象window，它代表的是一个浏览器的窗口，它由浏览器创建,我们可以直接使用4.全局作用域中的变量都是全局变量，在页面的任意的部分都可以访问的到5.1.在全局作用域中, 创建的变量都会作为window对象的属性保存 var a = 10; ...
2021-08-14 23:19:31
79
原创 JS基础 #第六天
一、创建函数封装到函数中的代码不会立即执行，会在函数调用的时候执行 调用函数语法，函数对象() 当调用函数时，函数中封装的代码会按照项序执行 使用typeof检查一个函数对象时，会返回function 1.使用构造函数创建函数（了解） var fun = new Function( "console.log('创建函数');" ); // 使用typeof检查一个函数对象时，会返回function console.log(t
2021-08-11 20:15:19
91
原创 JS基础 #第五天
目录一、构造函数创建对象二、基本和引用数据类型三、字面量创建对象一、构造函数创建对象1.使用new关键字调用的函数，是构造函数constructor，构造函数是专门用来创建对象的函数。 // 1.使用typeof检查一个对象时，会返回object var obj = new Object(); console.log(typeof obj); // 2.在对象中保存的值称为属性 // 向对象添加属性 语法:对象.属性名=属性值; ob
2021-08-08 17:09:46
60
原创 Js基础 #第四天
一、三元运算符三元运算符也叫条件运算符1.语法：条件表达式?语句1:语句22.执行流程：如果条件表达式为true，则执行语句1，如果条件表达式为false，则执行语句2例： // 求最大值 var a = 43; var b = 54; var max = a > b ? a : b; console.log(max); // 54...
2021-08-07 19:40:22
129
原创 JS基础 #第三天
一、运算符常见运算符及例子：运算符 类型 例子 值 加法：+ Number + Boolean 1 + true 2 Boolean + Boolean true + false 1 Number + Null 2 + null 2 Null + Boolean null + true 1 NaN + Number NaN + 1 NaN 减法：- Number - String
2021-08-01 16:51:33
69
原创 JS基础 #第二天
一、数据类型 数据类型：在js中一共有六种数据类型：String字符串；Number数值；Boolean布尔值；Null空值；Undefined未定义；Object对象。其中StringNumberBooleanNullUndefined属于基本数据类型，Object属于引用数据类型。 1.String类型（1）在JS中字符串需要使用引号引起来，使用双引号或单引号都可以，但是不能混着用...
2021-07-29 12:21:50
123
原创 v-for循环遍历
一、遍历数组value表示对象的值，key表示对象的属性，index表示对象的下标。1.遍历数组获取数组里面的元素<ul> <li v-for = "item in names">{{item}}</li></ul>2.遍历数组获取数组下标index<ul> <li v-for = "(item, index) in names">{{index + 1}}.{{item}}</...
2021-07-27 15:41:47
460
原创 JS基础 #第一天
一、js体验今天是第一天开始学习js,首先咱们来体验一下js。<script> // 在页面弹出一个内容 alert("出不出来"); // 在页面输出一个内容 document.write("从哪出来"); // 再控制台打印一个内容 console.log("我出来啦"); // js代码从上往下依次执行 </script>...
2021-07-26 22:00:42
99
原创 vue中的条件判断
目录v-if、v-else和v-else-if用户登录切换的案例v-if、v-else和v-else-ifvue中的条件判断 v-if、v-else和v-else-if与js中的if、else和else if条件语句类似。v-if的原理：v-if后面的条件为false时，对应的元素以及其子元素不会渲染。 v-else的原理：v-if后面的条件为false时，v-else对应的元素以及其子元如：用一个例子说明三者之间的应用：用户登录切换的案例运行结果：
2021-07-06 22:47:58
623
原创 事件监听v-on
目录v-on的基本使用v-on的参数问题v-on的修饰符v-on的基本使用在vue中，我们使用v-on来监听事件，比如点击、键盘事件等。v-on的简写方式：@如我们要给事件绑定一个点击事件：html:js:v-on的参数问题html：1.事件的方法定义时没有参数,那么在调用时可以加小括号()，也可以不加小括号()2.事件的方法定义时需要参数(1)在调用时没加小括号,那么执行结果为MouseEvent(2)在调用时加了小括号却没有传递参数
2021-07-06 22:29:45
104
原创 const的使用
1.const是一个定义常量的关键字，所以一旦给const修饰的标识符被赋值之后，不能修改2.在使用const定义标识符,必须进行赋值3.常量的含义是指向的对象不能修改，但是可以改变对象内部的属性．...
2021-06-28 20:45:29
213
原创 vue的计算属性(computed)
目录计算属性的使用计算属性的setter和getter计算属性和methods方法的对比计算属性的使用在模板中可以直接通过插值语法显示一些data中的数据。但是在某些情况，我们可能需要对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示。这时就可以通过计算属性的语法显示，计算属性是写在实例的computed选项中的。如 我们需要将data中的firstName和lastName结合起来显示在html中：js:html:（1）直接通过插值语法显示：（2）通过计算
2021-06-28 20:35:40
269
原创 v-bind动态绑定属性
如果我们需要动态的绑定属性，可以使用v-bind来绑定，简写方式 “:”，如 :src。我们会经常使用以对象的方式来动态绑定属性，极少使用数组的方式。我们来动态绑定一张图片试试：把图片的路径作为imgUrl属性写到data里面，然后在html中用:src动态绑定，直接传入值imgUrl即可。动态绑定classv-bind动态绑定class有两种方式：1.对象语法：以对象（{{}}）的语法动态绑定class,以键值对的形式存在：{类名：boolean}。用法一：直...
2021-06-25 18:10:08
1411
原创 用vue建立自己的模板
如果在编辑vue代码中，我们需要用到大量的重复代码，那我们可以将这些代码封装为一个模板，需要用到的时候直接调用就可以了。1.点击file2.找到preferences下面的User Snippets3.在弹出的输入框中输入html，然后点击回车键4.点击回车键之后，会弹出一个html页面，把不需要的注释删掉，留下需要的几行，在body中输入自己想要的模板，如：5.调用模板，哪个页面需要用到这个模板，我们就用prefix里面的值调用，如：5.注意：每一行都需
2021-06-23 22:03:12
922
2
原创 vue实现计数器
引入下载的vue.jscss:.jisuanqi{display:flex;border:1pxsolid#ccc;width:291px;height:50px;border-radius:5px;margin:100pxauto;}button{...
2021-06-23 21:21:22
1052
原创 vue的插值操作
目录mustache（ {{}} ）语法v-once指令v-html指令v-text指令v-pre指令v-cloak指令mustache（ {{}} ）语法1.标签内渲染完数据之后，后面还可加其他东西2.大括号内可以是表达式的形式3.一个标签可以渲染多个数据4.大括号{{}}内可进行运算运行结果：v-once指令1.该指令后面不需要跟任何表达式.2.该指令表示元素和组件(组件后面才会学习)只渲染一次，不会随着数据的改变而改变，即禁止响应式。
2021-06-23 20:58:11
174
原创 #vue列表显示 #vue的options
目录vue列表vue的optionsvue列表1.html中，使用v-for指令展示vue中的列表，item表示列表中的项，列表有几项，就会有几个li。2.数据是响应式的，当数组中的数据发生改变时，界面会自动改变。vue的options1.我们在创建Vue实例的时候，传入了一个对象options。options中可以包含哪些选项呢?详细解析:https://cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-%E6%95%B0%E6%8D%AE
2021-06-23 20:37:13
434
原创 vue安装 #第一个vue程序
目录vue安装第一个vue程序vue安装一、直接CDN引入1.对于开发阶段，你可以使用以下版本：<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>2.对于生产环境，可以使用以下版本<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>二、下载和引入将
2021-06-22 22:59:04
230
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人