学习地址:https://www.bilibili.com/video/BV1mz4y127UG?p=2
v-on
<!-- 添加点击事件用之前:-->
<!-- html-->
<div id="app">
<h2 onclick="alert(123)">{
{mes}}</h2>
</div>
<!-- js-->
<script type="text/javascript>
var vm = new Vue({
el:'app',
data:{
mes:'随便写点内容'
}
})
</script>
<!-- 添加点击事件用v-on:-->
<!-- html-->
<div id="app">
<!-- v-on:click
v-on:dbclick
v-on:mouseover
简写方式:@
-->
<h2 v-on:click="fun">{
{mes}}</h2>
</div>
<!-- js-->
<script type="text/javascript>
var vm = new Vue({
el:'app',
data:{
mes:'随便写点内容'
},
methods:{
// es6箭头函数写法:fun(){...}
fun:function(){
alert(123);
}
}
})
</script>
v-model双向绑定
<!-- html-->
<div id="app">
<h2>{
{mes}}</h2>
<input v-model="mes"></input>
</div>
<!-- js-->
<script type="text/javascript>
var vm = new Vue({
el:'app',
data:{
mes:'随便写点内容'
}
})
</script>