比较简单，直接上代码和注释
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> <!-- v-model实现双向绑定 --> <input type="text" v-model="num"> <!-- v-on:click绑定事件，v-on可用@替代 --> <button v-on:click="num++">点赞1</button> <!-- 回调自定义的方法。 此时字符串里代表的函数 --> <button @click="cancel">取消</button> <h1> {{name}} ,非常帅，有{{num}}个人为他点赞{{hello()}}</h1> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script> //1、vue声明式渲染 let vm = new Vue({ //生成vue对象 el: "#app", //绑定元素 div id="app" // 可以指定恰标签，但是不可以指定body标签 data: { //封装数据 name: "张三", // 也可以使用{} //表单中可以取出 num: 1 }, methods: { //封装方法 cancel() { this.num--; }, hello() { return "1" } } }); </script> </body> </html>
效果。点击点赞和取消都会改变图中的数值
