准备步骤如同第一天
代码：（测试注意事项：js中的代码依次开启测试，不可全部开启，会报错）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../node_modules/vue/dist/vue.js"></script>
<script src="../node_modules/vue-resource/dist/vue-resource.js"></script>
</head>
<body>
<!--v-on 指令-->
<div id="app1">
<button v-on:click="count+=1">点击增加</button>
<p>这个按钮被点击了{{count}}次</p>
</div>
<br>
<!--v-on 可以接收定义方法-->
<div id="app2">
<!--greet:下面的定义方法-->
<button v-on:click="greet">Greet</button>
<br>
</div>
<!--直接绑定到方法-->
<div id="app3">
<button v-on:click="say('hi')">Say hi</button>
<button v-on:click="say('hello')">Say hello</button>
</div>
</body>
<script>
/*v-on 指令*/
/* new Vue({
el:'#app1',
data:{
count:0
}
})*/
/*v-on 可以接收定义方法*/
/* new Vue({
el: '#app2',
data: {
name: 'Vue.js'
}
// 在 `methods` 对象中定义方法
, methods: {
greet: function (event) {
// `this` 在方法里指当前 Vue 实例
alert('HELLO-' + this.name + '-!')
// `event` 是原生 DOM 事件
if (event) {
alert(event.target.tagName)
}
}
}
})
// 也可以用 JavaScript 直接调用方法
app2.greet() // -> 'Hello Vue.js!'*/
/*直接绑定到方法*/
new Vue({
el: '#app3',
data: {
say: function (message) {
alert(message)
}
}
})
</script>
</html>
601
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
