vue实例创建，实例数据，实例方法，计算属性，侦听器，模板语法
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> <script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script> </head> <body> <div id="example"> <!-- 数据 --> <p>{{ data1 }}</p> <p>{{ data2 }}</p> <!-- 方法 --> <p>{{getdata1()}}</p> <p>{{getdata2()}}</p> <!-- 计算属性 --> <p>{{cData1}}</p> </div> <script type="text/javascript"> // vue实例创建 var vm = new Vue({ el: ‘#example‘, // 实例数据 data: { data1: ‘Hello wzrui‘, data2:true }, // 实例方法 methods:{ // 方法名 getdata1:function(){ return this.data1 }, getdata2:function(){ return this.data2 } }, // 计算属性(有缓存功能，数据变更时，才会重新计算） computed:{ cData1:function(){ return this.data1+" "+this.data2 } }, // 检测器 watch:{ // 当data1变更时执行如下的方法 data1:function(){ console.info("data1变更了"); }, // 当data2变更时执行如下的方法 data2:function(){ console.info("data2变更了"); } } }) </script> </body> </html>
xxxxx
原文：https://www.cnblogs.com/feihusurfer/p/12142052.html