高速通道
话不多说,直接开干。
先来个官网实栗吧。
官网实栗
<body>
<!--第一个vue实栗-->
<div id="app">
{{message}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//注意这里构造Vue开头要大写哦,不然会报引用错误
var app = new Vue({
el:'#app',
data:{
message:'hello world'
}
})
</script>
</body>
el挂载点:
1、el是用来设置vue实栗挂载(管理)的元素
2、vue会管理el选项命中的元素及其内部的后代元素
3、可以使用其他的选择器,建议使用ID选择器
4、可以使用其他双标签,除了HTML和BODY
data数据对象:
vue中用到的数据定义在data中
data可以写复杂类型的数据,包括表达式
vue指令
vue指令是指以v-开头的一组特殊语法
v-text: 设置标签的文本值(textContent)
<body>
<div id="app">
<h3 v-text="message">小白</h3>
<h3 v-text="info">定居在</h3>
<h3>{{address}}定居</h3>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
message:'前端程序员',
info:'目前',
address:'杭州'
}
})
</script>
</body>
v-text指令的作用是设置标签的内容
默认写法会替换全部内容,使用{{}}可以替换指定内容
内部支持表达式
v-html: 设置标签的innerHTML
<body>
<div id="app">
<p v-html="content"></p>
<p v-text="content"></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
content:"<a href='https://blog.csdn.net/weixin_38289787'>我的博客</a>"
}
})
</script>
</body>
v-html指令用来设置元素的innerHTML
内容中有html结构会被解析为标签
v-text指令无论什么内容,只会解析为相应文本
v-on: 为元素绑定事件
<body>
<div id="app">
<input type="button" value="v-on指令" v-on:click="justDo">
<input type="button" value="v-on简写" @click="doIt">
<input type="button" value="双击事件" @dblclick="changeWrite">
<h1 @click="changeWrite">{{write}}</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
write:"公众号:就这样写"
},
methods:{
justDo:function () {
alert('just do it')
},
doIt:function () {
alert('只做IT')
},
changeWrite:function () {
this.write+="写的真不赖!"
}
}
})
</script>
</body>
v-on指令为元素绑定事件
事件名不需要写on
指令可以简写为@
绑定的方法定义在methods属性中
方法内部通过this关键字可以访问定义在data中的数据
<body>
<div id="app">
<input type="button" value="点击" @click="justDo('IT','程序员')">
<input type="text" @keyup.enter="doIt">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:'#app',
methods:{
justDo:function (a,b) {
alert('just do '+a+b)
},
doIt:function () {
alert('只做IT')
}
}
})
</script>
</body>
事件绑定的方法写出函数调用的形式,可以传入自定义参数
事件后面跟上.修饰符可以对事件进行限制。.enter可以限制触发的按键为回车键
事件修饰符有很多,详细可参考文末链接
v-show:根据表达式的真假切换元素的显示和隐藏
<body>
<div id="app">
<input type="button" value="切换显示状态" @click="changeIsShow">
<input type="button" value="年岁增长" @click="addAge">
<p>我今年{{age}}岁了</p>
<img v-show="isShow" src="../img/zyeb.jpg">
<img v-show="age>=18" src="../img/zyeb.jpg">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
isShow:false,
age:17
},
methods:{
changeIsShow:function () {
this.isShow = !this.isShow;
},
addAge:function () {
this.age++;
}
}
})
</script>
</body>
v-show指令根据真假切换元素的显示状态
原理是修改元素的display,实现显示与隐藏
指令后面的内容最终会被解析成布尔值,值为true时元素显示
数据改变后,相应元素的显示状态也会发生改变
v-if:根据表达式真假,切换元素显示与隐藏
<body>
<div id="app">
<input type="button" value="切换显示状态" @click="changeIsShow">
<input type="button" value="年岁增长" @click="addAge">
<p>我今年{{age}}岁了</p>
<img v-show="isShow" src="../img/zyeb.jpg">
<p v-if="age>=18">枕上诗书闲处好</p>
<p v-if="age>=19">门前风景雨来佳</p>
<p v-if="age>=20">朝暮与年岁并往</p>
<p v-if="age>=21">然后与你一同行至天光</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
isShow:false,
age:17
},
methods:{
changeIsShow:function () {
this.isShow = !this.isShow;
},
addAge:function () {
this.age++;
}
}
})
</script>
</body>
v-if指令根据表达式的真假切换元素的显示状态
原理是通过操作DOM元素来切换显示状态
表达式的值为true,元素存在DOM树中,为false则从DOM树中移除
频繁的切换使用v-show,否则使用v-if,因为前者切换消耗更小
v-bind:设置元素的属性
<head>
<meta charset="UTF-8">
<title>v-bind实栗</title>
<style>
.active{
border: 1px red dashed;
}
</style>
</head>
<body>
<div id="app">
<img v-bind:src="imgSrc">
<!-- 省略写法-->
<img :src="imgSrc" :title="imgTitle">
<img :src="imgSrc" :title="imgTitle" :class="isActive?'active':''" @click="changeClass">
<!-- 对象方式-->
<img :src="imgSrc" :title="imgTitle" :class="{active:isActive}" @click="changeClass">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
imgSrc:'../img/zyeb.jpg',
imgTitle:'章鱼恶霸',
isActive:false
},
methods:{
changeClass:function () {
this.isActive = !this.isActive;
}
}
})
</script>
</body>
v-bind为元素绑定属性
完整写法是 v-bind:属性名,可以省略v-bind,只保留 :属性名
动态增删class建议使用对象方式
v-for:根据数据生成列表结构
<body>
<div id="app">
<input type="button" value="新爱好" @click="add">
<input type="button" value="淘汰爱好" @click="remove">
<ul>
<li v-for="(item,index) in arr">
{{index+1}}前端热门技术:{{item}}
</li>
</ul>
<p v-for="item in hobbies" :title="item.name">
{{item.name}}
</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
arr:["HTML","CSS","JavaScript","Vue"],
hobbies:[{name:"篮球"},{name:"阅读"}]
},
methods:{
add:function () {
this.hobbies.push({name:"学习"});
},
remove:function () {
this.hobbies.shift();
}
}
})
</script>
</body>
v-for指令根据数据生成列表结构,语法是(item,index) in 数据
数组经常和v-for结合使用
item和index可以结合其他指令一起使用
数组长度的更新会同步到页面上,是响应式的
v-model:获取和设置表单元素的值(双向数据绑定)
<body>
<div id="app">
<input type="button" value="重置message" @click="setMsg">
<input type="text" v-model="message" @keyup.enter="getMsg">
<p>{{message}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
message:"自信者天助"
},
methods:{
setMsg:function () {
this.message="自信才有未来";
},
getMsg:function () {
alert(this.message);
}
}
})
</script>
</body>
v-model指令便捷的设置和获取表单元素的值
绑定的数据和表单元素的值互相关联
网络请求 axios
一路走来,前端发展的过程中诞生了很多优秀的前后端交互的技术。对jQuery Ajax 、fetch 和 axios 三者进行比较,尽管 jQuery 对于现在来讲比较老旧了,但这丝毫不妨碍它是一个优秀的类库,它提供的 Ajax 功能也确实是非常好。而 fetch 后来的替代方案,本身的设计也是可圈可点的,只是现在来讲还过于稚嫩,不适用于我们业务中推广使用。相比之下,axios 可算是当打之年,从设计上、从体积上,都很适用现在的各种前端技术体系,因此,可以进一步的学习和使用这个技术。
想了解更多相关内容的同学可参考axios中文文档
使用axios进行网络交互案例
执行GET
请求
// 为给定 ID 的 user 创建请求
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
// 上面的请求也可以这样做
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
执行POST
请求
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
执行多个并发请求
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) {
// 两个请求现在都执行完成
}));
像其他包一样,axios必须先导入才能使用
使用get或post方法即可发送对应的请求
then方法中的回调函数会在请求成功或失败时触发
通过回调函数的形参可以获取服务器响应内容或错误信息