一、简介
二、第一个Vue程序
<html>
<head>
</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>
三、VUE知识点
4. v-on指令
可以缩写成@
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="testId">
<h2 @click="haochi" v-text="food"></h2>
<h2 v-on:click="haochi" v-text="food"></h2>
</div>
<script>
var a = new Vue({
el:"#testId",
data:{
food:"西蓝花炒水泥"
},
methods:{
haochi:function(){
this.food+="难吃啊！"
}
}
})
</script>
</body>
</html>
5. 简单计数器
<html>
<head>
<!-- 导入vue框架 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- html结构 -->
<div id="counter">
<!-- 计数器架构 -->
<button @click="jian" type="button" style="font-size:60px">-</button>
<h2 v-text="numb" style="font-size:60px"></h2>
<button @click="jia" type="button" style="font-size:60px">+</button>
</div>
<!-- 创建vue实例 -->
<script>
var a = new Vue({
el:"#counter",
data:{
numb:0
},
methods:{
jian:function(){
if(this.numb>0){
this.numb--;
}else{
alert("没货了就")
}
},
jia:function(){
if(this.numb<10){
this.numb++;
}else{
alert("别点了行吗求你了，溢出了")
}
}
}
})
</script>
</body>
</html>
6. v-show指令
控制元素隐藏显示
<html>
<head>
<!-- 导入vue框架 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- html结构 -->
<div id="shower">
<img v-show="age>=18" src="./assets/logo.svg" height="200px">
</div>
<!-- 创建vue实例 -->
<script>
var a = new Vue({
el:"#shower",
data:{
age:17
}
})
</script>
</body>
</html>
7. v-if指令
v-show：加代码隐藏
v-if：直接删除
根据表达式的真假，切换元素显示和隐藏（操纵dom）
8. v-bind 指令
<html>
<head>
<!-- 导入vue框架 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- html结构 -->
<div id="shower">
<!-- 完整写法 -->
<h2 v-bind:style="testStyle">123</h2>
<!-- 缩写 -->
<h2 :style="testStyle">66</h2>
</div>
<!-- 创建vue实例 -->
<script>
var a = new Vue({
el:"#shower",
data:{
testStyle:"color:red",
isStyle:10
}
})
</script>
</body>
</html>
9.图片切换
<html>
<head>
<!-- 导入vue框架 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- html结构 -->
<div id="shower">
<button @click="pref" v-show="index>0" style="float: left;height: 300px;width: 100px;font-size: large;">《</button>
<img :src="imgSrc[index]" style="float: left" width="500px" height="300px" >
<button @click="next" v-show="index<imgSrc.length-1" style="float: left;height: 300px;width: 100px;font-size: large;"> 》</button>
</div>
<!-- 创建vue实例 -->
<script>
var a = new Vue({
el:"#shower",
data:{
imgSrc:[
"./img/img01.png",
"./img/img02.png",
"./img/img03.png",
"./img/img04.png",
"./img/img05.png",
],
index : 0
},
methods:{
pref:function(){
this.index--;
},
next:function(){
this.index++;
}
}
})
</script>
</body>
</html>
10. v-for指令
<html>
<head>
<!-- 导入vue框架 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- html结构 -->
<div id="shower">
<button @click="add">加</button>
<button @click="remove">减</button>
<ul>
<li v-for="(item1,index) in arr">
第{
{ index }}项：{
{ item1 }}
</li>
</ul>
</div>
<!-- 创建vue实例 -->
<script>
var a = new Vue({
el:"#shower",
data:{
arr:["哈哈1","哈哈2","哈哈3","哈哈4"]
},
methods:{
add:function(){
this.arr.push("第"+this.arr.length+"项："+"添加好了")
},
remove:function(){
this.arr.pop()
}
}
})
</script>
</body>
</html>
v-on补充
<html>
<head>
<!-- 导入vue框架 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- html结构 -->
<div id="shower">
<input type="text" @keyup.enter="eat('几顿饭dw啊')">
<button>大</button>
</div>
<!-- 创建vue实例 -->
<script>
var a = new Vue({
el:"#shower",
methods:{
eat:function(message){
alert("吃了没"+message);
},
}
})
</script>
</body>
</html>
v-model指令（双向数据绑定）
网页数据 绑定 后台数据（双向数据绑定）
<html>
<head>
<!-- 导入vue框架 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- html结构 -->
<div id="shower">
<input v-model="message" @keyup.enter="enterThings">
</div>
<!-- 创建vue实例 -->
<script>
var a = new Vue({
el:"#shower",
data:{
message:"换一下值"
},
methods:{
enterThings:function(){
alert(this.message)
}
}
})
</script>
</body>
</html>
小黑记事本
<html>
<head>
<!-- 导入vue框架 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- html结构 -->
<div id="blackNote">
<input v-model="message" @keyup.enter="add">
<button @click="remove">点我删除</button>
<button @click="clear">清空</button>
<ul>
<li v-for="(item,index) in arr">
<a>{
{ item }}：</a>
<a @click="remove(index)">删除</a>
</li>
</ul>
</div>
<!-- 创建vue实例 -->
<script>
var a = new Vue({
el:"#blackNote",
data:{
message:"",
arr:[1,2,3,4,5,6]
},
methods:{
add:function(){
this.arr.push(this.message)
},
remove:function(index){
this.arr.splice(index,1)
},
clear:function(){
this.arr = []
}
}
})
</script>
</body>
</html>
四、网络应用
1. axios
导包：
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
/*
接口1：随机笑话
请求地址：https://autumnfish.cn/api/joke/list
请求方法：get
请求参数：num（笑话条数，数字）
响应内容：随机笑话
接口2：用户注册
请求地址：https://autumnfish.cn/api/user/reg
请求方法：post
请求参数：username（用户名，宇符串）
响应内容：注册成功或失败
*/
<!-- 导入axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
axios.get(URL)
.then(成功函数,失败函数)
axios.post(URL,参数)
.then(成功函数,失败函数)
</script>
<html>
<head>
<!-- 导入axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<!-- html结构 -->
<div id="blackNote">
<button id="getJoke">get点我获取笑话</button>
<button id="postBtn">post请求，注册</button>
</div>
<!-- 创建vue实例 -->
<script>
/*
接口1：随机笑话
请求地址：https://autumnfish.cn/api/joke/list
请求方法：get
请求参数：num（笑话条数，数字）
响应内容：随机笑话
接口2：用户注册
请求地址：https://autumnfish.cn/api/user/reg
请求方法：post
请求参数：username（用户名，宇符串）
响应内容：注册成功或失败
*/
var a = document.getElementById("getJoke");
a.onclick = function(){
console.log(11111111111)
axios.get("https://autumnfish.cn/api/joke/li21st?num=1")
.then(function(success){
console.log(success)
},function(error){
console.log(error)
})
}
var b = document.getElementById("postBtn");
b.onclick = function(){
axios.post("https://autumnfish.cn/api/user/reg",{
username:'huochai666'})
.then(function(data){
console.log(data);
},function(error){
console.log(error);
})
}
</script>
</body>
</html>
2. axios加vue
<html>
<head>
<!-- 导入vue框架 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 导入axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<!-- html结构 -->
<div id="blackNote">
<button @click="nextJoke">get点我获取笑话</button>
<p>{
{ joke }}</p>
</div>
<!-- 创建vue实例 -->
<script>
var a = new Vue({
el:"#blackNote",
data:{
joke:"很好笑的笑话！"
},
methods:{
nextJoke:function(){
var that = this;
axios.get("https://autumnfish.cn/api/joke")
.then(function(data){
that.joke = data.data;
},function(err){
that.joke = err;
})
}
}
})
</script>
</body>
</html>