【web系列六】vue介绍

企业开发 2023-04-09 06:33:45 阅读次数: 0

目录

初入vue

vue简介

第一个vue程序

vue指令

内容和事件绑定

v-text

v-html

v-on

案例：计数器 

显示切换，属性绑定

v-show/v-if

 v-bind

列表循环、表单元素绑定

v-for

v-model

vue+ajax(jquery)

vue-axios

Axios 是什么?

特性

用例

 get请求

post请求

同步请求

发送多个并发请求

VUE-CLI

什么是cli

什么是vue-cli

vue-cli的优势

参考资料

序

        在学习vue之前，默认大家已经掌握了html、ajax、css、javascript的初级知识，如果对这些还不是很清楚的话，建议先学习一下下面这些内容：

web系列之HTML5_Nicholson07的博客-CSDN博客

(2条消息) web系列之AJAX_Nicholson07的博客-CSDN博客

(2条消息) web系列之入门CSS_Nicholson07的博客-CSDN博客

为初学者准备的：JavaScript 速成_哔哩哔哩_bilibili

初入vue

vue简介

        vue是一个javascript框架，他的作用主要有以下两点：

  1. 简化dom操作，也就是获取html元素，再操作html元素这个过程；
  2. 响应式的数据驱动，页面由数据生成，会随着数据变化而更新。 

官网：

介绍 — Vue.js (vuejs.org)

第一个vue程序

        vue.js可以从这个网址下载到

https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js

hello.html

<!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 项目的用户界面。

参考资料

 vue3中的$refs的使用_YDKD的博客-CSDN博客_vue3使用refs

介绍 | Vue.js (vuejs.org)

Axios 中文文档 | Axios 中文网 | Axios 是一个基于 promise 的网络请求库，可以用于浏览器和 node.js (axios-http.cn)

猜你喜欢

转载自blog.csdn.net/Nichlson/article/details/123656106
今日推荐
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
周排行
NEFU 117 素数个数的位数
Closest Common Ancestors (Lca,tarjan)
ELK部署
【转载】Hive笔记整理（三）
SQL语句（一）基本表的定义
关于Java web开发中的MySQL的事务语句
MFC创建自定义窗体
如何用一句话激怒程序员？
《逆袭大学》文摘——9.4 基础和应用的平衡中找到大学的节奏
【spring源码分析】@Value注解原理
每日归档
更多
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022