【web系列六】vue介绍

<!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>VUE第一个程序</title>
    <link rel="stylesheet" type="text/css" href="hello.css" />
  </head>

  <body>
    <div id="app">
      {{ message }}
      <h1> {{ message }} </h1>                       <!--适用于el挂载点下所有同名模板-->

      <h2> {{ fruit }} </h2>                         <!--字典可以完整显示-->
      <h3> {{ fruit.type }} {{ fruit.color }} </h3>  <!--字典也可以只显示value-->

      <p> {{ fruit_list }} </p>                      <!--列表数据可以完整显示-->
      <ul>                                           <!--列表数据也可以使用下标选取个别元素-->
        <li> {{ fruit_list[0] }} </li>
        <li> {{ fruit_list[1] }} </li>
        <li> {{ fruit_list[2] }} </li>
      </ul>
    </div>
    <script src="vue.js"></script>
    <script src="hello.js"></script>
  </body>
</html>

hello.js

var app = new Vue({
  el: '#app',                              // 挂载点，定位标签位置
  data: {                   
    message: 'Hello Vue!',                 // key于挂载点中的模板关联，value存放数据   
    fruit: {                               // 字典数据类型
      type: "apple",
      color: "red"
    },
    fruit_list: ["apple", "peach", "pear"]  // 列表数据类型
  }
})

这里要注意el无法挂载到<body>和<html>标签。

效果如下

vue指令

内容和事件绑定

v-text

v-text用于设置标签的文本。

<!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>VUE指令v-text</title>
    <link rel="stylesheet" type="text/css" href="hello.css" />
  </head>

  <body>
    <div id="app">
      <h1> {{ message + 'append' }} 还能显示么</h1>      
      <h1 v-text="message + 'append'">还能显示么</h1> 
    <script src="vue.js"></script>
    <script src="hello.js"></script>
  </body>
</html>

var app = new Vue({
  el: '#app',
  data: {                   
    message: 'Hello Vue!'
  }
})

可以发现v-text指令会把后面的内容全部替换掉，但是不论使用v-text指令还是模板都可以实现字符串拼接。

v-html

用于设置标签的innerHTML。

<!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>VUE指令v-html</title>
    <link rel="stylesheet" type="text/css" href="hello.css" />
  </head>

  <body>
    <div id="app">     
      <h1 v-text="message"></h1>
      <h1 v-html="message"></h1>
      <br/>
      <h1 v-text="url"></h1>
      <h1 v-html="url"></h1>
    <script src="vue.js"></script>
    <script src="hello.js"></script>
  </body>
</html>

var app = new Vue({
  el: '#app',
  data: {                   
    message: 'Hello Vue!',
    url: "<a href='https://blog.csdn.net/Nichlson?type=blog'>nicholson的主页</a>"
  }
})

可以发现，在显示文本时，v-text和v-html没什么差别，但是当显示的内容时<a>标签包裹的url时，使用v-text只会把内容原封不动的展示出来，但是v-html会把他解析成一个超链接显示出来。

v-on

为元素绑定事件。

示例里只展示了click事件修饰符，更多的可以查看以下网址。

API — Vue.js (vuejs.org)

<!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>VUE指令v-on</title>
    <link rel="stylesheet" type="text/css" href="hello.css" />
  </head>

  <body>
    <div id="app">
      <h1 v-on:click="changeText1">{{ message1 }}</h1>
      <h1 @click="changeText2">{{ message2 }}</h1>   <!--“@”是“v-on:”的缩写-->
      <script src="vue.js"></script>
      <script src="hello.js"></script>
    </div>
  </body>
</html>

var app = new Vue({
  el: '#app',
  data: {                   
    message1: 'Hello',
    message2: 'Hello'
  },
  methods: {
    changeText1:function() {
      this.message1+=" world!"   // 使用this可以找到VUE类data中的内容，避免对dom元素的操作
    },
    changeText2:function() {
      this.message2+=" vue!"
    }
  }
})

分别点击hello后：

案例：计数器

这里是想实现一个类似购物车中商品数量加减的功能。

<!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>VUE指令案例之计数器</title>
    <link rel="stylesheet" type="text/css" href="hello.css" />
  </head>

  <body>
    <div class="name">计数器</div>
    <div id="app">
      <input type="button" value="-" @click="sub">
      <p v-text="num"></p>
      <input type="button" value="+" @click="add">
      <div id='clear'></div>
      <script src="vue.js"></script>
      <script src="hello.js"></script>
    </div>
  </body>
</html>

