v-bind：綁定屬性值，內容相當於js，縮寫:
我添加了一個input標簽，如下
<input type="button" value="按鈕" title="title"></input>
這樣顯示的title是固定的，我想使用Vue的data里面的值，就需要加v-bind指令
<input type="button" value="按鈕" v-bind:title="title + '---' +'相當於js'"></input>
Vue的data加一個title
title:"這是一個v-bind指令的提示"
可以很清楚的看到，v-bind指令使用了之后，內容相當於js，title就是變量名，拼接的話就用+，內容用''，看一下瀏覽器展示效果
v-bind的縮寫是：，可以寫成如下
<input type="button" value="按鈕" :title="title + '---' +'相當於js'"></input>
v-on:綁定方法，縮寫@
我在Vue的筆記一中說過，Vue是不操作DOM的，這個v-on指令可以很好的解釋這個
比如，上面的input的button按鈕，我想寫個點擊事件，如果是原生js或者jquery，我們會這樣寫
<input id="btn" type="button" value="按鈕1" v-bind:title="title + '---' +'相當於js'"></input>
v-on的縮寫是@，可以寫成如下
<input id="btn" type="button" value="按鈕1" @title="title + '---' +'相當於js'"></input>
js會這樣寫
document.getElementById('btn').onclick=function(){
alert('hello 許嵩');
}
這樣不好，Vue就是不讓我們操作DOM的，就是讓我們專注於業務的，所以看看v-on的寫法吧，下面是完整的HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
[v-cloak]{
display: none
}
</style>
</head>
<body>
<!-- 這個div就是MVVM中的V，View -->
<div id="app">
<!-- v-cloak方式 -->
<p v-cloak>哈哈 {{ msg }} 許嵩來了</p>
<!-- v-text方式 -->
<p v-text="msg">許嵩說菜糊了不來了</p>
<!-- v-html方式 -->
<p v-html="msg2"></p>
<!-- v-bind方式 -->
<input type="button" value="按鈕" v-bind:title="title + '---' +'相當於js'"></input>
<!-- 普通的js方式 -->
<input id="btn" type="button" value="按鈕1" v-bind:title="title + '---' +'相當於js'"></input>
<!-- v-on方式 -->
<input type="button" value="按鈕2" v-bind:title="title + '---' +'相當於js'" v-on:click="show"></input>
</div>
<script type="text/javascript" src="../lib/vue-2.6.10.js"></script>
<script>
// 這個vm就是MVVM中的VM，ViewModel
var vm=new Vue({
el: '#app',
// 這個data就是MVVM中的M，Model
data: {
msg: '許嵩',
msg2:"<h1>大家好，我是Vae</h1>",
title:"這是一個v-bind指令的提示"
},
methods: {
show:function(){
alert('hello 許嵩')
}
}
})
document.getElementById('btn').onclick=function(){
alert('hello 許嵩');
}
</script>
</body>
</html>
可以看到v-on方式是v-on:click="show"，這個show就是個方法名，所以Vue里寫了個method方法，里面有一個show方法。
總結
又新學了兩個指令，v-bind綁定屬性，v-on綁定方法
防盜鏈接：本博客由蜀雲泉發表