(HM)Vue
TraceurZzl
从入门到入土
展开
-
Vue demo:播放器
一、音乐播放器实例:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> <div align="center" style="border: 5px skyblue solid;background-color: skybl原创 2021-10-04 23:32:53 · 79 阅读 · 0 评论 -
Vue基础 第八讲笔记:axios+vue
一、axios+vue实例:注意:1、axios回调函数中的this已经改变,无法访问到data中数据。2、把this保存起来,回调函数中直接使用保存的this即可。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> <原创 2021-10-04 21:29:24 · 88 阅读 · 0 评论 -
Vue基础 第七讲笔记:axios(网络请求库)
一、axios功能强大的网络请求库步骤:1、导入axios.min.js。2、导入官网提供的 axios 在线地址。 <!-- 官网提供的 axios 在线地址 --> <script src="https://unpkg.com/axios/dist/axios.min.js"></script>注意:1、axios必须先导入才可以使用。2、使用get和post方法即可发送对应的请求。3、then方法中的回调函数会在请求成功或失败时触发。4、原创 2021-10-04 21:09:41 · 537 阅读 · 0 评论 -
Vue demo:记事本
记事本:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div align="center"> <h2>欢迎使用xxx记事本</h2> </div> <div id="app" align="center"原创 2021-10-04 18:33:51 · 81 阅读 · 0 评论 -
Vue基础 第六讲笔记:v-for、v-on补充 、v-model
一、v-for根据数据生成列表结构。注意:1、数组经常和v-for结合使用。2、语法是(item,index)in 数据3、item和index可以结合其他指令一起使用。4、数组长度的跟新会同步到页面上,是响应式的。实例:<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> <body&原创 2021-10-04 17:08:36 · 128 阅读 · 0 评论 -
Vue基础 第五讲笔记:v-show、v-if、v-bind
一、v-show根据真假切换元素的显示状态。注意:1、原理是修改元素display,实现显示隐藏。2、指令后面的内容,最终都会解释为布尔值。3、值为true元素显示,值为false元素隐藏。实例:<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <div原创 2021-10-02 23:24:56 · 323 阅读 · 0 评论 -
Vue基础 第四讲笔记:计数器
一、计数器注意:1、创建Vue实例时:el(挂载点),data(数据),methods(方法)2、v-on指令的作用是绑定事件,简写为@3、方法中通过this关键字获取data中的数据4、v-text指令的作用是:设置元素的文本值,简写为{{ }}实例:<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head原创 2021-10-02 21:44:07 · 130 阅读 · 0 评论 -
Vue基础 第三讲笔记:v-text、v-html、v-on
一、v-text指令设置标签的内容。特点:1、默认写法会替换全部内容,使用插值表达式{{ }}可以替换指定内容。2、内部支持写表达式。注意:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> {{ message }}哈哈原创 2021-10-02 15:46:08 · 451 阅读 · 0 评论 -
Vue基础 第二讲笔记:el挂载点、data数据对象
一、什么是 elel:挂载点特点:1、(Vue实例作用范围)Vue会管理el选项命中的元素及其内部的后代元素。2、可以使用其他的选择器,但是建议使用ID选择器。3、可以使用其他的双标签,不能使用HTML和BODY。el三种选择器:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Vue基础</title> </head> <原创 2021-10-02 14:53:33 · 149 阅读 · 0 评论 -
Vue基础 第一讲笔记:Hello Vue
一、什么是VueVue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。vue.js的优点是:1、vue.js可以进行组件化开发;2、vue.js可以对数据进行双向绑定;3、vue.js编写的界面效果本身就是响应式的;4、vue.js使用路由不会刷新页面。二、准备工作一般使用开发环境版本,在官网下载 Vue.js 并导入。<!-- 开发环境版本,包含了有帮助的命令行警告 --><script src="https://c原创 2021-10-02 14:25:32 · 73 阅读 · 0 评论