current position：Home>Vue quick start (with actual small items: Notepad, weather forecast, music player)

Vue quick start (with actual small items: Notepad, weather forecast, music player)

2022-04-29 16:58:38【Bulst】

Learning path for advanced architects

List of articles

One 、 Preface

Vue ( pronunciation /vjuː/, Be similar to view) Is a progressive framework for building user interfaces .

Vue adopt MVVM Pattern , It can realize the two-way binding between view and model .
Simply speaking , When the data changes , The page will refresh automatically , When the page changes , The data will also change automatically .

Two 、Vue.js install

NPM Method （ Recommended ）

install node.js
from node.js Download and install on the official website node, The installation process is simple , Keep clicking on the next step ok 了 , Input
node -v command , see node Version of
npm -v
install cnpm
Enter... On the command line npm install -g cnpm --registry=http://registry.npm.taobao.org
install vue-cli2 Scaffolding construction tool （ It has to be installed globally ）
Running commands on the command line npm install -g vue-cli , Then wait for the installation to complete .
Is the installation successful ：vue -V

3、 ... and 、 initialization Vue project

command ：vue init webpack firstApp
After typing the command , We'll be asked a few simple options , We can fill in according to our own needs .

Project name : Project name , If you don't need to change it, just press enter . Be careful ： You can't use capital letters here , So I changed the name to vueclitest
Project description: Project description , The default is A Vue.js project, Directly enter , No need to write .
Author： author , If you have a configuration git The author of , He will read .
Install vue-router? Whether to install vue Routing plug-in for , We need to install , So choose Y
Use ESLint to lint your code? Whether to use ESLint To limit your code errors and style . We don't need input here n（ Suggest ）, If you're a large team Developer , It's better to configure .
setup unit tests with Karma + Mocha? Whether you need to install unit testing tools Karma+Mocha, We don't need , So the input n.
Setup e2e tests with Nightwatch? Whether to install e2e To conduct user behavior simulation test , We don't need , So the input n

Four 、 Project directory parsing

build： The location of the final released code .
config： Configuration path 、 Port number and other information , When we first started learning, we chose the default configuration .
node_modules：npm Various dependent modules required by the loaded project .
src： Here is the main catalog we developed （ Source code ）, Basically all the things to do are in this directory , It contains several directories and files ：
1. assets： Put some pictures ( It will be classified according to the size of the picture base64 Naming or other ways of naming ), Such as logo etc.
```
2. components： There are component files in the directory 
```
1. router/index.js： Where routing is configured
App.vue： Project entry component （ Heel component ）, We can also write components here , Instead of using components Catalog . The main function is to render the components that we define by ourselves , It's essential .
main.js ： The core document of the project （ The entrance to the whole project js） Introduce dependency package 、 Default page style, etc （ After the project runs, it will index.html Form a app.js file ）.
static： Static resource directory ( It will process the original documents ), Such as images 、 Font, etc. .
test： Initial test directory , Deleting
.XXXX file ： The configuration file .
index.html：html Single page entry page , You can add some meta Information or the same statistical code or page reset style, etc .
package.json： Project configuration information file / Version information of development package and plug-in information .（ Approximate version ）
package-lock.json： Project configuration information file / Version information of development package and plug-in information .（ Specific version ）
README.md： Project documentation .
webpack.config.js：webpack Configuration file for , example ： hold .vue The files are packaged into files that can be read by the browser .
.babelrc: It's testing es6 Syntax configuration file , example ： Restrictions on which browsers to adapt
.gitignore: Upload to the server to ignore the configuration of which files （ Like simulating local data mock Don't let him in get Submit / When the package goes online, it is ignored and can be configured here ）
.postcssrc.js: Prefix configuration （css Converted configuration ）
.editorconfig: Standardize the code , example ：root Whether to test , Whether the end of the code breaks , Indent a few spaces in front of the line …（ It is suggested to define this specification ）
.eslintrc.js: To configure eslint Rule of grammar （ In this rules Property to configure which syntax rule to invalidate ）
.eslintignore: Ignore eslint Check the syntax rules of some files in the project

If you get someone else's project or from gethub The first step of the project downloaded from the cnpm install; Download the plug-ins the project depends on , then npm run dev （npm run start） Run the project