var app = new Vue({
  el: '#app',
  data: {                
    num: 1
  },
  methods: {
    sub:function() {
      if(this.num > 0) {
        this.num--;
      }
      else {
        alert('别点了，最小啦！')
      }
    },
    add:function() {
      if(this.num < 10) {
        this.num++;
      }
      else {
        alert('别点了，最大啦！')
      }
    }
  }
})

这里也给出css文件，但是不细讲，有兴趣的可以看一看。

body {                                              /*第一种作用域形式*/
    background-color: #f4f4f4;                    /*背景颜色*/
    color: #555555;                               /*字体颜色*/

    text-align: center;

    font-family: Arial, Helvetica, sans-serif;      /*字体格式： 字体， 备用字体， 字体属性（这里指无衬线字体）*/
    font-size: 20px;                                /*字体大小*/
    font-weight: bold;                              /*字体粗细*/

    line-height: 1.5em;                             /*行高*/
}

.name {
    margin-top: 100px;
}

#app {
    border: 1px gray solid;
    
    margin: 0 auto;                                 /*水平居中*/

    width: 10%;
    height: 30px;
    border-radius: 10px;

    overflow: hidden;                               /*隐藏溢出div的部分*/
}

input {
    background-color: gray;

    font-size: 20px;

    border: 0px;
    padding: 0px;
    width: 30%;
    height: 100%;
    
    float: left;
}

p {
    background-color: white;

    font-family: 'Times New Roman', Times, serif;

    margin: 0px;
    border: 0px;
    width: 40%;
    height: 100%;

    float: left;
}

#clear {
    clear: both;
}

效果展示

显示切换，属性绑定

v-show/v-if

v-show设置元素的显示状态，即style="display:xx"；

而v-if直接会移除元素。

<!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>VUE指令v-show/if</title>
  </head>

  <body>
    <div id="app">
      <input type="button" value="显示/隐藏" @click="changeisshow">
      <p v-show="isshow">v-if</p>
      <p v-if="isshow">v-show</p>
      <script src="vue.js"></script>
      <script src="hello.js"></script>
    </div>
  </body>
</html>

var app = new Vue({
  el: '#app',
  data: {                
    isshow: true,
  },
  methods: {
    changeisshow:function() {
      this.isshow = !this.isshow;
    }
  }
})

效果如下：

v-bind

为元素绑定属性。

<!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>VUE指令v-show/if</title>
    <style>
      .active {
        border: 1px red solid;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <input type="button" value="开启/关闭" @click="changeisactive">
      <p v-bind:title="title" v-bind:class="isactive?'active':''">完整写法及三元表达式写法</p>
      <p :class="{active:isactive}">简写及另一种表达式写法</p>
      <script src="vue.js"></script>
      <script src="hello.js"></script>
    </div>
  </body>
</html>

var app = new Vue({
  el: '#app',
  data: {                
    isactive: false,
    title: "v-bind",
  },
  methods: {
    changeisactive:function() {
      this.isactive = !this.isactive;
    }
  }
})

列表循环、表单元素绑定

v-for

<!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>VUE指令v-for</title>
  </head>

  <body>
    <div id="app">
      <ul>
        <li v-for="(item,index) in list">
          hello {{ index }} {{ item.name }}   <!--v-for会根据for循环列表的元素个数n，将其所在的元素复制n份-->
        </li>
      </ul>
      <script src="vue.js"></script>
      <script src="hello.js"></script>
    </div>
  </body>
</html>

var app = new Vue({
  el: '#app',
  data: {                
    list: [
      {name: "shanghai"},
      {name: "beijing"},
      {name: "guangzhou"}
    ]
  }
})

v-model

获取和设置表单元素的值，也叫双向数据绑定。所谓双向数据绑定就是，v-model绑定的元素会跟随代码中响应变量的改变而改变，同时当从改变v-model绑定的元素数值时，也会改变代码中对应的变量。

<!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>VUE指令v-for</title>
  </head>

  <body>
    <div id="app">
      <input type="text" v-model="message" @keyup.enter="getM">
      <script src="vue.js"></script>
      <script src="hello.js"></script>
    </div>
  </body>
</html>

var app = new Vue({
  el: '#app',
  data: { 
    message: "hello"
  },
  methods: {
    getM:function() {
      alert(this.message);
    }
  }
})

vue+ajax(jquery)

ajax(jquery)用来和服务器端通信，即向服务器发送请求并可以获取服务器发送来的数据。这里的演示基于web系列之Django搭建本地python工程的云端可视化界面_Nicholson07的博客-CSDN博客

这篇文章中搭建的django服务器以及web系列之AJAX_Nicholson07的博客-CSDN博客中jquery发送get请求的demo，主要代码如下

console.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>AJAX</title>
	<Style type="text/css">
		#result {
			width: 200px;
			height: 100px;
			border: solid 1px #90b;
		}
	</Style>
