1. v-bind: 绑定属性或者参数或者元素
<body>
<div id="app-2">
<span v-bind:title= "message" >
鼠标悬停几秒钟查看此处动态绑定的提示信息！
</span>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app2 = new Vue({
el: '#app-2',
data: {
message: '页面加载于 ' + new Date().toLocaleString()
}
})
</script>
2. v-model:进行元素的双向绑定
<div id="app">
{{message}}
<input v-model="message">
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var vm=new Vue({
el: '#app',
data: {
message: 'hello,wowowo',
}
3. v-on: 事件监听器，绑定事件
<div id="app">
<span v-bind:title="message">
停在此地看
</span>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var vm=new Vue({
el: '#app',
data: {
message: 'aaa'
}
})
</script>
4. 计算函数:
|