5、 ... and 、Vue Core instruction

Vue Import

<!--  Development environment version , Contains helpful command-line warnings  -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

<!--  Production version , Size and speed are optimized  -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

1、 Interpolation expression

Instructions ：{ { }}

  <div id="app">
  	<!--  Interpolation expression to get vue Medium msg Information  -->
    <p>{
   { msg }}</p>
       {
   {message}}
      <hr>
      {
   {student}}
      <hr>
      {
   {student.name}}
      <hr>
      {
   {school[0]}}
      <hr>
      {
   {school}}
  </div>

  <script> var vm = new Vue({
       el: '#app', data: {
       message: " Hello,Vue!", student:{
       name:" Brest ", age:18 }, school:["1","2"] }, }) </script>

2、v-text

Set the text value of the label （textContent）

<body>
  <div id="app">
    <h2 v-text="message+'very good'"></h2>
    {
   {message+"very good"}}
  </div>

  <!--  Development environment version , Contains helpful command-line warnings  -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

  <script> var app = new Vue({
       el: "#app", data: {
       message: "hello, Brest ." } }) </script>
</body>

3、v-html

Tagging innerHTML, The content of html The structure is parsed as a tag

<body>
  <div id="app">
    <b v-html="con"></a>
  </div>

  <!--  Development environment version , Contains helpful command-line warnings  -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

  <script> var app = new Vue({
       el: "#app", data: {
       message: "hello, Brest .", con:"<a href='http://#'> Brest </a>" } }) </script>
</body>

4、v-on

Binding events for elements

<body>
  <div id="app">
    <input type="button" value=" single click " v-on:click="clicktest">
    <input type="button" value=" mouse " v-on:mouseenter="clicktest">
    <input type="button" value=" double-click " v-on:dblclick="clicktest">
    <input type="button" value=" Click shorthand " @click="clicktest">
    <hr>
    <h2 @click="clicktest">{
   {message}}</h2>
  </div>

  <!--  Development environment version , Contains helpful command-line warnings  -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

  <script> var app = new Vue({
       el: "#app", data: {
       message: " Brest ", count: "0" }, methods: {
       clicktest: function () {
       this.message = " Has been modified " + this.count++ } } }) </script>
</body>

