作为后端程序员，了解和掌握一些前端知识也是必不可少的，本章就和大家分享Vue的一些基础知识，希望能够对Vue小白有所帮助。话不多说，下面我们直接进入主题。
一、Vue简介Vue简介：1、JavaScript框架；2、简化Dom操作；3、响应式的数据驱动（页面是由数据来生成的，当数据改变以后页面会同步的更新）
<!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> <script src="lib/vue.js"></script></head><body> <!-- Vue实例所控制的这个元素区域，就是我们 MVVM 中的 V（View视图） --> <div id="app"> <!-- 插值表达式 --> {{ msg }} </div> <script> //Vue简介：1、JavaScript框架；2、简化Dom操作；3、响应式的数据驱动（页面是由数据来生成的，当数据改变以后页面会同步的更新） //我们 new 出来的这个 vm 对象，就是我们 MVVM 中的 VM调度者 var vm = new Vue({ //el挂载点： //1、Vue实例的作用范围是什么呢？答：Vue会管理el选项命中的元素及其内部的后代元素。 //2、是否可以使用其他的选择器？答：可以使用其他的选择器，但是建议使用ID选择器。 //3、是否可以设置在其他的Dom元素上呢？答：可以使用其他的双标签，但不能使用 html 或 body 标签。 el: '#app', //挂载点，支持所有的选择器，推荐使用ID选择器，不能挂载在 html 或 body 标签上，且不能挂载在单标签上 //这里的 data 就是 MVVM 中的 M（Model数据对象），专门用来保存每个页面的数据 data: { msg: 'Hello Vue!' } }) </script></body></html>
二、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> <script src="/lib/vue.js"></script> <style> .active { border: 1px solid red; } </style></head><body> <div id="app"> <!-- v-text指令的作用是：设置标签的文本值（textContent） --> <!-- 默认写法会替换全部内容，使用插值表达式 {{ }} 可以替换指定的内容 --> <!-- 内部支持写表达式 --> <div desc="v-text指令"> <h2 v-text="msg + ' 你好Vue！ ' + language.chinese">这里的内容会被v-text指令替换掉</h2> <h2>{{ msg + ' 你好Vue！ ' + language.chinese }}</h2> </div> <!-- v-html指令的作用是：设置元素的innerHTML --> <!-- v-html指令内容中有html机构会被解析为标签，而v-text指令无论内容是什么只会解析为文本。 --> <div desc="v-html指令"> <h2 v-html="url"></h2> </div> <!-- v-on指令的作用是：为元素绑定事件 --> <!-- 事件名不需要写on，指令可以简写为@，绑定的方法定义在methods属性中，方法内部通过this关键字可以访问定义在data中的数据 --> <div desc="v-on指令"> <input type="button" value="v-on指令" v-on:click="doTest"> <input type="button" value="v-on简写" @click="doTest"> <input type="button" value="双击事件" @dblclick="doTest"> <!-- 传递自定义参数 --> <input type="button" value="v-on方法带2个参数" @click="doTest2('隔壁老王', 666)"> <!-- 事件修饰符：事件的后面跟上 .修饰符 可以对事件进行限制，.enter 可以限制触发的按键为回车 --> <!-- 事件修饰符有多种，更多事件修饰符可参考官网：https://v2.cn.vuejs.org/v2/api/#v-on --> <input type="text" @keyup.enter="doTest"> <h2 @click="changeFood">{{ food }}</h2> </div> <!-- v-show指令的作用是：根据真假切换元素的显示状态 --> <!-- 原理是修改元素的display，实现显示或隐藏 --> <!-- 指令后面的内容最终都会解析为布尔值，值为true元素显示，值为false元素隐藏 --> <!-- 数据改变之后，对应元素的显示状态会同步更新 --> <div desc="v-show指令"> <input type="button" value="v-show指令切换显示状态" @click="changeIsShow"> <input type="button" value="累加年龄" @click="addAge"> <div> <img v-show="isShow" src="/imgs/monkey.jpg" alt=""> <img v-show="age>=18" src="/imgs/monkey.jpg" alt=""> </div> </div> <!-- v-if指令的作用是：根据表达式的真假切换元素的显示状态 --> <!-- 本质是通过操纵dom元素来切换显示状态 --> <!-- 表达式的值为true，元素存在于dom树中，值为false则从dom树中移除 --> <!-- 频繁的切换使用v-show指令，反之使用v-if指令，前者的切换消耗小 --> <div desc="v-if指令"> <input type="button" value="v-if指令切换显示状态" @click="toggleIsShow"> <p v-if="isShowInfo">浪子天涯</p> <p v-show="isShowInfo">浪子天涯 - v-show修饰</p> <h2 v-if="temperature>=30">热死了</h2> </div> <!-- v-bind指令的作用是：为元素绑定属性 --> <!-- 完整写法是 v-bind:属性名 --> <!-- 简写的话可以直接省略v-bind，只保留 :属性名 --> <!-- 需要动态的增删class建议使用对象的方式 --> <div desc="v-bind指令"> <img v-bind:src="imgSrc" alt=""> <img :src="imgSrc" :title="imgTitle" :class="isActive?'active':''" @click="toggleActive" alt=""> <img :src="imgSrc" :title="imgTitle" :class="{active: isActive}" @click="toggleActive" alt=""> </div> <!-- v-for指令的作用是：根据数据生成列表结构 --> <!-- 数组经常和v-for结合使用 --> <!-- 语法是 (item,index) in 数据 --> <!-- item 和 index 可以结合其他指令一起使用 --> <!-- 数组长度的更新会同步到页面上，是响应式的 --> <div desc="v-for指令"> <input type="button" value="添加数据" @click="add"> <input type="button" value="移除数据" @click="removeLeft"> <ul> <li v-for="(item,index) in arr"> {{ index + 1 }} 校区：{{ item }} </li> </ul> <h2 v-for="(item,index) in vegetables" :title="item.name"> {{ item.name }} </h2> </div> <!-- v-model指令的作用是：便捷的设置和获取表单元素的值 --> <!-- 绑定的数据会和表单元素的值相关联（双向数据绑定） --> <div desc="v-model指令"> <input type="button" value="修改msg" @click="setMsg"> <input type="text" v-model="msg" @keyup.enter="getMsg"> <h2> {{ msg }} </h2> </div> </div> <script> var vm = new Vue({ el: '#app', //挂载 //数据 data: { msg: 'Hello Vue!', language: { chinese: '汉语' }, url: "百度", //百度超链接 food: "番茄炒鸡蛋", isShow: false, //是否显示 age: 17, //年龄, isShowInfo: false, //是否显示信息 temperature: 20, //温度 imgSrc: "/imgs/monkey.jpg", //图片地址 imgTitle: "浪子天涯", //标题 isActive: false, vegetables: [ //蔬菜 { name: "白菜" }, { name: "萝卜" } ], arr: ["北京", "上海", "广州", "深圳"], //城市 }, //方法 methods: { //方法测试 doTest: function () { var _this = this; //方法中通过this关键字获取data中的数据 alert(_this.language.chinese); }, //带2个参数的方法测试 doTest2: function (p1, p2) { console.log(p1); console.log(p2); }, //改变食物 changeFood: function () { var _this = this; //方法中通过this关键字获取data中的数据 _this.food += "真好吃！"; }, //切换显示状态 changeIsShow: function () { this.isShow = !this.isShow; }, //累加年龄 addAge: function () { this.age++; }, //切换显示状态 toggleIsShow: function () { this.isShowInfo = !this.isShowInfo; }, //切换样式 toggleActive: function () { this.isActive = !this.isActive; }, //追加 add: function () { this.vegetables.push({ name: "花菜" }); }, //移除数组左边的第一个 removeLeft: function () { this.vegetables.shift(); }, //获取msg getMsg: function () { alert(this.msg); }, //设置msg setMsg: function () { this.msg = "程序员"; } } }) </script></body></html>
三、axios基本使用
<!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>axios基本使用</title> <script src="/lib/vue.js"></script> <script src="/lib/axios.js"></script></head><body> <div id="app"> <input type="button" value="获取信息" @click="getMsg"> <p> {{ msg }} </p> </div> <script> //get请求 .then后面跟着是成功的回调函数和失败的回调函数 //axios.get(地址?key=value&key2=value2).then(function(response){},function(err){}); //post请求 .then后面跟着是成功的回调函数和失败的回调函数 //axios.post(地址,参数对象).then(function(response){},function(err){}); //axios.post(地址,{key:value,key2:value2}).then(function(response){},function(err){}); /* axios官网地址：http://axios-js.com/zh-cn/docs/ 案例如下： 1、执行 GET 请求 axios.get('/user?ID=12345') .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); 2、执行 POST 请求 axios.post('/user', { firstName: 'Fred', lastName: 'Flintstone' }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); 3、执行多个并发请求 function getUserAccount() { return axios.get('/user/12345'); } function getUserPermissions() { return axios.get('/user/12345/permissions'); } axios.all([getUserAccount(), getUserPermissions()]) .then(axios.spread(function (acct, perms) { // 两个请求现在都执行完成 })); */ var vm = new Vue({ //挂载 el: '#app', //数据 data: { msg: 'Hello Vue!' }, //方法 methods: { //获取信息 getMsg: function () { var _this = this; axios.get('https://autumnfish.cn/api/joke').then(function (response) { //成功的回调 //axios回调函数中的this已经改变，无法访问到data中的数据 //把this保存起来，回调函数中直接使用保存的this即可，也就是此处的_this _this.msg = response.data; }, function (err) { //失败的回调 //TODO }); }, /* 执行多个并发请求示例开始 */ //添加配件价格信息 addPartsPrice: function (drs) { var _this = this; var arrPids = []; drs.forEach(function (item, index) { if (!arrPids.some(pid => { return pid == item.pid; })) { arrPids.push(item.pid); } }); if (arrPids.length <= 0) { return; } var pageSize = 10; //分页大小 var pageResults = []; //分组结果 for (var i = 0; i < arrPids.length; i += pageSize) { //slice(start,end) 获取索引值从start到end的数据，其中包含start，但不包含end pageResults.push(arrPids.slice(i, i + pageSize)) // 每10条分成一组 } var arrGetListPartsPriceBy007Func = []; //存放获取原厂配件列表销售价（含税）数据的函数 pageResults.forEach(function (arr, index) { var pids = ""; arr.forEach(function (pid) { pids += pid + ","; }); arrGetListPartsPriceBy007Func.push(_this.getListPartsPriceBy007(pids)); }); //分多批次获取数据，防止后端响应时间超时 var pAll = Promise.all(arrGetListPartsPriceBy007Func).then(results => { //results为一个数组，存放的是arrGetListPartsPriceBy007Func中每个函数的返回值 //console.log(results); var dt = []; //用于存放所有请求的返回值，此处每个接口的返回值都是json数组 results.forEach(function (arr) { dt = dt.concat(arr); //合并数组 }); //console.log(dt); if (dt && dt.length > 0) { drs.forEach(function (dr, index) { var filterResult = dt.filter(function (item, index2) { return item.pid == dr.pid; }); if (filterResult.length > 0) { //this.$set()用于向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。 //它必须用于向响应式对象上添加新属性，因为Vue无法探测普通的新增属性。 _this.$set(dr, "eot_price", filterResult[0].eot_price); //进价(未含税) _this.$set(dr, "cost_price", filterResult[0].cost_price); //进价(含税) _this.$set(dr, "sale_price", filterResult[0].sale_price); //销售价(含税) } }); } }).catch(error => { //Promise中只要有一个reject了，那么pAll的状态就是reject //console.log(error); }); }, //获取原厂配件列表销售价（含税）数据 //pids：配件编码，多个以英文逗号分割 getListPartsPriceBy007: function (pids) { var _this = this; //其中调用 resolve 代表一切正常，reject 是出现异常时所调用的 //resolve() 中可以放置一个参数用于向下一个 then 传递一个值 //reject() 参数中一般会传递一个异常给之后的 catch 函数用于处理异常 //resolve 和 reject 并不能够使起始函数停止运行，别忘了 return。 return new Promise(function (resolve, reject) { var apiData = []; //接口返回的数据 var params = new URLSearchParams(); params.append("action", "GetListPartsPriceBy007"); params.append("brandCode", _this.globalBrandCode); params.append("pids", pids); axios.post('/Ashx/Epc/ThirdInterfaceDataHandler.ashx', params) .then(function (result) { if (result.data.State != 1) { //获取失败 console.log("获取原厂配件列表销售价（含税）数据失败：" + result.data.Message); resolve(apiData); return; } //_c.getKeyValue 为自己封装的一个函数，可根据各自业务做相应的调整 apiData = JSON.parse(_c.getKeyValue('data', result.data.Items)); resolve(apiData); //此处也可将接口返回来的值存到全局变量中 }) .catch(function (error) { //reject(error); //拦截 console.log(error); resolve(apiData); }); }); }, /* 执行多个并发请求示例结束 */ }, }) </script></body></html>
四、js中常用的json数组操作方法
js中最常用的几个数组操作方法 filter、map、forEach、every、some、sort、this.$set() 实际案例如下：
<!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>js中常用的json数组操作方法</title> <script src="lib/vue.js"></script></head><body> <div id="app"> <input type="button" value="测试" @click="doTest"> </div> <script> var vm = new Vue({ el: '#app', //挂载 data: { msg: 'Hello Vue!', persons: [ { name: "张三", age: 18, id: 5, gender: "男" }, { name: "李四", age: 20, id: 2, gender: "男" }, { name: "王五", age: 16, id: 2, gender: "男" }, { name: "小美", age: 16, id: 9, gender: "女" }, ] }, methods: { //测试 //参考博文：https://blog.csdn.net/weixin_42708208/article/details/103506187 //filter、map、forEach、every、some、sort、this.$set() 使用 doTest: function () { var _this = this; //方法中通过this关键字获取data中的数据 //具体案例如下： //1、返回所有年龄大于等于18岁的男生的数组（使用方法：filter） var mans = _this.persons.filter((item, index) => { return item.gender == "男" && item.age >= 18 }); console.log("年龄大于等于18岁的男生：", mans); //2、只保留姓名的数组（使用方法：map） var personNameList = _this.persons.map((item, index) => { return item.name; }); console.log("只保留姓名的数组：", personNameList); //3、只保留姓名和id的数组（使用方法：forEach） var personNameIdList = []; _this.persons.forEach((item, index) => { personNameIdList.push({ name: item.name, id: item.id }); }); console.log("只保留姓名和id的数组：", personNameIdList); //4、判断所有人是不是都是男生（使用方法：every） var isMan = _this.persons.every((item, index) => { return item.gender == "男"; }); console.log("判断所有人是不是都是男生：", isMan); //false //5、判断有没有男生（使用方法：some） var hasMan = _this.persons.some((item, index) => { return item.gender == "男"; }); console.log("判断有没有男生：", hasMan); //true //6、依据id进行升序排序，操作的是原数组（使用方法：sort） _this.persons.sort(function (a, b) { return a.id - b.id; }); console.log("依据id进行升序排序：", _this.persons); //7、给年龄大于等于18的人添加字段type:'成年人' _this.persons.forEach(function (item) { if (item.age >= 18) { //this.$set()用于向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。 //它必须用于向响应式对象上添加新属性，因为Vue无法探测普通的新增属性。 _this.$set(item, "type", "成年人"); } }); console.log("给年龄大于等于18的人添加字段type:'成年人'：", _this.persons); }, }, }) </script></body></html>
Demo源码：
链接：https://pan.baidu.com/s/1plm0nc8BylZVj05wJ7y4Yg 提取码：hpoy此文由博主精心撰写转载请保留此原文链接：https://www.cnblogs.com/xyh9039/p/16950971.html
版权声明：如有雷同纯属巧合，如有侵权请及时联系本人修改，谢谢！！！