文章目录
简介NPM介绍本地应用Vue指令网络应用axios天气案例音乐播放器简介
VUE 官方文档观看进度
vue实例
对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏：
<script src="/npm/vue@2.6.12"></script>
请确认了解不同构建版本并在你发布的站点中使用生产环境版本，把 vue.js 换成 vue.min.js。这是一个更小的构建，可以带来比开发环境下更快的速度体验。
unpkg
/vue/dist/vue.js
NPM
在用 Vue 构建大型应用时推荐使用 NPM 安装。NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。
# 最新稳定版$ npm install vue
介绍
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
本地应用
Vue指令
网络应用
axios 网络请求库
axios+vue 集合vue一起
axios
导包<script src="/axios/dist/axios.min.js"></script>
天气案例
<!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>Document</title><style>.wrap {position: fixed;left: 0;top: 0;width: 100%;height: 100%;background:url(/image_search/src=http%3A%2F%%2Fwallpaper%2F-12-31%2F5e0ac45db698f.jpg&refer=http%3A%2F%&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1623081831&t=1b8c3d0748795e47323dd6cc38c0b36e);}.search {width: 640px;margin: 100px auto 0;}.logo img {display: block;margin: 0 auto;}.form_group {width: 640px;height: 40px;margin-top: 45px;}.input_txt {width: 538px;height: 38px;padding: 0px;float: left;border: 1px solid #41a1cb;outline: none;text-indent: 10px;}.input_sub {width: 100px;height: 40px;border: 0px;float: left;background-color: #41a1cb;color: #fff;font-size: 16px;outline: none;cursor: pointer;}.hotkey {margin: 3px 0 0 2px;}.hotkey a {text-decoration: none;font-size: 14px;color: #666;padding-right: 15px;}.weather_list{height: 200px;text-align: center;margin-top: 50px;font-size: 0px;overflow: hidden;position: relative;}.weather_list li {display: inline-block;width: 140px;height: 200px;padding: 0 10px;}.info_date {width: 100%;height: 40px;line-height: 40px;color: #999;font-size: 14px;left: 0px;bottom: 0px;margin-top: 15px;}.info_type span {color: #fda252;font-size: 30px;line-height: 80px;}.info_temp {font-size: 14px;color: #fda252;}.info_temp b {font-size: 13px;}.tem .iconfont {font-size: 50px;}</style></head><body><div class="wrap" id="app"><div class="search"><div class="logo"><img src="/bfs/feed-admin/10641bbc5189591221c00958f3458f33798c7caa.png"alt=""></div><div class="form_group"><input type="text" v-model="city" @keyup.enter="searchWeather" class="input_txt" placeholder="请输入查询的天气"autofocus="autofocus"><button class="input_sub">搜索</button></div><div class="hotkey"><a href="javascript:;" @click="changecity('北京')">北京</a><a href="javascript:;" @click="changecity('上海')">上海</a><a href="javascript:;" @click="changecity('广州')">广州</a><a href="javascript:;" @click="changecity('武汉')">武汉</a></div></div><ul class="weather_list"><li v-for="item in weatherList"><div class="info_type"><span class="iconfont">{{item.type}}</span></div><div class="info_temp"><b>{{item.low}}</b>~<b>{{item.high}}</b></div><div class="info_date"><span>{{item.date}}</span></div></li></ul></div><script src="/npm/vue/dist/vue.js"></script><script src="/axios/dist/axios.min.js"></script><script>var app = new Vue({el: "#app",data: {city: '',weatherList: []},methods: {searchWeather: function () {// console.log('天气查询');// console.log(this.city);var that = this;axios.get('/weather_mini?city='+ this.city).then(function (response) {console.log(response.data.data.forecast);that.weatherList = response.data.data.forecast}).catch(function (err) { })},changecity:function(city){this.city = city;this.searchWeather();}}})</script></body></html>
