首先引入vue的js文件：
<script src="js/vue.js" type="application/javascript"></script>
vue.js文件去vue官网下载即可
html代码
<div class="vuePro"><div>
vue的属性信息都得放在这个标签下面哪怕是同级也是不行的，不然无法正常使用
js代码：
<script> new Vue({ el:".vuePro", // 这里跟上面标签中的class类名一致 data:{}, // 声明和赋值变量 methods:{} // 方法函数在这里声明使用 }) </script>
class类名的写法
id的写法：
声明一个msg变量，赋值为hello vue
结果：
定义一个方法，每次点击按钮就会加一：
带参数的方法：
整体代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="js/vue.js"></script> <title>Title</title> </head> <body> <div class="vuePro"> <div>{{msg}}</div> <div>{{num}}</div> <button @click="md">点击加一</button> <button @click="md2(5)">点击加五</button> </div> </body> <script> new Vue({ el:".vuePro", data:{ msg:"hello vue", num:1 }, methods:{ md(){ this.num++; }, md2(param){ this.num+=param; } } }) </script> </html>
