Vue.js
肝JOJO
这个作者很懒,什么都没留下…
展开
-
8.Vue+axios音乐播放应用
效果如下代码如下index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <...原创 2019-12-11 21:17:16 · 940 阅读 · 3 评论 -
7.Vue+axios 天气查询应用
效果如下代码如下index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l...原创 2019-11-30 19:24:51 · 254 阅读 · 0 评论 -
6.Vue+axios
Vue结合网络数据开发应用 1.axios 基于Ajax,功能强大的网络请求库 官网提供的 axios 在线地址 <script src="https://unpkg.com/axios/dist/axios.min.js"></script> axios.get(地址?key=value&key2=...原创 2019-11-25 19:33:04 · 79 阅读 · 0 评论 -
5.Vue记事本应用
案例效果:功能实现一.新增功能 1.生成列表结构 (v-for数组) 2.获取用户输入 (v-model) 3.回车,新增数据二.删除功能 1.点击删除指定内容(v-on splice)三.统计功能 1.统计信息个数(v-text length)四.清空功能 1.点击清除所有信息(v-on)五.隐藏功能(无记事时隐藏底部统计清空) ...原创 2019-11-23 22:33:13 · 278 阅读 · 0 评论 -
4.Vue切换图片案例
要求:1.点击按钮,切换图片2.在第一张图片时,隐藏上一张,在最后一张图片时,隐藏下一张效果如下:代码: <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> window.onload=function(){ ...原创 2019-11-15 21:32:17 · 493 阅读 · 0 评论 -
3.Vue计数器案例
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> window.onload=function(){ var app = new Vue({ el:'#app', da...原创 2019-11-13 21:30:00 · 195 阅读 · 0 评论 -
2.Vue指令
本地应用 1.通过Vue实现常见的网页效果 2.学习Vue指令,以巩固知识点 3.Vue指令指的是,以v-开头的一组特殊语法Vue指令 1.v-text 设置标签的文本值(textContent),会替换所有内容 2.v-html 设置标签的innerHTML 3.v-on/@ 为元素绑定事件代码示例: <script s...原创 2019-11-13 21:28:40 · 122 阅读 · 0 评论 -
1.Vue基础
Vue简介1.Javascript框架2.简化DOM操作3.响应式数据驱动第一个Vue程序步骤: 1.导入开发版本的Vue.js 2.创建Vue实例对象,设置el属性和data属性 3.使用简介的模板语法把数据渲染到页面上el:挂载点相关 {设置Vue实例挂载(管理)的元素} 1.Vue实例的作用范围 Vue会管理el选项命中的元素及其内部的后代元...原创 2019-11-12 21:24:25 · 108 阅读 · 0 评论