Passing custom parameters , Event modifier

    <input type="button" value=" Click shorthand " @click="clicktest('Java')">
    ...
    methods: {
      clicktest: function (p1) {
        this.message = p1 + " Has been modified " + this.count++
      }

5、 Counter actual combat

<body>
  <div id="app">

    <button @click="sub">-</button>
    <span>{
   {count}}</span>
    <button @click="add">+</button>
  </div>

  <!--  Development environment version , Contains helpful command-line warnings  -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

  <script> var app = new Vue({
       el: "#app", data: {
       message: " Brest ", count: "0" }, methods: {
       add: function () {
       this.count++ }, sub:function(){
       this.count-- } } }) </script>
</body>

6、v-show

According to the truth of the expression , Toggles the display and hiding of elements

<body>
  <div id="app">
    <button @click="changee"> Brest </button>
    <h4 v-show="isShow">{
   {message}}</h4>
  </div>

  <!--  Development environment version , Contains helpful command-line warnings  -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

  <script> var app = new Vue({
       el: "#app", data: {
       message: " Brest ", isShow: false }, methods: {
       changee: function () {
       this.isShow = !this.isShow } } }) </script>
</body>

7、v-if

According to the truth of the expression , Toggles the display and hiding of elements （ operation dom Elements ）

<body>
  <div id="app">
    <button @click="changee"> Brest </button>
    <h4 v-if="isIf">{
   {message}}</h4>
  </div>

  <!--  Development environment version , Contains helpful command-line warnings  -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

  <script> var app = new Vue({
       el: "#app", data: {
       message: " Brest ", isIf: false }, methods: {
       changee: function () {
       this.isIf = !this.isIf } } }) </script>
</body>

8、v-bind

Set element properties

<body>
  <div id="app">
    <button @click="changee"> Brest </button>
    <img v-if="isIf" v-bind:src="mysrc">
  </div>

  <!--  Development environment version , Contains helpful command-line warnings  -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

  <script> var app = new Vue({
       el: "#app", data: {
       isIf:false, mysrc: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2Ff7%2F80%2F97%2Ff7809705cbe5c0fc580e401270522a0a.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650790832&t=74454e75c55e6a3b59f6aa3be6584681" }, methods: {
       changee: function () {
       this.isIf = !this.isIf } } }) </script>
</body>

9、v-for

Generate a list structure from the data , Often used in conjunction with arrays

<body>
  <div id="app">
    <ul>
      <li v-for="(item,index) in arr" :title="item">
        {
   {index}} -> {
   {item}}
      </li>
    </ul>
    <ul>
      <li v-for="(item,index) in objArr" :title="item">
        {
   {item.name}}
      </li>
    </ul>

  </div>

  <!--  Development environment version , Contains helpful command-line warnings  -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

  <script> var app = new Vue({
       el: "#app", data: {
       arr: [1, 2, 3, 4, 5], objArr: [{
       name: "jack" }, {
       name: "zhangsan" }] } }) </script>
</body>

10、v-model

Get and set the values of form elements

<body>
  <div id="app">
    <input type="text" v-model="message" @keyup.enter="getM">
    <h2>{
   {message}}</h2>
  </div>

  <!--  Development environment version , Contains helpful command-line warnings  -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

  <script> var app = new Vue({
       el: "#app", data: {
       message: " Brest " }, methods: {
       getM: function () {
       alert(this.message) } } }) </script>
</body>

6、 ... and 、 Practical small projects

1、 Notepad

Dynamic increase 、 Delete 、 Display total 、 One click to clear 、 hide
Please add a picture description

html

<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <title> Brest Notepad </title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <meta name="robots" content="noindex, nofollow" />
  <meta name="googlebot" content="noindex, nofollow" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" type="text/css" href="./css/index.css" />
</head>

<body>
  <!--  Main area  -->
  <section id="todoapp">
    <!--  Input box  -->
    <header class="header">
      <h1> Brest Notepad </h1>
      <input v-model="inputValue" @keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder=" Please enter the task " class="new-todo" />
    </header>
    <!--  List area  -->
    <section class="main">
      <ul class="todo-list">
        <li class="todo" v-for="(item,index) in list">
          <div class="view">
            <span class="index">{
   { index+1 }}.</span>
            <label>{
   { item }}</label>
            <button class="destroy" @click="remove(index)"></button>
          </div>
        </li>
      </ul>
    </section>
    <!--  Statistics and clearing  -->
    <footer class="footer" v-show="list.length!=0">
      <span class="todo-count" v-if="list.length!=0">
        <strong>{
   { list.length }}</strong> items left
      </span>
      <button v-show="list.length!=0" class="clear-completed" @click="clear">
        Clear
      </button>
    </footer>
  </section>
  <!--  Bottom  -->
  <footer class="info">
    <p>
      <a href="https://blog.csdn.net/CSDN_SAVIOR"><button value=" Brest "></button> </a>
    </p>
  </footer>
  <!--  Development environment version , Contains helpful command-line warnings  -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script> var app = new Vue({
       el: "#todoapp", data: {
       list: [" Cloud computing ", " Cloud native ", "Vue"], inputValue: "csdn Hot list " }, methods: {
       add: function () {
       this.list.push(this.inputValue); }, remove: function (index) {
       console.log(" Delete "); console.log(index); this.list.splice(index, 1); }, clear: function () {
       this.list = []; } }, }) </script>
</body>

</html>

css

html,
body {
  margin: 0;
  padding: 0;
}
body {
  background: #fff;
}
button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-size: 100%;
  vertical-align: baseline;
  font-family: inherit;
  font-weight: inherit;
  color: inherit;
  -webkit-appearance: none;
  appearance: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 1.4em;
  background: #f5f5f5;
  color: #4d4d4d;
  min-width: 230px;
  max-width: 550px;
  margin: 0 auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 300;
}

:focus {
  outline: 0;
}

.hidden {
  display: none;
}

#todoapp {
  background: #fff;
  margin: 180px 0 40px 0;
  position: relative;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
}

