1、v-on
<!-- 方法处理器 -->
<button v-on:click="doThis"></button>
<!-- 动态事件 (2.6.0+) -->
<button v-on:[event]="doThis"></button>
<!-- 内联语句 -->
<button v-on:click="doThat('hello', $event)"></button>
<!-- 缩写 -->
<button @click="doThis"></button>
<!-- 动态事件缩写 (2.6.0+) -->
<button @[event]="doThis"></button>
<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>
<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>
<!-- 阻止默认行为，没有表达式 -->
<form @submit.prevent></form>
<!-- 串联修饰符 -->
<button @click.stop.prevent="doThis"></button>
<!-- 键修饰符，键别名 -->
<input @keyup.enter="onEnter">
<!-- 键修饰符，键代码 -->
<input @keyup.13="onEnter">
<!-- 点击回调只会触发一次 -->
<button v-on:click.once="doThis"></button>
<!-- 对象语法 (2.4.0+) -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>
Example
1、 v-text v-html v-on v-model
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-text v-html v-on v-model</title>
</head>
<body id="body">
<div id="app" class="top">
{{ message }}
<br>
<span>{{message}}</span>
<p>{{person}}</p>
<h4>{{person.name}} {{person.location}}</h4>
<p>{{campus}} </p>
<ul>
<li>{{campus[0]}}</li>
</ul>
<h2 v-text="message"></h2>
<h2 v-text="person.name" v-on:click="changePerson('老王')"></h2>
<h2 v-text="person.name+'!'"></h2>
<h3>{{person.name}} abc</h3>
<h4 v-html="content"></h4>
<h5 v-text="content"></h5>
<input type="button" value="v-on指令" v-on:click="doIt()">
<input type="button" value="v-on简写" @click="doIt('test')">
<button v-on:dblclick="doIt(123)">双击</button>
<br>
<input type="text" @keyup.enter="doIt(message)" v-model="message">
<button @click="setInput('超级宝宝')">修改信息</button>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="js/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
// el:'.top',
data: {
message: "我的vue测试",
person: {
id: 1,
name: "张三",
location: "北京"
},
campus: ["东", "西", "南", "北"],
content: "<a href='https://www.baidu.com'>百度</a>"
},
methods: {
doIt: function (p1) {
alert(p1)
},
changePerson: function (name) {
this.person.name += "暴打" + name;
},
setInput:function (input) {
this.message = input;
}
}
})
</script>
</body>
</html>
2、v-if v-show v-bind
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-if v-show v-bind</title>
<style>
.active{
border:#ff5d1d solid 2px;
}
</style>
</head>
<body>
<div id="app">
<button @click="sub">-</button>
<span>{{num}}</span>
<button @click="add">+</button>
<div id="img">
<img v-show="showImage" src="image/1.png" width="200" height="340" alt="">
<p v-if="showImage">图片显示v-if</p>
</div>
<div>
<img v-bind:src="srcImg" width="200" height="340" alt="">
<img :src="srcImg" width="200" height="340" alt="" :title="imgTitle">
<img :src="srcImg" width="200" height="340" alt="" :title="imgTitle" :class="isActive ? 'active' :''" @click="toggleImg">
<img :src="srcImg" width="200" height="340" alt="" :title="imgTitle" :class="{active:isActive}" @click="toggleImg">
</div>
</div>
<script src="js/vue.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
num:1,
showImage:false,
isActive:false,
srcImg:"image/1.png",
imgTitle:"这是一个测试的title"
},
methods:{
add:function () {
if(this.num<10){
this.num++;
this.showImage = toggleImage(this.num);
}else{
alert("已经最大！");
}
},
sub:function () {
if(this.num>0){
this.num--;
this.showImage = toggleImage(this.num);
}else{
alert("已经最小");
}
},
toggleImg:function () {
this.isActive = !this.isActive;
}
}
});
function toggleImage(num) {
return (num % 2) == 0 ? true:false;
}
</script>
</body>
</html>
3、v-text v-show v-bind
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-text v-show v-bind</title>
</head>
<body>
<div id="mask">
<a href="javascript:void(0)">
<img src="resources/left.png" @click="prev" v-show="index>0">
</a>
<img :src="imgArr[index]" width="300" height="500">
<a href="javascript:void(0)">
<img src="resources/right.png" @click="next" v-show="index<imgArr.length-1">
</a>
</div>
<script src="js/vue.js"></script>
<script>
var app = new Vue({
el:'#mask',
data:{
imgArr:[
'image/1.png',
'image/2.png',
'image/3.png'
],
index:0
},
methods:{
prev:function () {
if(this.index < 0) return;
this.index--;
},
next:function () {
if(this.index > this.imgArr.length-1) return;
this.index++;
}
}
})
</script>
</body>
</html>
4、v-for
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-for</title>
</head>
<body>
<div id="app">
<button @click="add">添加人员</button>
<button @click="sub">移除人员</button>
<ul>
<li v-for="(item,index) in arr">索引：{{index}} -- 值：{{item}}</li>
</ul>
<h3 v-for="(person,index) in persons">{{index}} . 姓名：{{person.name}} ,年龄：{{person.age}}</h3>
</div>
<script src="js/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
arr: ["北京测试", "上海测试", "北京3", "北京4", "北京5"],
persons: [
{name: "张三", age: 1211},
{name: "李四", age: 1222},
{name: "王二", age: 122},
{name: "赵六", age: 122},
{name: "无敌", age: 121},
]
},
methods: {
add:function () {
this.persons.push({name:"老王",age:Math.floor(Math.random()*100)});
},
sub:function () {
this.persons.shift();
}
}
})
</script>
</body>
</html>
5、查询天气
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue-example2</title>
<link rel="stylesheet" href="css/bootstrap.css">
<style>
.myCenter {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 900px;
height: 500px;
}
</style>
</head>
<body>
<div id="app" class="myCenter">
<div class="panel-primary">
<div class="control-label"><img src="image/comma_face_02.png" height="64" width="64"/></div>
<div class="form-group">
<input type="text" v-model="city" @keyup.enter="searchWeather" placeholder="请输入城市" class="input-lg">
<button @click="searchWeather" class="input-lg">搜 索</button>
</div>
<div class="media-bottom">
<a href="javascript:void(0)" @click="changeCity('北京')">北京</a>
<a href="javascript:void(0)" @click="changeCity('上海')">上海</a>
<a href="javascript:void(0)" @click="changeCity('广州')">广州</a>
<a href="javascript:void(0)" @click="changeCity('深圳')">深圳</a>
</div>
</div>
<ul class="list-inline">
<li v-for="item in weatherList">
<div class="label-info"><span class="icon-bar input-lg">{{item.type}}</span></div>
<div class="label-warning">
<b>{{item.low}}</b>
~
<b>{{item.high}}</b>
</div>
<div class="label-success"><span>{{item.date}}</span></div>
</li>
</ul>
</div>
<script src="js/axios.js"></script>
<script src="js/vue.js"></script>
<script src="js/myWeather.js"></script>
</body>
</html>
/*
* 请求地址：http://wthrcdn.etouch.cn/weather_mini
* 请求参数：city(城市名)
* 返回：天气信息
* */
var app = new Vue({
el: '#app',
data: {
city: '昆明',
weatherList: [],
},
methods: {
searchWeather: function () {
axios.get("http://wthrcdn.etouch.cn/weather_mini?city=" + this.city)
.then(response => {
console.log(response);
this.weatherList = response.data.data.forecast;
})
.catch(err => {
console.log(err.message);
})
},
changeCity:function (city) {
this.city = city;
this.searchWeather();
}
}
});
来源：https://www.cnblogs.com/asker009/p/12291852.html