1. 基础知识

1.new Vue 创建一个实例，传入一个对象。
2. 对象包括：

el：作用域
data：所用到的数据
methods：所用到的函数

3.{{}} 数据绑定 其中不止可以绑定 data，也可以绑定函数 (如果这个函数有返回值并且返回值是字符串之类的可以输出的东西)
4.{{}} 大括号只能绑定内容，不能在 html 属性里使用，如：< a href={{}}} >, 这是不行的
5. 上面那个可以使用 v-bind:href=”link” –> 属性值的绑定, 告诉 html : 后面的数据是绑定的。
6. 使用 v -html 绑定 html 标签而不是直接输出字符串，不过这样会造成跨站脚本攻击，不安全。

几个简单的例子：

1. 2 个输入框，1 个接收初始值，一个接收步长，两个按钮，一个增加一个减少，一行输出文字。

html 部分：

<div id="app">
            起始值 <input v-model="start" />
            步长 <input v-model="step" />
            <button v-on:click="increase"> 增加 </button>
            <button v-on:click="decrease"> 减少 </button>
            <br />
            <hr />
            <span> 输出结果：{{result}} </span>
        </div>

js 部分

<script>
        new Vue({
            el:'#app',
            data:{
                start:0,
                step:0,    
                result:0,
            },
            methods:{increase:function(){if(this.result==0){this.result=parseInt(this.start);
                        this.result+=parseInt(this.step);
                    }else{this.result+=parseInt(this.step);
                    }
                },
                    decrease:function(){if(this.result==0){this.result=parseInt(this.start);
                        this.result-=parseInt(this.step);
                    }else{this.result-=parseInt(this.step);
                    }
                },
                
            }
            
        
        })
    </script>

这个例子用到了：
1.v-model input 框的双向绑定。
2.v-on:click 监听 click 事件，其他事件道理类似。

2. 在上一个例子的基础上，如果 resultPrint 是一个函数，返回目前值是大于 5 还是小于 5，还有一个增加另一个变量的按钮 2。

<div id="app">
            起始值 <input v-model="start" />
            步长 <input v-model="step" />
            <button v-on:click="increase"> 增加 </button>
            <button v-on:click="decrease"> 减少 </button>
            <button v-on:click="increase2"> 增加 2 </button>
            <br />
            <hr />
            <span> 输出结果：{{resultPrint()}} </span>
            <br />
            <span>sum2 is {{sum2}}</span>
        </div>

<script>
        new Vue({
            el:'#app',
            data:{
                sum2:0,
                start:0,
                step:0,    
                result:0,
            },
            methods:{increase:function(){if(this.result==0){this.result=parseInt(this.start);
                        this.result+=parseInt(this.step);
                    }else{this.result+=parseInt(this.step);
                    }
                },
                    decrease:function(){if(this.result==0){this.result=parseInt(this.start);
                        this.result-=parseInt(this.step);
                    }else{this.result-=parseInt(this.step);
                    }
                },
                increase2:function(){this.sum2++;},
                resultPrint:function(){console.log("resultPrint 的打印")
                    return this.result>10? '结果大于 10':'结果小于 10'
                }
                
            }
            
        
        })
    </script>

解析：如果 resultPrint 是一个函数的话，不管我点击按钮 1 还是按钮 2，由于并不知道按钮 2 是否会影响到 resultPrint 的输出值，因此无论页面做什么操作，resultPrint 都会渲染重新执行, 如果 resultPrint 是一个计蒜属性的话，既可以解决普通属性无法加逻辑的局限，又可以避免写成一个函数的话不必要的执行。

computed:{resultPrint:function(){console.log("resultPrint 的打印")
                    return this.result>10? '结果大于 10':'结果小于 10'
                }
            },

3.v-bind 动态改变背景图片

<div id="app">
            <img v-bind:src="picUrl" v-on:click="changPic" />
        </div>

<script>
        new Vue({
            el:'#app',
            data:{
                index:0,
                sum2:0,
                start:0,
                step:0,    
                result:0,
                picUrl:'https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1560069366&di=8b211d63775a606bf33b3a362b2b475d&src=http://hbimg.b0.upaiyun.com/54ebececeda0217648263cc944d6cfd413a17cdf2cc6-MGHS0y_fw658'
            },
        
            methods:{changPic:function(){if(this.index==0){
                        this.picUrl='https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1130583636,2033493811&fm=26&gp=0.jpg'
                        this.index=1;
                    }else{
                        this.picUrl='https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1560069366&di=8b211d63775a606bf33b3a362b2b475d&src=http://hbimg.b0.upaiyun.com/54ebececeda0217648263cc944d6cfd413a17cdf2cc6-MGHS0y_fw658'
                        this.index=0;
                    }
                    
                }
                
                
            }
            
        
        })
    </script>