Js全栈开发之Vue入门基础
Vue基础入门
前几天自学完了koa2的后端，并写了几篇学习博客，今天得闲继续总结下Vue的简单基础入门，koa2加上vue基本上就可以自己玩Js全栈了。本篇只是总结一下Vue入门的使用和基础用法实例，因为很简单，就没有具体的过程，下一篇再写综合的组件应用。
文章目录
- Vue基础入门
- 1. 挂载点与data数据对象
- 2. 基础文本指令
- 3. v-on挂载事件指令
- 4. v-if和v-show指令
- 5. v-model与v-bind指令
- 6. v-for指令
- 7. axios基础使用
1. 挂载点与data数据对象
不能选body作为挂载点！
<div id="app">
{{ message }}
<h2> {{ school.name }} {{ school.mobile }}</h2>
<ul>
<li>{{ campus[0] }}</li>
<li>{{ campus[3] }}</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
message:"你好 Vue!",
school:{
name:"前端程序员",
mobile:"400-000-0000"
},
campus:["北京","上海","广州","深圳"]
}
})
</script>
2. 基础文本指令
下面是v-html和v-text的用法实例
<div id="app">
<h2 v-text="message+'!'">深圳</h2>
<h2 v-text="info+'!'">深圳</h2>
<p v-html="htmlstr"></p>
<h2>{{ message +'!'}}深圳</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
message:"前端程序员",
info:"研发部",
htmlstr:"hello Vue!
"
}
})
</script>
3. v-on挂载事件指令
<div id="app">
<input type="button" value="点击" v-on:click="doIt(666,'老铁')">
<input type="button" value="简写点击" @click="doIt(666,'老铁')">
<input type="button" value="双击" @dblclick="dbdoIt">
<input type="text" @keyup.enter="sayHi">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
methods: {
doIt:function(p1,p2){
console.log("做it");
console.log(p1);
console.log(p2);
},
sayHi:function(){
alert("吃了没");
},
dbdoIt:function(){
alert("双击事件!");
}
},
})
</script>
4. v-if和v-show指令
<div id="app">
<input type="button" value="切换显示" @click="toggleIsShow">
<p v-if="isShow">前端程序员</p>
<p v-show="isShow">前端程序员 - v-show修饰</p>
<h2 v-if="temperature>=35">热死啦</h2>
<input type="button" value="切换显示状态" @click="changeIsShow">
<input type="button" value="累加年龄" @click="addAge">
<img v-show="isShow" src="./img/monkey.gif" alt="">
<img v-show="age>=18" src="./img/monkey.gif" alt="">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
isShow:false,
temperature:33,
+age:17
},
methods: {
toggleIsShow:function(){
this.isShow = !this.isShow;
},
changeIsShow:function(){
this.isShow = !this.isShow;
},
addAge:function(){
this.age++;
this.temperature++;
}
},
})
</script>
5. v-model与v-bind指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>v-bind指令</title>
<style>
.active{
border: 1px solid red;
}
</style>
</head>
<body>
<div id="app">
<input type="button" value="修改message" @click="setM">
<input type="text" v-model="message" @keyup.enter="getM">
<h2>{{ message }}</h2>
<img v-bind:src="imgSrc" alt="">
<br>
<img :src="imgSrc" alt="" :title="imgTitle+'!!!'" :class="isActive?'active':''" @click="toggleActive">
<br>
<img :src="imgSrc" alt="" :title="imgTitle+'!!!'" :class="{active:isActive}" @click="toggleActive">
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
imgSrc:"http://www.itheima.com/images/logo.png",
imgTitle:"前端程序员",
isActive:false,
message:"哈哈哈"
},
methods: {
toggleActive:function(){
this.isActive = !this.isActive;
},
getM:function(){
alert(this.message);
},
setM:function(){
this.message ="嘻嘻嘻";
}
},
})
</script>
</body>
</html>
6. v-for指令
<div id="app">
<input type="button" value="添加数据" @click="add">
<input type="button" value="移除数据" @click="remove">
<ul>
<li v-for="(it,index) in arr">
{{ index+1 }}地区:{{ it }}
</li>
</ul>
<h2 v-for="item in vegetables" v-bind:title="item.name">
{{ item.name }}
</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
arr:["北京","上海","广州","深圳"],
vegetables:[
{name:"西兰花炒蛋"},
{name:"蛋炒西蓝花"}
]
},
methods: {
add:function(){
this.vegetables.push({ name:"花菜炒蛋" });
},
remove:function(){
this.vegetables.shift();
}
},
})
</script>
7. axios基础使用
基础使用实例
<input type="button" value="get请求" class="get">
<input type="button" value="post请求" class="post">
<!-- 官网提供的 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>
结合vue使用
<div id="app">
<input type="button" value="获取笑话" @click="getJoke">
<p> {{ joke }}</p>
</div>
<!-- 官网提供的 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>
/*
接口:随机获取一条笑话
请求地址:https://autumnfish.cn/api/joke
请求方法:get
请求参数:无
响应内容:随机笑话
*/
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>