完整代码在最后，完整代码1
在head中，使用script引入vue国内静态镜像 https://cdn.staticfile.org/vue/2.2.2/vue.min.js
这里的msg是vue中data的数据，可以先不用管，看后面
在body体中，使用scritp新建一个Vue对象
var vm=new Vue({ //el可以使用id选择器/class选择器/dom对象， //不可以使用dom对象，不能尝试使用html以及body el:"#app",//例如.app document.getelementbyid("#app") data:{ msg:"hello world", count:1, arr:[1,2,3,4], obj:{name:"zengyu",age:1} }, mounted(){ //页面挂载完成后执行的方法（数据也加载完毕） //包括vue的装载 ，所以可以执行本vue的方法 // console.log("页面加载完毕") //this.func1(); //需要注意的是，在mounted内执行的函数的this为当前的vue对象，但是执行的回调函数则为window对象 console.log(this); // func2(function(){ // console.log(this); // }); // 但是如果执行委托时，用lambda表达式代替，对象则为当前的vue对象 func2(()=>{ console.log(this); }); //或者在外部使用that=this 将this赋值给that var that =this; func2(function(){ console.log(that); }) }, methods:{ //定义函数; // 1.直接定义 func1:function(){ console.log(this.msg);//此处this等同于vm }, //2.使用委托 使用方法名 ES6 func3(){ console.log(this.count); }, //3.使用lambda表达式 ES6 func4:()=>{ } } }); function func2(func){ func(); } </script>定义函数的方式有
直接定义 func1:function(){ console.log(this.msg);//此处this等同于vm } 使用委托 使用方法名(在ES6中定义) 最常用 func3(){ console.log(this.count); } 使用lambda表达式 (在ES6定义) func4:()=>{ }包括vue的装载 ，所以可以执行本vue的方法
1.当直接执行console.log(this)时，this为当前的vue对象 但是如果执行回调函数内部执行console.log(this)是，this.为window对象
//直接输出 console.log(this); //执行函数 func2(function(){ console.log(this); });所以，当需要在执行的函数内部调用vue对象，一般会在函数外部执行 var that= this 然后再内部调用that
var that= this; func2(){ console.log(that);或者调用函数时，通过委托执行
//委托执行 func2(()=>{ console.log(this); }); //2.注意mounted本身是一个函数，写法与其他的不一致
mounted(){ ///...code }3.不管是mounted还是methods，需要调用data数据时，都需要使用this.XXX 这里的this.XXX是一个简写，全称为this.$data.XXX
在前面新建一个Id为app的div中，{{msg}}的写法就是插值表达式
{{}}内部只能使用js表达式(不能使用id，for等语句)，三元运算符，方法调用
<!--vue对象的data数据--> <p>{{msg}}</p> <!--表达式--> <p>{{count>100}}</p> <!--三元运算符--> <p>{{count < 100?"大于":"小于"}}</p> <!--方法--> <p>{{func1()}}</p>注意：
插值表达式不能写错，表达式写错了，是不会报错的，比如以下冒号写成了分号，整个div都不展示数据 <p>{{count < 100?"大于";"小于"}}</p> 调用方法需要加上双括号，不然只会显示方法的代码 <p>{{func1}}</p>