目录
前言
这里记录的是有关vue基础知识的学习。主要包括vue的基础知识、本地应用学习、网络应用的学习,以及综合应用的学习。学习视频参考的是:黑马程序员vue前端基础教程-4个小时带你快速入门vue的学习教程。
一、Vue基础知识
1. 基本框架
<!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>
</head>
<body>
</body>
</html>
引入 Vue:
<!-- 1.开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
vue官网地址:https://cn.vuejs.org/
2. el:挂载点
- el是用来设置Vue实例挂载(管理)的元素
- Vue会管理el选项命中的元素及其内部的后代元素
- 可以使用其他的选择器,但是建议使用ID选择器
- 可以使用其他的双标签,不能使用HTML和BODY
3. data:数据对象
- Vue中用到的数据定义在data中
- data中可以写复杂类型的数据
- 渲染复杂类型数据时,遵守js的语法即可
代码如下:
<!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>
<style>
.active{
border: 1px solid red;
}
</style>
</head>
<body>
<!-- 2.html结构 -->
<!-- <div id ="app" class="app"> -->
<!-- el:挂载点 -->
<!--
el是用来设置Vue实例挂载(管理)的元素
Vue会管理el选项命中的元素及其内部的后代元素
可以使用其他的选择器,但是建议使用ID选择器
可以使用其他的双标签,不能使用HTML和BODY
-->
<!-- data:数据对象 -->
<!--
Vue中用到的数据定义在data中
data中可以写复杂类型的数据
渲染复杂类型数据时,遵守js的语法即可
-->
<div id ="app">
{{ message }}
<!-- <span>{{ message }}</span> -->
<h3>{{school.name}} {{school.mobile}}</h3>
<ul>
<li>{{campus[0]}}</li>
<li>{{campus[1]}}</li>
<li>{{campus[2]}}</li>
</ul>
</div>
<!-- 1.开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- 3.创建vue示例 -->
<!-- vscode注释的快捷键:“Ctrl + /”和“Alt+Shift+A”。 -->
<!-- <script>
var app = new Vue({
//对应的是id选择器
el:'#app',
//对应的是class选择器
//el:".app",
el:"div",
data:{
message:"Hello el!"
}
})
</script> -->
<script>
var app = new Vue({
el:"#app",
data:{
message:"你好呀",
school:{
name: "是小愛呀",
mobile:"134343434343"
},
campus:["北京","上海","深圳"]
}
})
</script>
</body>
</html>
二、本地应用
1. v-text指令
- v-text指令的作用是:设置标签的内容(textContent)
- 默认写法会替换全部内容,使用差值表达式{{}}可以替换指定内容
- 内部支持写表达式
代码如下:
<div id ="vText">
<h3 v-text="message+'!!!'">上海</h3>
<h3 v-text="info+'!!!'">上海</h3>
<h3>{{message +'!!!'}}上海</h3>
</div>
<scpirt>
var vText = new Vue({
el:"#vText",
data:{
message:"是小愛呀",
info:"前端与移动教研部"
}
})
</script>
2. v-html指令
- v-html指令的作用是:设置元素的innerHTML
- 内容中有html结构会被解析为标签
- v-text指令无论内容是什么,只会解析为文本
- 解析文本使用v-text,需要解析html结构使用v-html
代码如下:
<div id ="vHtml">
<p v-html="content"></p>
<p v-text="content"></p>
</div>
var vHtml = new Vue({
el:"#vHtml",
data:{
//content:"是小愛呀"
content:"<a href='http://www.itheima.com'>是小愛呀</a>"
}
})
3. v-on指令
- v-on指令的作用是:为元素绑定事件
- 事件名不需要写on
- 指令可以简写为@
- 指令可以简写为@
- 方法内部通过this关键字可以访问定义在data中数据
代码如下:
<div id ="vOn">
<input type="button" value="v-on指令" v-on:click="doIt"/>
<input type="button" value="v-on简写" @click="doIt"/>
<input type="button" value="双击事件" @dblclick ="doIt"/>
<h3 @click="changeFood">{{food}}</h3>
</div>
var vOn = new Vue({
el:"#vOn",
data:{
food:"麻辣小龙虾"
},
methods:{
doIt:function(){
alert("做it");
},
changeFood:function(){
//console.log(this.food);
this.food +="好好吃!"
}
}
})
v-on补充:
- 事件绑定的方法写成函数调用的形式,可以传入自定义参数
- 定义方法时需要定义形参来接收传入的实参
- 事件的后面跟上 .修饰符 可以对事件进行限制
- .enter 可以限制触发的按键为回车
- 事件修饰符有多种
代码如下:
<div id ="vOn2">
<input type="button" value="点击" @click="doIt2(666,'老铁')"/>
<input type="text" @keyup.enter="sayHi"/>
</div>
var vOn2 = new Vue({
el:"#vOn2",
methods:{
doIt2:function(p1,p2){
console.log("做it");
console.log(p1);
console.log(p2);
},
sayHi:function(){
alert("你好呀");
}
}
})
4. v-show指令
- v-show指令的作用是:根据真假切换元素的显示状态
- 原理是修改元素的display,实现显示隐藏
- 指令后面的内容,最终都会解析为布尔值
- 值为true元素显示,值为false元素隐藏
- 数据改变之后,对应元素的显示状态会同步更新
代码如下:
<div id ="vShow">
<input type="button" value="切换显示状态" @click="changeIsShow"/>
<input type="button" value="增加年龄" @click="addAge"/>
<img v-show="isShow" src="./images/bear.jpeg" alt="">
<img v-show="age>=18" src="./images/bear.jpeg" alt="">
</div>
var vShow = new Vue({
el:"#vShow",
data:{
isShow:false,
age:17
},
methods:{
changeIsShow:function(){
this.isShow = !this.isShow;
},
addAge:function(){
this.age++;
}
}
})
5. v-if指令
- v-if指令的作用是:根据表达式的真假切换元素的显示状态
- 本质:通过操纵dom元素来切换显示状态
- 区别:使用v-if控制的是dom树,添加或者移除,使用v-show控制的是样式的增加或去除;
- 用法:在频繁的操作的时候使用v-show
代码如下:
<div id ="vIf">
<input type="button" value="切换显示" @click="toggleIsShow"/>
<p v-if="isShow">我是可以隐藏的</p>
<p v-show="isShow">我是可以隐藏的 v-show修饰</p>
<h3 v-if="temperature>=35">热死啦</h3>
</div>
var vIf = new Vue({
el:"#vIf",
data:{
isShow:false,
temperature:40
},
methods:{
toggleIsShow:function(){
this.isShow = !this.isShow;
}
}
})
6. v-bind指令
- v-bind指令的作用是:为元素绑定属性
- 完整写法是v-bind:属性名
- 简写的话可以直接省略v-bind,只保留:属性名
- 需要动态的增删class建议使用对象的方式
代码如下:
<div id ="vBind">
<img v-bind:src="imageSrc" alt="">
<br>
<img :src="imageSrc" alt="" :title="imageTitle +'!!!'" :class="isActive?'active':''" @click="toggleIsActive">
<img :src="imageSrc" alt="" :title="imageTitle +'!!!'" :class="{active:isActive}" @click="toggleIsActive">
</div>
var vBind = new Vue({
el:"#vBind",
data:{
imageSrc:"http://www.itheima.com/images/logo.png",
imageTitle:"图片上悬浮显示文字",
isActive:false
},
methods:{
toggleIsActive:function(){
this.isActive = !this.isActive
}
}
})
7. v-for指令
- v-for指令的作用是:根据数据生成列表结构
- 数组经常和v-for结合使用
- 语法是(item,index)in数据
- item和index可以结合其他指令一起使用
- 数组长度的更新会同步到页面上,是响应式的
代码如下:
<div id ="vFor">
<ul>
<li v-for="item in arr">
是小愛呀----{{item}}
</li>
<br>
<li v-for="(item,index) in arr">
{{index+1 }} 是小愛呀---- {{item}}
</li>
<br>
<h3 v-for="item in vegetables" v-bind:title="item.name">
{{item.name}}
</h3>
</ul>
<input type="button" value="添加数据" @click="add"/>
<input type="button" value="删除数据" @click="remove"/>
</div>
var vFor = new Vue({
el:"#vFor",
data:{
arr:["北京","上海","广州","深圳"],
vegetables:[
{name:"麻辣小龙虾"},
{name:"番茄牛腩"}
]
},
methods:{
add:function(){
this.vegetables.push({name:"生煎"});
},
remove:function(){
this.vegetables.shift();
}
}
})
8. v-model指令
- v-model指令的作用是便捷的设置和获取表单元素的值
- 绑定的数据会和表单元素值相关联
- 绑定的数据←→表单元素的值
代码如下:
<div id ="vModel">
<input type="button" value="修改内容" @click="setMessage"/>
<input type="text" v-model="message" @keyup.enter="getMessage"/>
<h3>{{message}}</h3>
</div>
var vModel = new Vue({
el:"#vModel",
data:{
message:"是小愛呀"
},
methods:{
getMessage:function(){
alert(this.message);
},
setMessage:function(){
this.message = "学习中......";
}
}
})
9. 计数器功能区域
- 创建Vue示例时:el(挂载点),data(数据),methods(方法)
- v-on指令的作用是绑定事件,简写为@
- 方法中通过this,关键字获取data中的数据
- v-text指令的作用是:设置元素的文本值,简写为{{}}
- v-html指令的作用是:设置元素的innerHTML
代码如下:
<div id ="counter">
<div class="input-num">
<button @click ="sub">
-
</button>
<span> {{num}} </span>
<button @click="add">
+
</button>
</div>
</div>
var counter = new Vue({
el:"#counter",
data:{
num:0
},
methods:{
add:function(){
// console.log('add');
if(this.num < 10){
this.num ++;
}else{
alert('别点啦,最大啦!')
}
},
sub:function(){
// console.log('sub')
if(this.num>0){
this.num --;
}else{
alert('别点啦,最小啦!')
}
}
}
})
10. 图片切换
- 列表数据使用数组保存
- v-bind指令可以设置元素属性,比如src
- v-show和v-if都可以切换元素的显示状态,频繁切换用v-show
代码如下:
<div id ="mask">
<div class="center">
<h2 class="title">
<img src="./images/logo.png" alt="">
图片切换
</h2>
<!-- 图片 -->
<img :src="imgarr[index]" alt="">
<!-- 左箭头 -->
<a href="javascript:void(0)" v-show="index!=0" @click="prev" class="left">
<img src="./images/prev.png" alt="">
</a>
<!-- 右箭头 -->
<a href="javascript:void(0)" v-show="index<imgarr.length-1" @click="next" class="right">
<img src="./images/next.png" alt="">
</a>
</div>
</div>
var mask = new Vue({
el:"#mask",
data:{
imgarr:[
"./images/bear.jpeg",
"./images/house.jpeg",
"./images/our.jpeg",
"./images/pig.webp",
"./images/road.jpeg",
],
index:0
},
methods:{
prev:function(){
this.index --;
},
next:function(){
this.index ++;
}
}
})
11. 記事本
- 列表结构可以通过v-for指令结合数据生成
- v-on结合事件修饰符可以对事件进行限制,比如.enter
- v-on在绑定事件时可以传递自定义参数
- 通过v-model可以快速的设置和获取表单元素的值
- 基于数据的开发方式
代码如下:
<!-- 主体区域 -->
<section id="todoapp">
<!-- 输入框 -->
<header class="header">
<h1>记事本</h1>
<input v-model="inputValue" @keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder="请输入任务" calss="new-todo"/>
</header>
<!-- 列表区域 -->
<section class="main">
<ul calss="todo-list">
<li class="todo" v-for="(item,index) in list">
<div calss="view">
<span calss="index">{{index+1}}.</span>
<label>{{item}}</label>
<button calss="destory" @click="remove(index)"></button>
</div>
</li>
</ul>
</section>
<!-- 统计和清空 -->
<footer calss="fotter">
<span calss="todo-count" v-if="list.length!=0">
<strong>{{ list.length }}</strong>items left
</span>
<button calss="clear-completed" @click="clear" v-show="list.length!=0">Clear</button>
</footer>
</section>
var todoapp = new Vue({
el:"#todoapp",
data:{
list:["写代码","吃饭饭","睡觉觉"],
inputValue:"好好学习,天天向上"
},
methods:{
add:function(){
this.list.push(this.inputValue);
},
remove:function(index){
console.log("删除");
console.log(index);
this.list.splice(index,1);
},
clear:function(){
this.list=[];
}
}
})
三、网络应用
1. axios基础
引入axios :
<!-- 官网提供的 axios 在线地址 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
代码如下:
<script>
/*
接口1:随机笑话
请求地址:https://autumnfish.cn/api/joke/list
请求方法:get
请求参数:num(笑话条数,数字)
响应内容:随机笑话
*/
document.querySelector(".get").onclick = function () {
axios.get("https://autumnfish.cn/api/joke/list?num=6")
// axios.get("https://autumnfish.cn/api/joke/list1234?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("https://autumnfish.cn/api/user/reg",{username:"盐焗西兰花"})
.then(function(response){
console.log(response);
console.log(this.skill);
},function (err) {
console.log(err);
})
}
</script>
2.axios+vue
引入axios和vue:
<!-- 官网提供的axios在线地址 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
代码如下:
<script>
var app = new Vue({
el:"#app",
data:{
joke:"很好笑的笑话"
},
methods:{
getJoke:function(){
//console.log(this.joke)
var that = this;
axios.get("https://autumnfish.cn/api/joke").then(function(response){
// console.log(response)
console.log(response.data);
// console.log(this.joke);
that.joke = response.data;
},function(err){})
}
}
})
</script>
总结
Vue.js是一个流行的JavaScript框架,用于构建交互式Web应用程序和单页面应用程序。以下是Vue.js的一些主要特点和功能:
-
数据驱动视图: Vue.js通过提供一个响应式和可组合的视图组件系统,将视图和状态分离开来,使开发者能够更轻松地构建交互式UI。
-
组件系统: Vue.js拥有一套完整的组件API,使开发人员能够轻松地创建可重用和可组合的UI组件。
-
声明式渲染: Vue.js通过简单的HTML模板语法,使开发者能够声明式地描述应用程序的视图结构和状态。
-
指令系统: Vue.js提供了一套内置指令,使开发者能够更轻松地操作DOM元素。
-
双向数据绑定: Vue.js通过使用v-model指令,使开发者能够轻松地实现双向数据绑定,将视图和状态保持同步。
-
轻量级: Vue.js是一个非常轻量级的框架,具有很小的体积和快速的渲染速度。
-
插件系统: Vue.js的插件系统使开发者能够轻松地扩展其功能,包括路由、状态管理和国际化等。
总的来说,Vue.js是一个非常灵活和易于使用的框架,适用于构建各种规模的Web应用程序和单页面应用程序。它具有良好的文档和社区支持,因此成为了广泛使用的JavaScript框架之一。