前端入门
文章平均质量分 53
grt要一直一直努力呀
好好工作 好好生活 好好爱人
展开
-
emmet语法
emmet语法生成html标签生成标签,直接输入标签名回车,按enter键即可。如果想要生成多个相同标签,可以写div*3如果有包含关系,可以使用大于号> 常见的有ul>li。兄弟关系使用加号+如果想生成带有类名的,写.demo即可。带有id的,用#id即可。前面加上指定标签。例如:p.demo。则会生成class为demo的p标签。如果想要在生成的标签内部写内容可以使用{ }。例如div{hello world}emmet语法快速生成css样式...原创 2021-09-19 23:25:28 · 52 阅读 · 0 评论 -
一些学习网站
全部教程RUNOOBw3schoolvue官网文档vueMySQL教程MySQLbootstrap中文网bootstrapjQueryjquery原创 2021-09-19 08:51:38 · 93 阅读 · 0 评论 -
vue自定义指令
vue官方除了提供了v-text、v-for、v-model等常用的指令。除此之外还允许开发者自定义指令。自定义指令分为两类:私有自定义指令和全局自定义指令。私有自定义指令在每个vue组件中,可以在directives节点下声明私有自定义指令。...原创 2021-09-17 17:20:42 · 98 阅读 · 0 评论 -
vue路由
文章目录概述前端路由的工作方式vue-router概述单页面应用(SPA)与前端路由在前端中,路由指的是hash地址与组件(页面)的对应关系。url中,#之后都是hash地址。前端路由的工作方式用户点击了页面上的路由链接。导致了url地址栏中的Hash值发生了变化。前端路由监听到了Hash地址发生了变化。前端路由把当前Hash地址对应的组件渲染到浏览器中。vue-router在vue项目中, 轻松管理SPA项目中组件的切换。vue-router安装和配置的步骤:安装vue原创 2021-09-16 20:30:43 · 100 阅读 · 0 评论 -
vue计算属性和axios
axios是一个专注于网络请求的库。使用axios需要先导入JS脚本。 axios({ // 请求方式 method: 'GET', // 请求的地址 url: 'http://www.liulongbin.top:3006/api/getbooks', // URL 中的查询参数 params: { id: 1 } }).then(function (result) { console.log(resu原创 2021-09-12 21:42:15 · 381 阅读 · 0 评论 -
vue侦听器
可以用于监视数据的变化,来执行一定的函数方法。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"原创 2021-09-12 18:33:14 · 64 阅读 · 0 评论 -
vue过滤器
在vue2中还可以使用,vue3已不再使用。作用:文本的格式化。可以用于插值表达式和v-bind属性绑定。例如:< p >{{message | capitalize}} < p > 意思为将message作为参数,传给capitalize,所以在...原创 2021-09-12 16:51:44 · 78 阅读 · 0 评论 -
vue-cli组件
概述组件化开发是指:根据封装的思想,将页面上可重用的UI结构封装成组件,从而方便项目的开发和维护。vue是一个支持组件化开发的前端框架。组件的后缀名是.vue每一个组件都是由三部分组成,分别是template 组件的模板UI结构script 组件的JavaScript行为。一些数据(data)和方法(methods)都定义到script中。style 组件的样式<template> <div class="test_box"> <h3原创 2021-08-22 09:31:09 · 189 阅读 · 0 评论 -
vue-cli创建项目
单页面应用程序(SPA):指一个web网站中只有一个html页面,所有的功能与交互都是在这一个页面内完成的。像这样一个页面,只有一个index.html。vue-cli是vue.js开发的标准工具。简化了程序员基于webpack创建工程化vue项目的过程。vue-cli是npm上的一个全局包,使用npm install安装。npm install -g @vue/cli查看vue-cli的版本号vue -V创建vue项目vue create 项目名称PS:指定路径方便进入终端的方法 :点原创 2021-08-21 21:24:17 · 179 阅读 · 0 评论 -
前端vue、jQuery、axios、echarts的安装方法
jQuery <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js" ></script>vue <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>axios<script src="https://unpkg.com/axios/dist/axios.min.j.原创 2021-07-25 17:37:20 · 123 阅读 · 0 评论 -
vue中的v-model绑定表单
概述在用户注册页面,经常需要大量的表单。在vue中,使用v-model指令来实现表单元素与数据的双向绑定。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U原创 2021-07-11 17:21:35 · 102 阅读 · 0 评论 -
vue组件化
将一个页面拆分成一个个小的功能块(组件),每个功能块完成属于自己这部分独立的功能,则整个页面的管理和维护就比较容易了。组件化是vue.js中的重要思想。可以开发出一个个独立可复用的小组件来构造应用。所有的应用最后都会被抽象成一个组件树。可以把已经写好的组件拿到新项目或者页面的开发中。组件使用的三个步骤:创建组件构造器注册组件使用组件组件componentvue组件化的基本使用PS:在es6里面,字符串除了可以使用单引号、双引号,还可以使用··(就是tab键上面的那个)。这种新增的情况可以原创 2021-07-11 09:33:03 · 166 阅读 · 2 评论 -
综合案例-购物车界面
index.htmlstyle.cssmain.js在真实vue开发中,会使用组件,将这三个放到一个文件中。在真实开发中,如果遇到了要显示小数位数的,可以使用在要显示的数字后面加上toFixed(2)。此外也可以使用过滤器操作。过滤器的作用实际上就是格式化。过滤器的定义在method之外。需要把需要过滤的参数传入到过滤器中filters: { showprice(price){ return price.toFixed(2).原创 2021-07-10 17:08:07 · 116 阅读 · 0 评论 -
vue中v-for遍历数组的使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Do原创 2021-07-10 15:25:52 · 247 阅读 · 0 评论 -
vue中v-show的使用
除了 v-if,v-show也是用来决定某一个元素是否在页面中显示出来。当经常需要切换某个元素的显示与隐藏时,使用v-show会更加节省性能上的开销,当只需要一次显示或隐藏时,使用v-if更合理。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial原创 2021-07-10 11:32:10 · 25794 阅读 · 0 评论 -
vue中条件判断v-if、v-else-if和v-else的使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Do原创 2021-07-10 10:54:50 · 1185 阅读 · 1 评论 -
v-on修饰符
引入<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title&g.原创 2021-07-10 09:35:20 · 47 阅读 · 0 评论 -
vue中的v-on的使用(事件监听)
在前端开发中,经常要和用户进行交互。需要监听用户发生的事件,比如点击、拖拽、键盘事件等。则需要用v-on指令。v-on基础之前练习的一个案例,计数器。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2021-07-09 21:59:12 · 124 阅读 · 0 评论 -
vue计算属性
有一些数据,需要进行一下操作,像结合什么的,再进行展示。可以使用函数方法还有一种方法是增加计算属性。就是除了data,method之外再增加一个。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2021-07-09 20:43:23 · 45 阅读 · 0 评论 -
vue中v-bind的使用
图片上的数据不是写死的,向服务器发送一个请求,服务器返回一个接收数据,包含了很多的url。需要把url动态的放到页面上显示。除了内容可以动态绑定之外,还想要一些属性也可以动态绑定,像图片、链接等。可以使用v-bind来绑定img中的src;绑定a中的href。把服务器请求来的数据,放到vue框架的data中,再在div中属性绑定。将图片写死,显示<!DOCTYPE html><html lang="en"><head> <meta原创 2021-07-09 18:00:15 · 419 阅读 · 2 评论 -
vue中的v-pre
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>D.原创 2021-07-09 11:04:11 · 90 阅读 · 0 评论 -
vue中v-text指令的显示
v-html可以把标签显示出来 ;如果要把文字显示,则需要v-text,不再用{{ }}<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Com.原创 2021-07-09 10:51:19 · 541 阅读 · 0 评论 -
vue中的v-html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>D.原创 2021-07-09 09:47:04 · 70 阅读 · 0 评论 -
vue 计数器 按按钮加以或减一
监听事件 用v-on<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &原创 2021-07-08 18:33:57 · 2036 阅读 · 0 评论 -
vue案例 展示列表
vue中列表遍历指令为v-for<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2021-07-08 17:51:23 · 208 阅读 · 0 评论 -
第一个vue程序
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>vu.原创 2021-07-08 17:30:42 · 56 阅读 · 0 评论