Vue学习
Vue基础
el挂载点
- Vue实例作用范围（el命中的元素及其后代元素内部都可以使用）
- 多种选择器(与css选择器相同)
- 不同dom元素(可以使用其余元素，但是不建议使用body和html)
<body>
<div id="app" class="app">
{{message}}
<span>{{message}}</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app=new Vue({
//el:"#app",
//el:".app",
//el:"div",//注意引号
el:"#body",//报错
data:{
message:"hello vue"
}
})
</script>
</body>
data数据类型
- Vue中用到的数据存放在data中
- data中可以写复杂类型的数据
- 渲染对象时遵循语法
<div id="app" >
{{message}}
<!-- <h2>{{school}}</h2> -->
<h2>{{school.name}} {{school.mobile}}</h2>
<ul>
<li>{{house[0]}}</li>
<li>{{house[1]}}</li>
<li>{{house[2]}}</li>
<li>{{house[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:"hello vue",
school:{
name:"王俊杰",
mobile:"138-1916-3182"
},
house:["仓前","临平","老余杭","临安"]
}
})
</script>
Vue本地应用
v-text指令
指令内部也可以插入表达式
<div id="app" >
<!-- 标签内部内容全部替换 -->
<h2 v-text="message+'!'"></h2>
<!-- 替换部分内容 -->
<h2>sublime {{message+"!"}}</h2>
<!-- 字符串表达式拼接 -->
</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>
v-html
等同于innerHTML，如果内容为html结构，会有效果，如果只是普通内容，不会有显示
<body>
<div id="app" >
<p v-text="content"></p>
<p v-html="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='#''>超链接</a>"
}
})
</script>
</body>
v-on
为指定的元素绑定事件
指令可以简写@
@keyup.enter 回车事件
<div id="app" >
<h2 v-text="food" @click="changefood"></h2>
<input type="button" name="" value="v-on指令" v-on:click="doti">
<input type="button" name="" value="v-on简写" @click="doit">
<input type="button" name="" value="双击事件" @dblclick="dbl">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app=new Vue({
el:"#app",
data:{
food:"西蓝花炒蛋"
},
methods:{
doti:function(){
alert("做it");
},
doit:function(){
alert("做黑马");
},
dbl:function(){
alert("双击事件");
},
changefood:function(){
//console.log(this.food);
this.food+="好好吃！"
}
},
})
</script>
v-show
根据表达式的真假，决定元素是否显示，修改元素的display属性
<div id="app" >
<img src="C:\Users\wjj\Desktop\Image\eva\Asuka\1.jpg" v-show=
"age>5"/>
<!-- "isShow" -->
>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app=new Vue({
el:"#app",
data:{
food:"西蓝花炒蛋",
isShow:true,
age:16
}
})
</script>
v-if
根据表达式的真假，决定元素是否显示，直接操作dom树，将元素删除添加，使用方法同v-show
v-bind
通过:属性名="表达式" 给属性赋值 类属性推荐使用对象，而不是三元表达式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Vue01基础入门</title>
<link rel="stylesheet" href="">
<style>
.active{
border: 1px solid red;
}
</style>
</head>
<body>
<div id="app" >
<!-- 注意类型上需要带上引号 -->
<img :src="imgSrc" :title="imgTitle" :class="isActiry?'active':''">
<img :src="imgSrc" :title="imgTitle" :class="{active:isActiry}">
<input type="button" name="" value="改变样式" @click="changeActive">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app=new Vue({
el:"#app",
data:{
imgSrc:"C:/Users/wjj/Desktop/Image/eva/Asuka/1.jpg",
imgTitle:"Asuka",
isActiry:false
},
methods:{
changeActive:function(){
this.isActiry=!this.isActiry;
}
}
})
</script>
</body>
</html>
v-for
根据数据生成列表结构 会根据第一个li，复制n遍，动态修改数组也会动态修改列表内容
<body>
<div id="app" >
<ul>
<li v-for="(item,index) in food">{{item.name}}:{{item.price}}RMB</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app=new Vue({
el:"#app",
data:{
arr:["杭州","上海","北京"],
food:[
{name:"汉堡",price:"20"},
{name:"薯条",price:"10"}
]
}
})
</script>
</body>
v-model
双向数据绑定(表单元素),可以非常方便的设置和获取表单元素
<body>
<div id="app" >
<input type="text" name="" v-model="message" @keyup.enter="getm">
<input type="button" name="" value="修改" @click="setm">
<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:"wjj"
},
methods:{
getm:function(){
alert(this.message);
},
setm:function(){
this.message="hjy";
},
add:function(){
this.food.push({name:"鸡肉卷",price:"15"})
},
remove:function(){
this.food.shift();
}
}
})
</script>
</body>
Vue网络应用
使用axios进行交互
- 使用get方法是，只有一个参数就是url
- 使用post方法是，需要在第二个参数中加入键值对
- axios.get("url?key=value&key=value").then(function(response){},function(err))
- axios.post("url",{key:value,key:value}).then(function(response){},function(err))
<body>
<input type="button" name="" value="get请求" class="get">
<input type="button" name="" value="post请求" class="post">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
document.querySelector(".get").onclick=function(){
axios.get("http://localhost:8080/o2o/shopadmin/getshopbyid?shopId=1").
then(function(response){
console.log(response.data);
},
function(err){
alert(err)
}
)
}
document.querySelector(".post").onclick=function(){
axios.post("http://localhost:8080/o2o/shopadmin/getshopbyid",{shopId:"1"}).
then(function(response){
console.log(response.data);
},
function(err){
console.log(err);
}
)
}
</script>
</body>
vue+axios
axios回调函数中的this已经发生改变，无法定位到data中的数据（将this进行保存）
<body>
<div id="app">
<input type="button" name="" value="获取笑话" @click="getjoke">
<p >{{joke}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
var app=new Vue({
el:"#app",
data:{
joke:"笑话"
},
methods:{
getjoke:function(){
var that=this;
axios.get("https://autumnfish.cn/api/joke").then(
function(response){
that.joke=response.data;
console.log(response.data);
},function(err){
alert(err)
})
}
}
})
</script>
</body>
使用axios导致后台接收不到数据
百度到的原因是，后台使用的是SSM框架，Springmvc会从url中取数据，可是我明明是从reques中取数据的，不知道发生了什么。
解决方案
还是听说的，听说兼容性比较差，不过我还不配考虑这种高度的问题
var param = new URLSearchParams();
param.append('shopId', '1');
axios.post("http://localhost:8080/o2o/shopadmin/getshopbyid",param).
then(function(response){
console.log(response.data);
},
function(err){
console.log(err);
}
)
