Vue的基础知识
作为后端程序员，了解和掌握一些前端知识也是必不可少的，本章就和大家分享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: " <a href='https://www.baidu.com'>百度</a> " , // 百度超链接 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、执行 GE
- 上一篇: 数据看板可视化
- 下一篇: 记录--手把手带你开发一个uni-app日历插件（并发布）