01先看看v-bind
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<a href="https://www.baidu.com/">跳转</a>
<a v-bind:href="url">跳转</a>
<button @click="change" target="_blank">跳转</button>
</div>
<script src="./vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
url:'https://www.taobao.com/'
},
methods:{
change(){
this.url='https://www.jd.com/'
}
}
})
</script>
</body>
</html>控制台输出结果：
第一个调整结果：
第二个跳转结果：
02 v-on-methods
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 当点击这个按钮，就调用fn1函数 -->
<button v-on:click="fn1">点我</button>
<button v-on:dblclick="fn1">点我双击</button>
<button v-on:mouseenter="fn2">移入我</button>
<!-- 简写形式：把v-on：改为@ -->
<h4>简写如下</h4>
<!-- 当点击这个按钮，就调用fn1函数 -->
<button @click="fn1">点我啊</button>
<button @dblclick="fn1">点我双击</button>
<button @mouseenter="fn2">移入我</button>
</div>
<script src="./vue.js"></script>
<script>
new Vue({
el: '#app',
methods:{
// 被调用的fn1函数
fn1(){
alert('点我干啥')
},
//被调用的fn1函数
fn2(){
alert('jiudianni')
}
}
})
</script>
</body>
</html>
控制台输出结果：
点击‘点我’输出‘点我干啥’
双击‘点击双击‘’输出‘jiudianni’
鼠标悬停在‘移入我’就会弹出‘nb’
