文章目录
vue是一个用于创建用户界面的开源JavaScript框架,也是一个创建单页应用的Web应用框架;Vue所关注的核心是MVC模式中的视图层,同时,它也能方便地获取数据更新,并通过组件内部特定的方法实现视图与模型的交互。
优点:1.JavaScript框架 2.简化Dom操作 3.响应式数据驱动
学前需知:HTML、CSS、JavaScript、Ajax
- HTML 定义了网页的内容
- CSS 描述了网页的布局
- JavaScript 控制了网页的行为
- Web数据交互方式,局部刷新
官方文档:https://cn.vuejs.org
01.Vue基础
第一个Vue程序:
导入开发版本的Vue.js
创建Vue实例对象,设置el属性和data属性
使用简洁的模板语法把数据渲染到页面上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app =new Vue({
el:"#app",
data:{
message:"hello Vue!"
}
})
</script>
</body>
</html>
程序解释:
**el:**是用来设置Vue实例挂载(管理)的元素,绑定元素
1.vue的作用范围
Vue会管理el选项命中的元素及其内部的后代元素
2.是否可以选用其他的选择器
可以,但建议使用id选择器3.是否可以设置其他的dom元素
可以使用其他的双标签,不能使用HTML和BODY 和单标签
data:
1.Vue中用到的数据定义在data中
2.data中可以写复杂类型的数据
3.渲染复杂类型数据时,遵循js的语法即可 .语法,数组的索引语法
<div id="app">
{{ message }}
<!-- 对象单一属性 -->
<h2>{{school.name}} {{school.mobile}}</h2>
<ul>
<li>{{campus[[0]]}}</li>
<li>{{campus[[1]]}}</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app =new Vue({
el:"#app",
data:{
message:"hello,vue",
school:{
name:"小黑",
mobile:"130302030302020"
},
campus:["北京","上海"]
}
})
</script>
02 本地应用
2.1 内容绑定,事件绑定
v-text:设置标签内容
<!-- 1.默认写法会替换全部内容 -->
<h2 v-text = "message">北京</h2>
<!-- 2.使用差值表达式{undefined{}}可以替换指定内容 -->
<!--内部支持写表达式(如字符串拼接)-->
<h2>{{ message+"!" }}深圳</h2>
v-html
1.v-html指令的作用是:设置元素的innerHTML
2内容中有html结构会被解析为标签
3.v-text指令无论内容是什么,只会解析为文本
4.解析文本使用v-text,需要解析html结构使用v-html
v-on基础
1.v-on指令的作用是:为元素绑定事件:v-on:click、v-on:monseenter、v-on:dblclick
2.事件名不需要写on
3.指令可以简写为@
4.绑定的方法定义在methods属性中
5.方法内部通过this关键字可以访问定义在data中数据
<script src="https://unpkg.zhimg.com/vue/dist/vue.js"></script>
<div id="app">
<input type="button" value="事件绑定" v-on:click="hanshu"> </input>
<h2 @click="getFood">{{food}}</h2>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
food:"西红柿"
},
methods:{
hanshu:function(){
alert("jslfaj")
},
getFood:function(){
console.log(this.food)
this.food += "我喜欢"
}
}
})
</script>
**应用实例:计数器 **
1.点击加减号 中间的数字会进行对应的加减
2.当数字为0时点击减号按钮会弹出提示信息
3.当数字为10时点击加号按钮会弹出提示信息
<div id="app">
<input type="button" value="-" @click="sub"/>
<span >{{value}}</span>
<input type="button" value="+" @click="add"/>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
value:0
},
methods:{
add:function(){
if(this.value == 10){
alert("已经达到了最大值了");
return;
}
this.value++;
},
sub:function(){
if(this.value == 0){
alert("已经达到了最小值了");
return;
}
this.value--;
}
}
})
</script>
2.2 显示切换,属性绑定
v-show
1.根据真假切换元素的显示状态原理是修改元素的display,实现显示隐藏
2.后面的内容,最终都会解析为布尔值; true元素显示,值为false元素隐藏
div里面的元素
<img v-show="isShow" src="./1.jpg">
vue对象的信息
var app =new Vue({
el: "#app",
data:{
isShow:false
}
可以用表达式:v-show=“temp>=20”, temp为data里面的信息
v-if
1.v-if指令的作用是:根据表达式的真假切换元素的显示状态
2.本质是通过操纵dom元素来切换显示状态
3.表达式的值为true,元素存在于dom树中,为false,从dom树中移除
4.频繁的切换v-show,反之使用v-if,前者的切换消耗小,操作dom树性能消耗大
v-if和v-show的区别 v-show直接修改display 而v-if是直接抹除标签
v-bind指令
设置元素的属性(比如:src,title,class)
1.整写法是 v-bind: 属性名=表达式 eg: v-bind:src= “imgSrc”, imgSrc为data里面的信息
2.简写的话可以直接省略v-bind,只保留 :属性名
3.需要动态的增删class建议使用对象的方式
图片切换案例
1.首图不显示上一张按钮 2.尾图不显示下一张按钮 3.中间图显示上、下一张按钮
<script src="https://unpkg.zhimg.com/vue/dist/vue.js"></script>
<div id="app">
<button @lick="pre" v-show="index!=0" class="left">上一张</button>
<img :src="imgArr[index]" style="width: 200px;"/>
<button @click="next" v-show="index!=imgArr.length-1" class="right">下一张</button>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
imgArr:["a1.png","a2.png","a3.png"],
index:0,
},
methods:{
pre:function(){
this.index--;
},
next:function(){
this.index++;
}
}
})
</script>
2.3 列表循环,表单元素绑定
v-for
1.v-for指令的作用是:根据数据生成列表结构
2.数组经常和v-for结合使用
3.语法是( item,index ) in数据
4.item和index可以结合其他指令- -起使用
5.数组长度的更新会同步到页面上,是响应式的v-for="(item,index) in arr 第一个是值,第二个是索引,名字可更改,arr为vue对象中data的信息
<script src="https://unpkg.zhimg.com/vue/dist/vue.js"></script>
<div id="app">
<ul>
<li v-for="(item,index) in arr" >
{{index}} {{item}}
</li>
</ul>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
arr:["Sunday","Monday","TuesDay","Wednesday","Thursday","Friday","Saturday"]
},
})
</script>
效果图:
v-on补充
1.可以传参
2.事件的后面跟上.修饰符可以对事件进行限制3.enter可以限制触发的按键为回车
4.事件修饰符有多种:https://cn.vuejs.org/v2/api/#v-on
<input type="button" @click="doIt(p1,p2)" />
<input type="text" @keyup.enter="sayHi">
v-model
1.v-model:获取和设置表单元素的值(双向数据绑定)
2.v-model指令的作用是便捷的设置和获取表单元素的值
3.绑定的数据会和表单元素值相关联
4.绑定的数据←→表单元素的值
<!-- 获取和设置表单元素的值( -->
<script src="https://unpkg.zhimg.com/vue/dist/vue.js"></script>
<div id="app">
<input type="text" v-model="message" />
<button> {{message}} </button>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
message:"请输入"
}
})
</script>
效果图[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GEPcC5Hl-1654312809594)(…/…/…/AppData/Roaming/Typora/typora-user-images/image-20220603221854431.png)]
记事本案例1
1 新增:用户在本文筐输入回车即可将用户输入信息添加在列表中并展示出来
2 删除:用户点击删除按钮即可删除列表中的该条信息
3 统计:展示列表中的总条数
4 清空:用户点击clear按钮即可清除列表中的所有数据
5 隐藏:列表为空时,下面的条数和清除按钮不显示
<script src="https://unpkg.zhimg.com/vue/dist/vue.js"></script>
<h2>记事本</h2>
<div id="app">
<input type="text" v-model="message" @keyup.enter="save"/>
<ul>
<li v-for="(item,index) in list">
{{index+1}} {{item}} <button @click="remove(index)" >删除</button>
</li>
</ul>
<span v-show="list.length!=0">共{{list.length}}条</span> <button @click="clear" v-show="list.length!=0">Clear</button>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
list:["吃饭","睡觉"],
message:"please input"
},
methods:{
//添加列表元素函数
save:function(){
this.list.push(this.message);
},
//删除列表元素函数
remove:function(index){
this.list.splice(index,1);
},
//清除列表元素函数
clear:function(){
this.list=[];
}
}
})
</script>
03 网络应用
axios:网络请求库
1.axios:功能强大的网络请求库
2.axios必须先导入才可以使用
3.使用get或post方法即可发送对应的请求
4.then方法中的回调函数会在请求成功或失败时触发
5.通过回调函数的形参可以获取响应内容,或错误信息
6.文档传送门:https://github.com/axios/axios
7.axios官网文档:http://www.axios-js.com/zh-cn/docs/
模板:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
axios.get("地址?key=value&key2=values").then(function(response){},function(err){})
axios.post("地址",{key:value,key2:value2}).then(function(response){},function(err){})
接口
随机获取笑话的接口:https://autumnfish.cn/api/joke/list
用户注册接口1:https://autumnfish.cn/api/user/reg
<script src="https://unpkg.zhimg.com/vue/dist/vue.js"></script>
<button class="get">get请求</button>
<button class="post">post请求</button>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
document.querySelector(".get").onclick = function(){
axios.get("https://autumnfish.cn/api/jokess/list?num=4").then(function(response){
console.log(response);
},function(error){
console.log(error);
})
}
document.querySelector(".post").onclick = function(){
axios.post("https://autumnfish.cn/api/user/reg",{username:"好的撒旦法发杀是啊"}).then(function(response){
console.log(response);
},function(error){
console.log(error);
})
}
</script>
效果图:
vue结合axios
<script src="https://unpkg.zhimg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<div id="app">
<input type="button" value="获取笑话" @click="getJokes"/>
<p>{{joke}}</p>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
joke:"笑话"
},
methods:{
getJokes:function(){
不同位置的this指的不是同一个,用that代替外面的this
// 1.this
//console.log(this.joke)
var that = this;
axios.get("https://autumnfish.cn/api/joke/list?num=1").then(function(response){
// 2.this
//console.log(this.joke);
that.joke = response.data.jokes;
},function(error){
console.log(error);
})
}
}
})
</script>
查询天气
1.回车查询
1.按下回车(v-on.enter)
2.查询数据(axios 接口v-model)
3.渲染数据(v-for 数组that)
2.点击查询
天气接口:http://wthrcdn.etouch.cn/weather_mini
<script src="https://unpkg.zhimg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<div id="app">
<h2>天气预报</h2>
<input type="text" @keyup.enter="searchWeather" v-model="city"></input>
<input type="button" value="搜索" @click="searchWeather"></input>
<br/>
<span @click="changeCity('北京')">北京</span>
<span @click="changeCity('上海')">上海</span>
<span @click="changeCity('广州')">广州</span>
<span @click="changeCity('深圳')">深圳</span>
<ul>
<li v-for="item in weatherList">
<div>{{item.type}}</div>
<div>{{item.low}} ~ {{item.high}}</div>
<div>{{item.date}}</div>
</li>
</ul>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
city:"武汉",
weatherList:[]
},
methods:{
searchWeather:function(){
var that = this;
axios.get("http://wthrcdn.etouch.cn/weather_mini?city="+this.city).then(function(response){
that.weatherList = response.data.data.forecast;
}).catch(function(err){})
},
changeCity:function(p){
this.city = p;
this.searchWeather();
}
}
})
</script>
效果图:
Q:cdn.jsdelivr.net/npm访问时间过长
A:全局搜索 cdn.jsdelivr.net/npm 替换为 unpkg.zhimg.com unpkg.zhimg.com 是国内镜像
Q:Uncaught SyntaxError: Unexpected identifier错误解决分析
A:代码中缺少一个“,”(英文逗号)
对象的属性可以push、shift:this.vegetables.shift();
数组也是push,不要忘了取data里面的数据要用this
delete是关键字,用remove代替