#todoapp input::-webkit-input-placeholder {
  font-style: italic;
  font-weight: 300;
  color: #e6e6e6;
}

#todoapp input::-moz-placeholder {
  font-style: italic;
  font-weight: 300;
  color: #e6e6e6;
}

#todoapp input::input-placeholder {
  font-style: italic;
  font-weight: 300;
  color: gray;
}

#todoapp h1 {
  position: absolute;
  top: -160px;
  width: 100%;
  font-size: 60px;
  font-weight: 100;
  text-align: center;
  color: rgba(175, 47, 47, .8);
  -webkit-text-rendering: optimizeLegibility;
  -moz-text-rendering: optimizeLegibility;
  text-rendering: optimizeLegibility;
}

.new-todo,
.edit {
  position: relative;
  margin: 0;
  width: 100%;
  font-size: 24px;
  font-family: inherit;
  font-weight: inherit;
  line-height: 1.4em;
  border: 0;
  color: inherit;
  padding: 6px;
  border: 1px solid #999;
  box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.new-todo {
  padding: 16px;
  border: none;
  background: rgba(0, 0, 0, 0.003);
  box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);
}

.main {
  position: relative;
  z-index: 2;
  border-top: 1px solid #e6e6e6;
}

.toggle-all {
  width: 1px;
  height: 1px;
  border: none; /* Mobile Safari */
  opacity: 0;
  position: absolute;
  right: 100%;
  bottom: 100%;
}

.toggle-all + label {
  width: 60px;
  height: 34px;
  font-size: 0;
  position: absolute;
  top: -52px;
  left: -13px;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

.toggle-all + label:before {
  content: "*";
  font-size: 22px;
  color: #e6e6e6;
  padding: 10px 27px 10px 27px;
}

.toggle-all:checked + label:before {
  color: #737373;
}

.todo-list {
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 420px;
  overflow: auto;
}

.todo-list li {
  position: relative;
  font-size: 24px;
  border-bottom: 1px solid #ededed;
  height: 60px;
  box-sizing: border-box;
}

.todo-list li:last-child {
  border-bottom: none;
}

.todo-list .view .index {
  position: absolute;
  color: gray;
  left: 10px;
  top: 20px;
  font-size: 16px;
}

.todo-list li .toggle {
  text-align: center;
  width: 40px;
  /* auto, since non-WebKit browsers doesn't support input styling */
  height: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;
  border: none; /* Mobile Safari */
  -webkit-appearance: none;
  appearance: none;
}

.todo-list li .toggle {
  opacity: 0;
}

.todo-list li .toggle + label {
  /*
		Firefox requires `#` to be escaped - https://bugzilla.mozilla.org/show_bug.cgi?id=922433
		IE and Edge requires *everything* to be escaped to render, so we do that instead of just the `#` - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7157459/
	*/
  background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center left;
}

.todo-list li .toggle:checked + label {
  background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E");
}

.todo-list li label {
  word-break: break-all;
  padding: 15px 15px 15px 60px;
  display: block;
  line-height: 1.2;
  transition: color 0.4s;
}

.todo-list li.completed label {
  color: #d9d9d9;
  text-decoration: line-through;
}

.todo-list li .destroy {
  display: none;
  position: absolute;
  top: 0;
  right: 10px;
  bottom: 0;
  width: 40px;
  height: 40px;
  margin: auto 0;
  font-size: 30px;
  color: #cc9a9a;
  margin-bottom: 11px;
  transition: color 0.2s ease-out;
}

.todo-list li .destroy:hover {
  color: #af5b5e;
}

.todo-list li .destroy:after {
  content: "×";
}

.todo-list li:hover .destroy {
  display: block;
}

.todo-list li .edit {
  display: none;
}

.todo-list li.editing:last-child {
  margin-bottom: -1px;
}

.footer {
  color: #777;
  padding: 10px 15px;
  height: 20px;
  text-align: center;
  border-top: 1px solid #e6e6e6;
}

.footer:before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 50px;
  overflow: hidden;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 0 -3px #f6f6f6,
    0 9px 1px -3px rgba(0, 0, 0, 0.2), 0 16px 0 -6px #f6f6f6,
    0 17px 2px -6px rgba(0, 0, 0, 0.2);
}

