Vue处理用户点击事件

1、先创建一个"click点击.html"的文件，在文件内引入vuejs。

<script src="../js/vue.js"></script>

<script type="text/javascript">

const app = new Vue({

el:'#app'

})

</script>

2、定义一个字符串；

data:{

msg:'Hello Vue!'

}

3、不要忘记，在el后面加,号。

将msg显示在网页中。

<article>{{msg}}</article>

4、创建一个按钮，用来绑定事件，触发行为。

<button class="btn" @click="reverseArr">反转字符串</button>

reverseArr事件就是用来反转字符串。

5、在methods中个，定义个方法reverseArr。

reverseArr(){

const newStr = this.msg.split("").reverse().join("")

this.msg = newStr

}

6、不要忘记上面的,号。

点击【运行】-【运行到浏览器】，选择浏览器打开(HBuilder)。

7、点击按钮【反转字符串】，查看页面显示结果。

8、也可以直接在dom中进行操作。

<div>反转结果：{{this.msg.split("").reverse().join("")}}</div>