标签：pre 组元 没有 inpu get add href ddl 冒泡
首先在script标签内实例化一个vue对象，在对象的data属性里面定义一个列表
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: ‘#app‘,
data: {
things: [‘大风车‘,‘大黄蜂‘,‘熊大‘,‘熊二‘],
}
})
</script>
然后在定义一个div块，指定id为app，与上面script标签里的相对应，在div里面添加ul和li标签，并且通过v-for对li进行遍历其中item为things列表中每一项遍历出来的项，另一种写法v-for="(item,index) in things"其中index为item在things中的下标。
<div id="app">
<!--在遍历的过程中，没有使用索引值-->
<ul>
<li v-for="item in things">{{item}}</li>
</ul>
<!--在遍历的过程中，使用索引值-->
<ul>
<li v-for="(item,index) in things">{{index+1}}.{{item}}</li>
</ul>
</div>
高级说法：v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!--在遍历对象的过程中，如果只是获取一个值，那么获取到的是value-->
<ul>
<li v-for="item in user">{{item}}</li>
</ul>
<!--获取key和value，格式：(value,key)-->
<ul>
<li v-for="(value,key) in user">{{value}}<-{{key}}</li>
</ul>
<!--获取key和value和index，格式：(value,key,index)-->
<ul>
<li v-for="(value,key,index) in user">{{value}}-{{key}}-{{index}}</li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: ‘#app‘,
data:{
user: {
name: ‘sxskj‘,
age: 15,
height: 1.56
}
}
})
</script>
</body>
</html>
在定义的vue对象中的methods属性中定义add、sub两个方法
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: ‘#app‘,
data: {
count: 0
},
methods: {
add(){
this.count++;
},
sub(){
this.count--
}
}
})
</script>
事件绑定的写法有两种，一种是通过v-on:事件名，另一种是通过@事件名
<button v-on:click="add">+</button>
<button v-on:click="sub">-</button>
<button @click="add">+</button>
<button @click="sub">-</button>
以上是对按钮添加事件的两种不同的方式，但是能够实现相同的功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!--事件调用的方法没有参数-->
<button @click="btnClick1()">按钮1</button>
<!--如果函数需要参数，但是没有传入参数，那么函数的形参为undefined-->
<button @click="btnClick2(12345)">按钮3</button>
<!--方法定义时，我们需要event参数，同时又需要其他参数-->
<!--在方法调用时，如何手动获取到浏览器参数的event对象：$event-->
<button @click="btnClick3(12345678, $event)">按钮4</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: ‘#app‘,
data:{
message: ‘hello‘
},
methods: {
btnClick1() {
console.log(‘按钮1‘)
},
btnClick2(abc) {
console.log(abc)
},
btnClick3(abc, event) {
console.log(abc + ‘ ‘ + event)
}
}
})
</script>
</body>
</html>
阅读代码可以了解到事件的无参数和带参数的实现方式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!--.stop 阻止事件冒泡-->
<div @click="divClick()">
<button @click.stop="btnClick()">按钮</button>
</div>
<!--.prevent 让提交按照自己定义的步骤执行-->
<form action="baidu">
<input type="submit" value="提交" @click.prevent="subClick()">
</form>
<!--监听键盘某个键帽的点击事件-->
<input type="text" @keyup.enter="keyClick()">
<!--.once只监听一次的事件-->
<button @click.once="btn2Click()">按钮2</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: ‘#app‘,
data:{
message: ‘hello‘
},
methods: {
divClick(){
console.log(‘divClick‘)
},
btnClick() {
console.log(‘btnClick‘)
},
subClick() {
console.log(‘subClick‘)
},
keyClick() {
console.log(‘keyClick‘);
},
btn2Click() {
console.log(‘btn2Click‘);
}
}
})
</script>
</body>
</html>
事件的修饰符还有和多种，有兴趣的小伙伴可以自己去了解下：https://www.runoob.com/vue2/vue-events.html
标签：pre 组元 没有 inpu get add href ddl 冒泡
原文地址：https://www.cnblogs.com/lamsa/p/14322017.html
