一篇文章带你了解网页框架——Vue简单入门
这篇文章将会介绍我们前端入门级别的框架——Vue的简单使用
如果你以后想从事后端程序员，又想要稍微了解前端框架知识，那么这篇文章或许可以给你带来帮助
温馨提醒：在学习该文章前，请先学习HTML，CSS，JavaScript，Ajax等前端知识
Vue基础
首先，我们从官方文档中可以得到下述描述：
- Vue是一套用于构建用户界面的渐进式框架。
- Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
- 另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
其中我们需要格外注意的是：
- Vue只负责前端页面的设计，并不能完全实现前端的所有功能
Vue主要特点：
采用JavaScript框架
简化Dom操作
响应式数据驱动
VsCode插件推荐
在正式开始介绍Vue之前，我想向大家安利一个VsCode插件——Live Server
Live Server 插件可以同步代码和网页的更新：
- 当你保存代码时，你的页面将会同步进行刷新，省略了手动点击页面的步骤，在开发中提供便利
Vue代码框架
首先我们需要学会Vue的基本使用
- 导入相关包
- 基本框架使用
Vue基础 {{ message }} var app = new Vue({ el:"#app", data:{ message:" 你好 小黑! " } }) EL挂载点介绍
学习过Vue的基本使用后，我们先对EL挂载点做出最基本的介绍：
- EL挂载点负责设置页面中属性与Vue属性的连接
- EL挂载点设置后，页面属性可以调用Vue中的数据（data）和方法（method）
EL挂载点注意点：
- Vue的作用范围在EL挂载点的本体元素以及后代元素中
- Vue的EL挂载点可以依赖于各种选择器，例如类选择器等，但推荐使用ID选择器
- Vue的EL挂载点不可以作用在HTML和BODY两个页面最大元素上
我们给出简单示例：
el:挂载点 {{ message }} {{ message }} {{ message }}
var app = new Vue({ // 以下均可使用， // el:"#app", // el:".app", // el:"div", // body无法连接 el:"#body", data:{ message:"秋落" } })
Data数据对象介绍
学习过Vue的基本使用后，我们对Data做出最基本的介绍：
- Data用于存储页面元素中使用的各类属性
- 属性可以包括各种类型，例如文本，数组等复杂类型
- 渲染复杂类型数据时，遵循JavaScript的语法基本都可以使用
我们给出简单示例：
data:数据对象 {{ message }} {{ school.name }} {{ school.mobile }}
- {{ campus[0] }}
- {{ campus[3] }}
var app = new Vue({ el:"#app", data:{ message:"你好!", school:{ name:"河南师范大学", mobile:"0373-3325000" }, campus:["东校区","西校区","新乡校区","平原湖校区"] } }) Vue本地应用
在介绍了Vue的基本使用后，我们针对Vue内部的各种属性方法来做出一一介绍
每条属性或方法我们都会给出解释和相关案例
v-text
文本解释：
v-text：设置标签的文本值
代码解释：
v-text指令 深圳
深圳
{{ message +'!'}}深圳
var app = new Vue({ el:"#app", data:{ message:"河南师范大学", info:"软件学院" } }) v-html
文本解释：
v-html：以html的格式来设置标签的文本值
代码解释：
v-html指令 <!--采用v-html后显示的是河南师范大学的加粗版，但采用v-text后显示的是河南师范大学--> var app = new Vue({ el:"#app", data:{ content:"河南师范大学" } }) v-on
文本解释：
v-on：为元素绑定事件，可以采用@代替
代码解释：
v-on var app = new Vue({ el:"#app", methods:{ doIt:function(){ alert("河南师范大学"); } } }) v-show
文本解释：
v-show：根据表达值的真假，切换元素的显示和隐藏（隐藏后源代码仍存在）
代码解释：
v-show指令 
![]()
=18" src="https://www.cnblogs.com/qiuluoyuweiliang/archive/2022/10/18/img/monkey.gif" alt=""> var app = new Vue({ el:"#app", data:{ isShow:false, age:17 }, methods: { // 进行 isShow 的true或false更改 changeIsShow:function(){ this.isShow = !this.isShow; }, addAge:function(){ this.age++; } }, }) v-if
文本解释：
v-if：根据表达值的真假，切换元素的显示和隐藏（隐藏后，源代码不存在）
代码解释：
v-if指令 河南师范大学
河南师范大学 - v-show修饰
=35">热死啦
var app = new Vue({ el:"#app", data:{ isShow:false, temperature:20 }, methods: { toggleIsShow:function(){ this.isShow = !this.isShow; } }, }) v-bind
文本解释：
v-bind：设置元素的属性（比如：src，title。class）
代码解释：
v-bind指令 .active{ border: 1px solid red; } ![]()
![]()
![]()
var app = new Vue({ el:"#app", data:{ imgSrc:"http://www.itheima.com/images/logo.png", imgTitle:"黑马程序员", isActive:false }, methods: { toggleActive:function(){ this.isActive = !this.isActive; } }, }) v-for
文本解释：
v-for：根据数据生成列表结构
代码解释：
v-for指令 - {{ index+1 }}城市推荐:{{ it }}
{{ item.name }}
var app = new Vue({ el:"#app", data:{ arr:["北京","上海","广州","深圳"], vegetables:[ {name:"鱼"}, {name:"鸡"} ] }, methods: { add:function(){ this.vegetables.push({ name:"红烧鱼" }); }, remove:function(){ this.vegetables.shift(); } }, }) v-on+
文本解释：
v-on+：补充v-on的部分知识点
代码解释：
v-on补充 var app = new Vue({ el:"#app", methods: { doIt:function(p1,p2){ console.log("做it"); console.log(p1); console.log(p2); }, sayHi:function(){ alert("吃了没"); } }, }) v-model
文本解释：
v-model：实现双向绑定，便捷设置
代码解释：
v-model指令 {{ message }}
var app = new Vue({ el:"#app", data:{ message:"河南师范大学" }, methods: { getM:function(){ alert(this.message); }, setM:function(){ this.message ="软件学院"; } }, }) 案例：计算器
下面我们通过一个案例来巩固前面所学习的一些知识点
案例要求：
- 我们希望通过”-“和”+”控制中间数字的大小（最小为0，最大为10）
知识点复习：
- EL挂载点，Data数据，Methods方法
- v-on，v-text方法
代码展示：
计算器 #app { width: 480px; height: 100px; margin: 200px auto; } .input-num { margin-top: 20px; height: 100%; display: flex; border-radius: 10px; overflow: hidden; box-shadow: 0 0 4px black; } .input-num button { width: 150px; height: 100%; font-size: 40px; color: gray; cursor: pointer; border: none; outline: none; } .input-num span { height: 100%; font-size: 40px; flex: 1; text-align: center; line-height: 100px; } 
{{ num }} /* 1. data中定义num属性,类型是数字,渲染到2个按钮中间 2. 减号绑定点击事件,对应的方法名叫sub,大于0之前递减 3. 加号绑定点击事件,对应的方法名叫add,小于0之前累加 */ // 创建Vue实例 var app = new Vue({ el: "#app", data: { // 修改的数字 num:1 }, methods: { // 减 sub:function(){ // 递减 if(this.num>0){ this.num--; }else{ alert("数字最小为0"); } }, // 加 add:function(){ // 累加 if(this.num<10){ this.num++; }else{ alert("数字最大为10"); } } } });案例：图片切换
下面我们通过一个案例来巩固前面所学习的一些知识点
案例要求：
- 我们通过点击左右两边的图片切换符号来切换中间图片
知识点复习：
- EL挂载点，Data数据，Methods方法
- v-on，v-show，v-bind方法
代码展示：
Document 
学校环境
![]()
0" > 
<a href="javascript:void(0)" @click="next" v-show="index 
const app = new Vue({ el: "#mask", data: { // 图片元素 imgList: [ "./images/00.jpg", "./images/01.jpg", "./images/02.jpg", "./images/03.jpg", "./images/04.jpg", "./images/05.jpg", "./images/06.jpg", "./images/07.jpg", "./images/08.jpg", "./images/09.jpg", "./images/10.jpg", ], // 图片序号 index: 0 }, methods: { // 上一张 prev() { this.index--; }, // 下一张 next() { this.index++; } } }); * { margin: 0; padding: 0;}html,body,#mask { width: 100%; height: 100%;}#mask { background-color: #c9c9c9; position: relative;}#mask .center { position: absolute; background-color: #fff; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 10px;}#mask .center .title { position: absolute; display: flex; align-items: center; height: 56px; top: -61px; left: 0; padding: 5px; padding-left: 10px; padding-bottom: 0; color: rgba(175, 47, 47, 0.8); font-size: 26px; font-weight: normal; background-color: white; padding-right: 50px; z-index: 2;}#mask .center .title img { height: 40px; margin-right: 10px;}#mask .center .title::before { content: ""; position: absolute; width: 0; height: 0; border: 65px solid; border-color: transparent transparent white; top: -65px; right: -65px; z-index: 1;}#mask .center > img { display: block; width: 700px; height: 458px;}#mask .center a { text-decoration: none; width: 45px; height: 100px; position: absolute; top: 179px; vertical-align: middle; opacity: 0.5;}#mask .center a :hover { opacity: 0.8;}#mask .center .left { left: 15px; text-align: left; padding-right: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px;}#mask .center .right { right: 15px; text-align: right; padding-left: 10px; border-top-left-radius: 10px; border-bottom-left-radius: 10px;}
案例：记事本
下面我们通过一个案例来巩固前面所学习的全部知识点
案例要求：
- 新增：书写内容，点击Enter后，便利贴放于页面
- 删除：点击内容后方的”x”号后，该内容消失
- 统计：统计内容数量，在左下角显示
- 清空：点击右下角清空键，内容全部清空
- 隐藏：当无内容时，下述记事本部分隐藏
代码展示：
小黑记事本 小黑记事本
- {{ index+1 }}. var app = new Vue({ // 实现Vue绑定 el: "#todoapp", data: { // list表示记事内容 list: ["写代码", "吃饭饭", "睡觉觉"], // 表示目前输入内容，双向绑定 inputValue: "好好学习,天天向上" }, methods: { // 新添方法，将输入值填入计时内容中 add: function () { this.list.push(this.inputValue); }, // 删除方法，删除当前下表为index的内容 remove: function (index) { this.list.splice(index, 1); }, // 清除方法，清除所有方法 clear: function () { this.list = []; } }, })
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=922433IE 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; }}
Vue网络应用
我们在本篇开头说过Vue的作用仅仅是用来完成静态页面
所以如果想要完成项目开发功能，还需要与后台交互的技术Ajax（主要采用Axios技术）
Axios技术
Axios技术是原生的Ajax进行封装，简化书写
我们在之前的Ajax专题中有完整的介绍过Ajax和Axios技术，在这里我们仅做简单回忆：
axios基本使用 /* 接口1:随机笑话 请求地址:https://autumnfish.cn/api/joke/list 请求方法:get 请求参数:num(笑话条数,数字) 响应内容:随机笑话 */ // 事件绑定 document.querySelector(".get").onclick = function () { // axios的get格式：get后跟url，response为返回体，err为错误 axios.get("https://autumnfish.cn/api/joke/list?num=6") .then(function (response) { console.log(response); },function(err){ console.log(err); }) } /* 接口2:用户注册 请求地址:https://autumnfish.cn/api/user/reg 请求方法:post 请求参数:username(用户名,字符串) 响应内容:注册成功或失败 */ // 事件绑定 document.querySelector(".post").onclick = function () { // axios的post格式：post后跟url和请求体，response为返回体，err为错误 axios.post("https://autumnfish.cn/api/user/reg",{username:"盐焗西兰花"}) .then(function(response){ console.log(response); console.log(this.skill); },function (err) { console.log(err); }) }
Axios+Vue技术
我们常常用Vue作为页面的设计框架，同时采用Axios作为前后端交互的技术
两者的结合其实并没有互相掺杂，大致上还保留原本的形式，最大的改变只有数据来源发生变化
axios+vue {{ joke }}
/* 接口:随机获取一条笑话 请求地址:https://autumnfish.cn/api/joke 请求方法:get 请求参数:无 响应内容:随机笑话 */ // 采用Vue开启框架页面 var app = new Vue({ el:"#app", data:{ // 页面数据展示 joke:"很好笑的笑话" }, methods: { // 获得笑话的方法，采用axios技术进行数据请求 getJoke:function(){ var that = this; axios.get("https://autumnfish.cn/api/joke").then(function(response){ console.log(response.data); that.joke = response.data; },function (err) { }) } }, }) 案例：天气预报
我们同样采用一个简单的案例来巩固Vue网络应用
案例需求：
- 我们可以手动查找输入框内的城市的天气情况
- 我们可以点击页面内含有的城市的天气情况
代码展示：
天知道 
{{ city }} - {{ item.type }} {{ item.low}} ~ {{ item.high}} {{ item.date }} new Vue({ el: "#app", data: { // 输入框城市，双向绑定 city: "武汉", // 天气情况 forecastList: [], // 城市展示 hotCitys: ["北京", "上海", "广州", "深圳"] }, methods: { queryWeather() { // 将天气情况清零 this.forecastList = []; // axios获得天气状况 axios .get(`http://wthrcdn.etouch.cn/weather_mini?city=${this.city}`) .then(res => { console.log(res); this.forecastList = res.data.data.forecast; }) .catch(err => { console.log(err); }) .finally(() => { }); }, // 点击城市触发queryWeather方法，获得天气情况 clickSearch(city) { this.city = city; this.queryWeather(); } } });
/*css展示页面前置css修改*/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;}/* 清除浮动，解决margin-top塌陷 */.clearfix:before,.clearfix:after{ content:''; display:table; }.clearfix:after{ clear:both;}.clearfix{ zoom:1;}.fl{ float:left;}.fr{ float:right;}/*css展示页面内部css修改*/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; }
结束语
好的,关于Vue入门案例的内容就介绍到这里,希望能为你带来帮助!
附录
该文章属于学习内容，具体参考B站黑马程序员vue前端基本教程
这里附上链接：01.课程介绍_哔哩哔哩_bilibili