1、实例化vue，根元素，数据存储，方法的定义，数据的绑定

el: element 需要获取的元素，一定是html中存在的根容器元素data:用于数据的存储，可以是字符串、数组、json等等数据methods:vue当中写方法的时候用的属性， 在html中调用的时候写《方法名称()》就可以了v-bind v-html的使用方法，data-binding来绑定属性的值 例如website,websiteTag

    
                 
         
         
     
        
      
{
    {greet(name)}}
        
      
姓名：{
    {name}}
 
              
      
职位：{
    {job}}
        
      
a标签中关于v-bind的使用方法：我的个人博客 
        
      
在input元素中v-bind的使用方法 
        v-html的使用方法        
      
    
     
    

脚本部分 //实例化vue对象new Vue({    el:"#vue-app",    data:{        name:"张三",        job:"软件工程师",        website:"http://www.baidu.com",        websiteTag:"百度"    },    methods:{        greet:function (name) {            return "早上好"+name+"!" +this.job;        }    }});

 

 

2、Vue中事件的使用

    
                 
         
     
        
      
通过直接在事件中更改属性值的方式操作，但是实际项目中一般不怎么用 v-on还可以用@来代表
        
      增加购买数量        
      减少购买数量        
      
我要购买数量{
    {count}}
        
      
        
      
通过调用方法的方式更改属性值，用花括号调用方法的时候加括号()，在事件中调用方法加不加括弧()都可以
        
      增加数量        
      减少数量        
      双击增加        
      双击减少        
      双击减少只能点击一次        
      
我要操作的数量：{
    {record}}
        
      
       x:{
    {x}},y:{
    {y}}
      
        
      
事件修饰符 
        
      百度    
     
    

//实例化vuenew Vue({    el:"#event",    data:{        count:10,        record:100,        x:0,        y:0    },    methods:{        add:function () {            this.record++;        },        subtract:function () {            this.record--;        },        updateXY:function (event) {            //console.log(event);            this.x=event.offsetX;            this.y=event.offsetY;        }    }})

3、计算属性，computed

methods方法会调用哪个方法，其他方法跟着全部执行

computed的调用哪个方法，执行哪个方法，调用的时候不能使用括弧

    
                 
     
        
      Add to A        
      Add to B        
      
Age - {
    {a}}
        
      
Age - {
    {b}}
        
      
Age + A = {
    {AddtoA}}
        
      
Age + B = {
    {AddtoB}}
    
     
    

//脚本部分 new Vue({    el:"#vue-app",    data:{        a:0,        b:0,        age:20    },    methods:{        /*        methods方法会调用哪个方法，其他方法跟着全部执行        AddtoA:function () {            console.log("Add to a");            return this.age+this.a;        },        AddtoB:function () {            console.log("Add to b");            return this.age+this.b;        }        */    },    computed:{        //computed的调用哪个方法，执行哪个方法，调用的时候不能使用括弧        AddtoA:function () {            console.log("Add to a");            return this.age+this.a;        },        AddtoB:function () {            console.log("Add to b");            return this.age+this.b;        }    }})