前端VUE的初识
dream_uping
今天也是努力的一天
展开
-
vue的走马灯示例
视频:https://www.bilibili.com/video/BV11s411A7h6?p=10思路:读取列表前一位,赋值为start。再取出第一位之后的全部!新的列表拼接成=end+start即可! // substring(start,stop) // start 必需。一个非负的整数,规定要提取...原创 2020-05-01 22:05:10 · 1549 阅读 · 3 评论 -
Failed at the node-sass@4.14.0 postinstall script. npm ERR! This is probably not a problem with npm
直接在当前目录下进行node-sass 的数据源没设置:npm config set sass_binary_site=https://npm.taobao.org/mirrors/node-sassnpm ERR! code ELIFECYCLEnpm ERR! errno 1npm ERR! node-sass@4.14.0 postinstall: `node scripts...原创 2020-05-01 16:53:42 · 3317 阅读 · 6 评论 -
安装node.js 附带node.js以及npm初步认识 设置淘宝/npm镜像 命令
1,安装:下载地址:https://nodejs.org/en/download/0积分:https://download.csdn.net/download/weixin_42859280/12379244教程:https://www.cnblogs.com/qdwz/p/10820554.html配置淘宝源:更新npm版本,查看、设置淘宝/npm镜像 命令npm co...原创 2020-05-01 13:35:15 · 323 阅读 · 2 评论 -
故对于回调函数来说,在其内部使用 this 是不把稳的做法,解决方案可以在其调用时使用 call / apply / bind 显示绑定。
参考:https://blog.csdn.net/swpu_Leo/article/details/84844992原创 2020-05-01 11:03:00 · 269 阅读 · 2 评论 -
网络应用 axIos +vue的应用
◆axios回调函数中的this已经改变,无法访问到data中数据◆把this保存起来,回调函数中直接使用保存的this即可◆和本地应用的最大区别就是改变了数据来源就是,网络接口获取数据。再配合vue实现对数据的处理!结果1,初始:2,点击获取:代码:<!DOCTYPE html><html lang="en"><hea...原创 2020-04-30 13:24:49 · 321 阅读 · 1 评论 -
网络应用 axIos的基本使用
◆axios必须先导入才可以使用◆使用get或post方法即可发送对应的请求◆then方法中的回调函数会在请求成功或失败时触发◆通过回调函数的形参可以获取响应内容,或错误信息结果:1,原始:2,点击get:3,点击post:测试错误:代码:<!DOCTYPE html><html lang="en"><h...原创 2020-04-30 12:07:45 · 312 阅读 · 1 评论 -
本地应用 v-model
◆v-model指令的作用是便捷的设置和获取表单元素的值< >绑定的数据会和表单元素值相关联◆绑定的数据←--→表单元素的值结果:1,原始:2,输入数值测试实时更新:3,输入数据回车测试:4,点击按钮:代码:<!DOCTYPE html><html lang="en"><head>...原创 2020-04-27 12:16:52 · 446 阅读 · 3 评论 -
本地应用 v-on补充
◆事件绑定的方法写成函数调用的形式,可以传入自定义参数◆定义方法时需要定义形参来接收传入的实参◆事件的后面跟上.修饰符可以对事件进行限制◆.enter可以限制触发的按键为回车◆事件修饰符有多种结果:1,原始2,触发点击事件:3,输入框。测试:代码:<!DOCTYPE html><html lang="en"><...原创 2020-04-27 11:54:27 · 355 阅读 · 4 评论 -
本地应用 v-for 指令
◆v-for指令的作用是:根据数据生成列表结构◆数组经常和v-for结合使用◆语法是( item,index) in数据◆item和index可以结合其他指令一起使用◆数组长度的更新会同步到页面上,是响应式的结果:1,初始化:2,点击添加数据:3,点击移除数据:...原创 2020-04-27 09:52:19 · 381 阅读 · 2 评论 -
VUE的本地应用-V- bind
◆v-bind指令的作用是:为元素绑定属性◆完整写法是v-bind:属性名◆简写的话可以直接省略v-bind,只保留:属性名◆需要动态的增删class建议使用对象的方式结果:1,原始保存:2,点击下面的小鸟之后:...原创 2020-04-26 21:37:20 · 372 阅读 · 11 评论 -
VUE的本地应用-V- if
v-if:直接操作的是DOM元素。v-show操作的是display。◆v-if指令的作用是:根据表达式的真假切换元素的显示状态◆本质是通过操纵dom元素来切换显示状态◆表达式的值为true,元素存在于dom树中,为false,从dom树中移除◆频繁的切换v-show,反之使用v-if,前者的切换消耗小结果:1,原始的没有显示的时候:2,点击显示出来:代码...原创 2020-04-26 20:46:22 · 870 阅读 · 11 评论 -
VUE的本地应用-V- show
◆v-show指令的作用是:根据真假切换元素的显示状态◆原理是修改元素的display,实现显示隐藏◆指令后面的内容最终都会解析为布尔值◆值为true元素显示,值为false元素隐藏结果:1,原始图:2,点击年龄加一:3,点击切换状态图:代码:<!DOCTYPE html><html lang="en"><h...原创 2020-04-26 15:15:32 · 348 阅读 · 4 评论 -
VUE计数器小示例
1. data中定义数据:比如num2. methods中添加两个方法:比如add(递增),sub(递减)3.使用v-text将num设置给span标签4.使用v-on将add,sub分别绑定给+,按钮5.累加的逻辑:小于10累加,否则提示6.递减的逻辑:大于0递减,否则提示结果:1,点击2,最大3,最小代码:<!DOCTYPE ht...原创 2020-04-26 12:15:02 · 1041 阅读 · 1 评论 -
VUE的本地应用-V- on
v-On:◆v-on指令的作用是:为元素绑定事件◆事件名不需要写on◆指令可以简写为@◆绑定的方法定 义在methods属性中◆方法内部通过this关键字可以访问定义在data中数据结果:1,原始:2,点击箭头处:3,点击小醮鱼:【VUE的元素会让这个变长!】代码:<!DOCTYPE html><html lang="en"&...原创 2020-04-26 11:48:25 · 385 阅读 · 2 评论 -
VUE的本地应用-V- html
◆v-html指令的作用是:设置元素的innerHTML◆内容中有htm|结构会被解析为标签◆v-text指令无论内容是什么,只会解析为文本◆解析文本使用v-text,需要解析htm|结构使用v-html结果:代码:<!DOCTYPE html><html lang="en"><head> <meta charset...原创 2020-04-26 10:41:06 · 701 阅读 · 1 评论 -
VUE的本地应用-V-TEXT
◆通过Vue实现常见的网页效果◆学习Vue指令,以案例巩固知识点◆Vue指令指的是,以v-开头的- -组特殊语法◆v-text指令的作用是:设置标签的内容(textContent)◆默认写法会替换全部内容,使用差值表达式{}可以替换指定内容◆内部支持写表达式结果:代码:<!DOCTYPE html><html lang="en"><he...原创 2020-04-26 10:30:58 · 412 阅读 · 2 评论 -
VUE的data数据对象
data:数据对象:◆Vue中用到的数据定义在data中◆data中可以写复杂类型的数据◆渲染复杂类型数据时,遵守js的语法即可结果:代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewpor...原创 2020-04-26 09:47:43 · 2859 阅读 · 3 评论 -
VUE.JS优势,初识。框架以及库的区别
1,层层的技术更新换代。提高开发效率的发展历程:原生JS -> Jquery之类的类库->前端模板引擎-> Angular.js /Vue.js(能够帮助我们减少不必要的DOM操作;提高渲染效率;双向数据绑定的概念[通过框架提供的指令,我们前端程序员只需要关心数据的业务逻辑,不再关心DOM是如何渲染的了] )在Vue中,一个核心的概念,就是让用户不再操作DOM元素,...原创 2020-04-25 17:46:40 · 576 阅读 · 0 评论 -
VSCODE安装必要的插件实现浏览器中打开,以及显示网址
1,实现在浏览器中打开:安装:open in browser2,实现浏览器中打开。并且附带网址:安装插件:live server原创 2020-04-26 09:07:47 · 15647 阅读 · 2 评论 -
我的第一个VUE示例
浏览器中打开显示网址:https://blog.csdn.net/weixin_42859280/article/details/105761592VUE就是好用:代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name...原创 2020-04-26 09:44:56 · 420 阅读 · 1 评论