.todo-count {
  float: left;
  text-align: left;
}

.todo-count strong {
  font-weight: 300;
}

.filters {
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
  right: 0;
  left: 0;
}

.filters li {
  display: inline;
}

.filters li a {
  color: inherit;
  margin: 3px;
  padding: 3px 7px;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 3px;
}

.filters li a:hover {
  border-color: rgba(175, 47, 47, 0.1);
}

.filters li a.selected {
  border-color: rgba(175, 47, 47, 0.2);
}

.clear-completed,
html .clear-completed:active {
  float: right;
  position: relative;
  line-height: 20px;
  text-decoration: none;
  cursor: pointer;
}

.clear-completed:hover {
  text-decoration: underline;
}

.info {
  margin: 50px auto 0;
  color: #bfbfbf;
  font-size: 15px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  text-align: center;
}

.info p {
  line-height: 1;
}

.info a {
  color: inherit;
  text-decoration: none;
  font-weight: 400;
}

.info a:hover {
  text-decoration: underline;
}

/*
	Hack to remove background from Mobile Safari.
	Can't use it globally since it destroys checkboxes in Firefox
*/
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  .toggle-all,
  .todo-list li .toggle {
    background: none;
  }

  .todo-list li .toggle {
    height: 40px;
  }
}

@media (max-width: 430px) {
  .footer {
    height: 50px;
  }

  .filters {
    bottom: 10px;
  }
}

const app = new Vue({
  el: "#todoapp",
  data: {
    //   According to the total 
    todoList: [" Dinner ", " Sleep ", " Write code "],
    //   Input content 
    inputValue: "",
  },
  //  Method 
  methods: {
    //  Add tasks 
    addTodo() {
      this.todoList.push(this.inputValue);
    },
    //  Delete task 
    delTodo(index) {
      this.todoList.splice(index, 1);
    },
    clearTodo() {
      this.todoList = [];
    }
  }
});

2、 The weather forecast

It can dynamically view real-time weather conditions
Please add a picture description
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> God knows </title>
  <link rel="stylesheet" href="css/reset.css" />
  <link rel="stylesheet" href="css/index.css" />
</head>

<body>
  <div class="wrap" id="app">
    <div class="search_form">
      <div class="logo"><img src="img/logo.png" alt="logo" /></div>
      <div class="form_group">
        <input type="text" v-model="city" @keyup.enter="searchWeather" class="input_txt" placeholder=" Please enter the weather to query "/>
        <button class="input_sub">
           search   Cable 
        </button>
      </div>
      <div class="hotkey">
        <a href="javascript:;"> Beijing </a>
        <a href="javascript:;"> Shanghai </a>
        <a href="javascript:;"> Guangzhou </a>
        <a href="javascript:;"> Shenzhen </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>
  <!--  Development environment version , Contains helpful command-line warnings  -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <!--  Provided by the official website  axios  Online address  -->
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <!--  Their own js -->
  <script src="./js/main.js"></script>
</body>

</html>

css-1

body{
    font-family:'Microsoft YaHei';   
}
.wrap{
    position: fixed;
    left:0;
    top:0;
    width:100%;
    height:100%;
    /* background: radial-gradient(#f3fbfe, #e4f5fd, #8fd5f4); */
    /* background:#8fd5f4; */
    /* background: linear-gradient(#6bc6ee, #fff); */
    background:#fff;

}
.search_form{
    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;
    position: relative;
}
.input_sub.loading::before{
    content:'';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url('../img/loading.gif');
}

.hotkey{
    margin:3px 0 0 2px;
}

.hotkey a{
    font-size:14px;
    color:#666;
    padding-right:15px;
}
.weather_list{
    height:200px;
    text-align:center;
    margin-top:50px;
    font-size:0px;
}
.weather_list li{
    display:inline-block;
    width:140px;
    height:200px;
    padding:0 10px;
    overflow: hidden;
    position: relative;
    background:url('../img/line.png') right center no-repeat;
    background-size: 1px 130px;
}

.weather_list li:last-child{
    background:none;
}

