Vue.js的指令
Vue.js的指令是以v-开头的，它们作用于HTML元素，指令提供了一些特殊的特性，将指令绑定在元素上时，指令会为绑定的目标元素添加一些特殊的行为，我们可以将指令看作特殊的HTML特性。
常用指令
- v-model
- v-if
- v-else
- v-show
- v-for
- v-bind
- v-on
v-model指令
Vue.js可以使用v-model指令实现模型和表单元素的双向绑定，也就是说模型中的数据可以显示在表单元素中，修改模型数据表单元素会跟着修改，在表单元素中输入时模型数据也会更改。
<!DOCTYPE html>
<html>
<head>
<title>使用Vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!--这是View部分，绑定了Model的数据-->
<div id="app">
<p>{{name}}</p>
<p>{{sex}}</p>
<p>{{age}}</p>
<input type="text" placeholder="Input Name" v-model="name"><br>
<input type="text" placeholder="Input Sex" v-model="sex"><br>
<input type="text" placeholder="Input Age" v-model="age"><br>
</div>
<script type="text/javascript">
//这是Model部分
var person = {name:'张三',sex:'男',age:20};
//这是ViewModel部分
var vue = new Vue({
el:'#app',
data:person
});
</script>
</body>
</html>
在文本框输入时，上方内容会更新
在控制台修改模型的数据，文本框也会更新
v-if和v-else指令
v-if指令后面可以添加条件，当条件成立时会将所在标签插入到HTML中，条件不成立时所在标签不会出现在HTML中。
v-else标签和v-if标签配合使用，当if条件不成立时，可以将其他内容插入到HTML中。
<div id="app">
<p>{{name}}</p>
<p>{{sex}}</p>
<p>{{age}}</p>
<h2 v-if="age>=18">{{name}}是成年人</h2>
<h2 v-else>{{name}}是未成年人</h2>
</div>
<script type="text/javascript">
var person = {name:'张三',sex:'男',age:20};
var vue = new Vue({el:'#app', data:person });
</script>
在控制台输入age为20，页面显示张三是成年人，输入age为15，显示张三是未成年人。
v-show指令
对条件进行判断，成立时显示标签，不成立时隐藏标签。
和v-else指令的效果比较类似，不同的是v-show指令是通过display样式实现标签的隐藏和显示，而v-if是将标签在HTML代码中插入和删除。
<h3 v-show="sex=='男'">{{name}}是男人</h3>
v-for指令
v-for指令用于遍历数组，所在的标签会反复添加。
语法是：
<标签 v-for=“变量名 in 数组名”>
<!--这是View部分，绑定了Model的数据-->
<table id="app">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<!--这里的tr会出现多个-->
<tr v-for="person in persons">
<td>{{person.name}}</td>
<td>{{person.sex}}</td>
<td>{{person.age}}</td>
</tr>
</div>
<script type="text/javascript">
//这是ViewModel部分
var vue = new Vue({ el:'#app',
data:{
//Model部分
persons:[
{name:'张三',sex:'男',age:20},
{name:'李四',sex:'女',age:22},
{name:'王五',sex:'男',age:26}
]}
});
</script>
v-bind指令
v-bind可以和HTML标签的属性配合，通过表达式绑定不同的属性值。
v-bind:属性=”表达式”
案例：
在上面案例中添加样式
<style type="text/css">
.redbg{background: red}
.greenbg{background: green}
</style>
在v-for所在的tr标签中添加：
v-bind:class=“person.sex==‘男’?‘redbg’:‘greenbg’”
这样实现了男女分别显示不同的背景颜色
v-on指令
v-on指令可以实现事件的绑定。
v-on:事件名=”函数(参数)”
注意：这里的函数需要在Vue对象的methods参数中定义
<table id="app">
<tr v-for="person in persons" v-bind:class="person.sex=='男'?'redbg':'greenbg'" v-on:click="sayHi(person.name)">
<td>{{person.name}}</td>
<td>{{person.sex}}</td>
<td>{{person.age}}</td>
</tr>
</div>
<script type="text/javascript">
//这是ViewModel部分
var vue = new Vue({ el:'#app',
data:{
//Model部分
persons:[
{name:'张三',sex:'男',age:20},
{name:'李四',sex:'女',age:22},
{name:'王五',sex:'男',age:26}
]
},
methods:{
sayHi:function(name){
alert("Hi!"+name);
}
}
});
</script>
这里给每一行添加的点击事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.bg_red{
background: red;
}
.bg_green{
background: green;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<!--视图-->
<div id="hello">
<h1>{{msg}}</h1>
<input type="text" v-model="msg">
<table border="1px" width="400px">
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr v-for="person in persons" v-bind:class="person.gender=='男'?'bg_red':'bg_green'"
v-on:click="clickMe(person)">
<td>{{person.id}}</td>
<td>{{person.name}}</td>
<td>{{person.gender}}</td>
<td>{{person.age}}</td>
</tr>
</table>
<input type="text" v-model="current.id"><br>
<input type="text" v-model="current.name"><br>
<input type="text" v-model="current.gender"><br>
<input type="text" v-model="current.age"><br>
<input type="button" value="save" v-on:click="addPerson">
</div>
<script>
//数组数据
let personsData = [
{id:1,name:"张三",gender:"男",age:20},
{id:2,name:"李三",gender:"女",age:15},
{id:3,name:"王三",gender:"男",age:20},
{id:4,name:"刘三",gender:"女",age:16}];
/*Vue对象 ViewModel 视图模型*/
new Vue({
el:"#hello", //指定作用范围
data:{ //指定数据 Model 模型
msg:"hello Vue!!",
persons: personsData, //所有人
current: personsData[0] //当前选择的人
},
methods:{ //定义方法
clickMe:function(person){
this.current = person;
},
addPerson:function(){
//深复制对象
let per = JSON.parse(JSON.stringify(this.current));
//添加数据
this.persons.push(per);
}
}
});
</script>
</body>
</html>
Axios
引入
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
使用
axios.get
axios.post
axios.put
axios.delete
跨域问题
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-W5vzeRA6-1654480409717)(快速入门Vue（二）Vue的基本指令.assets/image-20211104163852285.png)]
什么是跨域？
服务器自我保护的机制，会信任同一个服务器下的程序
协议://域名:端口
三个如果相同，则认为是一个域下，否则就是跨域
解决方案：
- 给服务器控制器加CrossOrigin注解，允许跨域
- 设置CORS规则
- JSONP
- IFrame
- …
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="pyq">
<table border="1px" width="400px">
<tr>
<th>昵称</th>
<th>头像</th>
<th>文字内容</th>
<th>图片</th>
<th>点赞人</th>
</tr>
<tr v-for="pyq in pyqs">
<td>{{pyq.user.nickname}}</td>
<td>
<img src="http://localhost:8080/pet-images/pyq.user.image">
</td>
<td>{{pyq.content}}</td>
<td>
<img src="http://localhost:8080/pet-images/pyq.image">
</td>
<td>
<span v-for="zan in pyq.zanUsers">{{zan.nickname}}</span>
</td>
</tr>
</table>
</div>
<script>
new Vue({
el:"#pyq",
data:{
pyqs:[] //朋友圈数据
},
methods:{
//加载朋友圈
loadPyqs:function () {
//访问后台查询朋友圈的接口
axios.get("http://localhost:8080/pyq/pyqs")
.then(res => {
//将朋友圈数据赋值给集合
this.pyqs = res.data;
});
}
},
//挂载生命周期函数
mounted(){
this.loadPyqs();
}
});
</script>
</body>
</html>
2733
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