</head>
<body>
	<button id="btn">点击</button>
	<div id="result"></div>
	
	<script src="/static/first_app/js_lib/jquery.min.js"></script>
	<script>
		const btn = document.getElementById("btn");
		const result = document.getElementById("result"); 
		
		btn.onclick = function() {
			$.get("/hello/", function(data) {
				console.log(data);
				result.innerHTML = data;
			});
		}
	</script>
</body>
</html>

hello.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello</title>
</head>
<body>
    <h>hello world!</h>
</body>
</html>

效果如下，在console页面中，点击“点击”按钮后，会访问hello.html，在hello.html中会输出helloworld，console页面下方输出返回的内容。

点击前

点击后

好了，现在我们要做的就是将vue和ajax结合起来使用。

console.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>AJAX</title>
    <style type="text/css">
      #result {
        width: 200px;
        height: 100px;
        border: solid 1px #90b;
      }
    </style>
  </head>
  <body>
    <div id="contain">
      <button id="btn" @click="get">点击</button>
      <div id="result">
        <p v-html="message"></p>
      </div>
    </div>

    <script src="/static/first_app/js_lib/jquery.min.js"></script>
    <script src="/static/first_app/js_lib/vue.js"></script>
    <script src="/static/first_app/js_lib/console_vue.js"></script>
  </body>
</html>

hello.html

var app = new Vue({
    el: "#contain",
    data: {
      message: "",
    },
    methods: {
      get: function () {
        var that = this;
        $.get("/hello/", function (data) {
            that.message = data;
        });
      },
    },
  });

点击前

点击后

注意这里要使用v-html，因为返回的是hello.html。

vue-axios

Axios 是什么?

Axios 是一个基于promise网络请求库，作用于node.js和浏览器中。在服务端它使用原生 node.js http模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。

特性

从浏览器创建XMLHttpRequests
从 node.js 创建http请求
支持Promise API
拦截请求和响应
转换请求和响应数据
取消请求
自动转换JSON数据
客户端支持防御XSRF

用例

由于之前已经详细介绍而ajax，而axios和ajax异曲同工，这边就只写一下axios的用例了。

get请求

<script lang='ts' setup>
import axios from 'axios'

// 向给定ID的用户发起请求
axios.get('/user?ID=12345')
  .then(function (response) {
    // 处理成功情况
    console.log(response);
  })
  .catch(function (error) {
    // 处理错误情况
    console.log(error);
  })
  .then(function () {
    // 总是会执行
  });

// 也可以写成下面的形式    
// axios.get('/user', {
//     params: {
//       ID: 12345
//     }
//   })
//   .then(function (response) {
//     console.log(response);
//   })
//   .catch(function (error) {
//     console.log(error);
//   })
//   .then(function () {
//     // 总是会执行
//   });  
</script>

post请求

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

同步请求

// 支持async/await用法
async function getUser() {
  try {
    const response = await axios.get('/user?ID=12345');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

发送多个并发请求

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

Promise.all([getUserAccount(), getUserPermissions()])
  .then(function (results) {
    const acct = results[0];
    const perm = results[1];
  });

VUE-CLI

什么是cli

CLI一般指命令行界面。命令行界面（英语：command-line interface，缩写：CLI）是在图形用户界面得到普及之前使用最为广泛的用户界面，它通常不支持鼠标，用户通过键盘输入指令，计算机接收到指令后，予以执行。

什么是vue-cli

Vue-CLI（vue脚手架）是一个基于 Vue.js 进行快速开发的完整系统。使用vue脚手架开发的页面是一个完整系统。

vue-cli的优势

通过 @vue/cli 实现的交互式的项目脚手架。（可以通过命令的方式下载相关依赖）
通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。（直接配置号vue全家桶，包括vue.js、vuerouter.js等，不需要再去官网下载代码了。）
一个运行时依赖 (@vue/cli-service)，该依赖：
- 可升级；（通过命令的方式升级代码版本。）
- 基于 webpack 构建，并带有合理的默认配置；（可以使用webpack的方式将项目部署到服务器上）
  - 可以通过项目内的配置文件进行配置；（通过修改配置文件搭建项目环境）
- 可以通过插件进行扩展。（如element-ui）
一个丰富的官方插件集合，集成了前端生态中最好的工具。（包含Node.js webpack等）
一套完全图形化的创建和管理 Vue.js 项目的用户界面。