/* .weather_list .col02{
    background-color: rgba(65, 165, 158, 0.8);
}
.weather_list .col03{
    background-color: rgba(94, 194, 237, 0.8);
}
.weather_list .col04{
    background-color: rgba(69, 137, 176, 0.8);
}
.weather_list .col05{
    background-color: rgba(118, 113, 223, 0.8);
} */


.info_date{
    width:100%;
    height:40px;
    line-height:40px;
    color:#999;
    font-size:14px;
    left:0px;    
    bottom:0px;    
    margin-top: 15px;
}
.info_date b{
    float: left;
    margin-left: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;
  }

css-2

body,ul,h1,h2,h3,h4,h5,h6{
    margin: 0;
    padding: 0;
}
h1,h2,h3,h4,h5,h6{
    font-size:100%;
    font-weight:normal;
}
a{
    text-decoration:none;
}
ul{
    list-style:none;
}
img{
    border:0px;
}

/*  Remove the floating , solve margin-top Collapse  */
.clearfix:before,.clearfix:after{
    content:'';
    display:table;    
}
.clearfix:after{
    clear:both;
}
.clearfix{
    zoom:1;
}

.fl{
    float:left;
}
.fr{
    float:right;
}

/*
   Request address :http://wthrcdn.etouch.cn/weather_mini
   Request method :get
   Request parameters :city( City name )
   Response content : Weather information 

  1.  Click enter 
  2.  Query data 
  3.  Render data 
  */
 var app = new Vue({
     el:"#app",
     data:{
         city:'',
         weatherList:[]
     },
     methods: {
         searchWeather:function(){
            //  console.log(' Weather query ');
            //  console.log(this.city);
            //  Call interface 
            //  preservation this
            var that = this;
            axios.get('http://wthrcdn.etouch.cn/weather_mini?city='+this.city)
            .then(function(response){
                // console.log(response);
                console.log(response.data.data.forecast);
                that.weatherList = response.data.data.forecast
            })
            .catch(function(err){})
         }
     },
 })

3、 Music player

Please add a picture description
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> Pleasant listening player</title>
  <!--  style  -->
  <link rel="stylesheet" href="./css/index.css">
</head>

<body>
  <div class="wrap">
    <!--  Player body area  -->
    <div class="play_wrap" id="player">
      <div class="search_bar">
        <img src="images/player_title.png" alt="" />
        <!--  Search the song  -->
        <input type="text" autocomplete="off" v-model="query" @keyup.enter="searchMusic" />
      </div>
      <div class="center_con">
        <!--  Search the song list  -->
        <div class='song_wrapper'>
          <ul class="song_list">
            <li v-for="item in musicList">
              <a href="javascript:;" @click="playMusic(item.id)"></a> 
              <b>{
   { item.name }}</b> 
              <span v-if="item.mvid!=0" @click="playMV(item.mvid)"><i></i></span>
            </li>
          </ul>
          <img src="images/line.png" class="switch_btn" alt="">
        </div>
        <!--  Song information container  -->
        <div class="player_con" :class="{playing:isPlaying}">
          <img src="images/player_bar.png" class="play_bar" />
          <!--  Vinyl disc  -->
          <img src="images/disc.png" class="disc autoRotate" />
          <img :src="musicCover" class="cover autoRotate" />
        </div>
        <!--  Comment container  -->
        <div class="comment_wrapper">
          <h5 class='title'> Popular messages </h5>
          <div class='comment_list'>
            <dl v-for="item in hotComments">
              <dt><img :src="item.user.avatarUrl" alt=""></dt>
              <dd class="name">{
   { item.nickname}}</dd>
              <dd class="detail">
                {
   { item.content }}
              </dd>
            </dl>
          </div>
          <img src="images/line.png" class="right_line">
        </div>
      </div>
      <div class="audio_con">
        <audio ref='audio' @play="play" @pause="pause" :src="musicUrl" controls autoplay loop class="myaudio"></audio>
      </div>
      <div class="video_con" v-show="isShow" style="display: none;">
        <video :src="mvUrl" controls="controls"></video>
        <div class="mask" @click="hide"></div>
      </div>
    </div>
  </div>
  <!--  Development environment version , Contains helpful command-line warnings  -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <!--  Provided by the official website  axios  Online address  -->
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="./js/main.js"></script>
</body>

</html>