Vue.js学习笔记（一） 

【一、实例化】

   每个vue都需通过实例化Vue来实现
   格式：var vm=new Vue({
            //选项
         });
   例：
      var vm=new Vue({
         el:'#id',  //DOM元素的id,即改动都在指定的id元素上，其他不受影响
         data:{  //data 用于定义属性，vue实例提供了一些有用的实例属性与方法，都要前缀$，以便与用户定义的属性区分开
            site:"...",
            url:"...",
            alexa:"...",
            message:"vue信息",
            target:'_blank'   //在新窗口打开页面
         },
         methods:{  //methods 用于定义函数
            details:function(){
               //...
            }
         }
      });   
      {{}} ：用于输出对象属性和函数返回值
        

【二、模板语法】

    1、文本 -> {{}}
        使用{{message}} ,vue的data中有message这个属性值
    2、Html -> v-html
        v-html指令输出html代码
        如：html: <div v-html="message"></div>        
            vue: message:'<h1>VueMessage</h1>'
    3、属性 -> Html属性中的值使用v-bind指令
        如：html : <div id="dm">
                      <div v-bind:class="{'change':changetrue">
                         改变颜色
                      </div>
                   </div>    
            css : .change{color:red;}
            js : <script>
                    new Vue({
                       el:"#dm",
                       data:{
                          changetrue:true
                       }
                    });
                 </script>            
        显示结果：“改变颜色”四字字体颜色变为红色
    4、表达式 --> {{}}
        vue.js都提供了完全的JavaScript表达式支持
        如：{{5+5}}  -->  输出10
            {{ok?'yes':'no'}}  -->  ok在vue的data中
            {{message.split('').reverse().join('')}}  -->  message在vue的data中
            上述：reverse() --> 倒叙  join() --> 插入数据            
    5、指令 --> v-前缀
        指令是带有v-前缀的特殊属性，指令用于在表达式的值改变时，将某些行为应用到DOM中
        例：<p v-if="seen">seen在vue的data中，若为true，插入p元素</P>
    6、参数 --> 参数在指令后以冒号指明
        例1：<a v-bind:href="url">百度<a>
             其中herf在vue的data中
        例2：<a v-on:click="doSomething"></a>
             其中v-on指令，用于监听DOM事件，doSomething为事件名
    7、修饰符
        以.指明特殊后缀，用于指出一个指定应该以特殊方式绑定。
        例：<form v-on:submit:prevent="onSubmit"></form>
            其中.prevent修饰符告诉v-on指令对于触发的事件调用event.preventDefault();

****8、用户输入*******************

        （1）、在input框中，使用v-model指令实现双向数据绑定
        例：
           <div id="ap">
              <p>{{message}}</p>
              <input v-model="message"/>
           </div>
           <script>
              new Vue({
                 el:"ap",
                 data:{
                    message:"RunsomR"
                 }
              });
           </script>
        效果为：在input框中输入修改字符串时，<p>中的值对应改变
        （2）、按钮的事件可以使用v-on事件绑定，并对用户输入作出响应
        例：用户点击按钮时，对输入的字符串进行反转事件
           <div id="ap">
              <p>{{data.msg}}</p>
              <input v-model="data.msg"/>
              <button v-on:click="reverseMsg">反转字符串</button>
              <p>{{data.m}}</p>  //反转之后的字符串
           </div>
           <script>
              var data={msg:null,m:null};//声明变量
              new Vue({
                 el:"#ap",
                 data:data,
                 methods:{
                    reverseMsg:function(){
                       data.m=data.msg.split('').reverse().join('');  //反转字符串
                    }
                 }
              });
           </script> 

****9、过滤器******************

    可自定义过滤器，用作一些常见的文本格式化
    格式：{{messgae | capitalize}} 其中capitalize为过滤器的方法名
          <div v-bind:id="rawId | formatId"></div>  其中formatId为过滤器的方法名
    例：对字符串第一个字母转大写 ---》 str.toString().charAt(0).toUpperCase()+str.slice(1)
        <div id="ap">
           {{message | capitalize}}
           <div v-bind:id="id:mid"></div> //其中v-bind:id的id要与"id:mid"中的id一样，mid为方法名
        </div>    
        <script>
           new Vue({
              el:"#ap",
              data:{
                 message:"run",
                 id:"dsd"
              },
              filters:{//过滤器
                 capitalize：function(value){
                    if(!value) return "";
                    value=value.toString();
                    return value.charAt(0).toUpperCase()+value.slice(1);
                    //意为 取value的第一个字符，并将其转换成大写 加上去掉一个字符串的后部分
                 }，
                 rawId:function(id){
                    alert(id);
                 }
              }
           });
        </script>
    过滤器还可以串联
        {{message | filterA | filterB}}    
    过滤器是JS函数，因此可以接受参数
        {{message | filterA('arg1',arg2)}}
    message是第一个参数，字符串'arg1'将传给过滤器作为第二个参数，arg2表达式的值将被求值然后传给过滤器作为第三个参数       
    10、缩写
    最常用的指令缩写：
    v-bind :
        完整语法：<div v-bind:href="url"></div>    
        缩写：<a :href="url"></a>
    v-on :
        完整语法：<a v-on:click="doS"></a>    
        缩写：<a @click="doS"></a>            

【三、条件判断】

    v-if   v-else  v-else-if

    例：
       <div id="ap">
          <div v-if="scorce<=40 && scorce >=0">
             scorce<=40 && scorce >=0
          </div>
          <div v-else-if="scorce>40 && scorce<=70">
             scorce>40 && scorce<=70
          </div>
          <div v-else-if="scorce>70 && scorce<=100">
             scorce>70 && scorce<=100
          </div>
          <div v-else>
             No Msg
          </div>
       </div>
       <script>
          new Vue({
             el:"#ap",
             data:{
                scorce:Math.random()*100
             }
          });
       </script>
    v-show指令 ：根据条件展示元素
    <div v-show="ifok">Hello</div>  其中ifok为vue的data中的，如果ifok为true则显示，为false则隐藏

【四、循环语句】

   1、v-for循环数组
      v-for需要以site in sites 形式的特殊语法，sites是源数据数组并且site是数组元素迭代的别名
      例：
         <div id="ap">
            【
            <ul v-for="s in ss">
               {{s.name}}
            </ul>
            】或者在模板中使用
            【
               <ul>
                  <template v-for="s in ss">
                     <li>{{s.name}}</li>
                     <li>-----------</li>
                  </template>
               </ul>
            】
         </div>
         <script>
            new Vue({
               el:"#ap",
               data:{
                  ss:[
                     {name:"baidu"},
                     {name:"suxiaoyi"}
                  ]
               }
            });
         </script>
        附：<li>有序列表  <ul>无序列表  

    2、v-for迭代对象
    通过一个对象的属性来迭代数据
    例：
       <div id="ap">
          【
             <li v-for="stu in student">
                {{stu}}
             </li>
          】或者提供第二个参数为键名
          【
             <li v-for="(value,key) in student">  // 注意value,key 对应值，键，第二个参数为键名
                {{key}} -> {{value}}
             </li>
          】或者 第三个参数为索引
          【
             <li v-for="(value,key,index) in student">  
                {{key}} -> {{value}} -> {{index}}
             </li>
          】
       </div>
       <script>
          new Vue({
             el:"#ap",
             data:{
                student:{
                   name:"天下",
                   age:"19",
                   address:"in the earth"
                }
             }
          });
       </script>
    3、迭代整数
    例：
       <div id="ap">
          <ul>
             <li v-for="i in 5">
                {{i}}
             </li>
          </ul>
       </div>
       <script>
          new Vue({
             el:"#ap"
          });
       </script>
      输出1到5整数

【五、计算属性】

   1、计算属性关键词：computed
   例：反转字符串
       <div id="ap">
          <div>原句：{{msg}}</div>
          <input v-model="msg"/><br>
          <div>直接反转：{{msg.split('').reverse().join('')}}</div>
          <div>computed计算反转：{{computedmsg}}</div>
          <div>methods使用方法反转：{{methodsmsg()}}</div>
       </div>
       <script>
          new Vue({
             el:"#ap",
             data:{
                msg:"msg"  //若msg没判null，此时不能定义为null
             },
             computed:{
                computedmsg:function(){  //计算属性的getter
                   return this.msg.split('').reverse().join('')  //this 指向vm实例
                }
             },
             methods:{
                methodsmsg:function(){
                   return this.msg.split('').reverse().join('')
                }
             }
          });
       </script>
    注：computed和methods效果一样，但computed基于它的依赖缓存，只有依赖发生改变时才会重新取值；
        methods，在重新渲染的时候，函数总会重新调用执行
        即，使用computed性能更好，但如果不希望依赖缓存，可使用methods属性
    2、computed setter
    computed 的默认属性只有getter，需要时提供setter
    例：
       <div id="ap">
          <p>{{sit}}</p>
       </div>    
       <script>
          var vm=new Vue({
             el:"#ap",
             data:{
                name:"baidu",
                url:"http://www.baidu.com"
             },
             computed:{
                sit:{
                   get:function(){
                      return this.name +' --- '+this.url
                   },
                   set:function(newValues){
                      var strs=newValues.split(',');
                      this.name=strs[0];
                      this.url=strs[1];
                   }
                }
             }
          });
          //调用setter vm.name和vm.url也会被对应刷新
          vm.sit="测试,http://www.cs.com";
          document.write('name: '+vm.name);
          document.write('<br>');
          document.write('url: '+vm.url);
       </script>   
       输出 》测试---http://www.cs.com《，原先定义的会被覆盖

【六、监听属性】

    监听属性watch，通过watch来响应数据的变化
    例1：计数器
       <div id="ap">
          <p>计数器：{{num}}</p>
          <button @click="num++">点</button>
          <p>{{afternum}}</p>
       </div>
       <script>
          var vm=new Vue({
             el:"#ap",
             data:{
                num:1,
                afternum:''
             }
          });
          vm.$watch('num',function(nval,oval){ //nval：现在的值  oval：改变之前的值
             vm.afternum="改变之前："+oval +" --> 改变之后："+nval;
          });
       </script>
    例2：秒，分，时转换
       <div id="ap">
          秒：<input type="text" v-model="m"/>
          分：<input type="text" v-model="f"/>
          时：<input type="text" v-model="s"/>
       </div>
       <p id="p"></p>       
       <script>
          var vm=new Vue({
             el:"#ap",
             data:{
                m:0,f:0,s:0
             },
             watch:{
                m:function(val){
                   this.m=val;
                   this.f=val/60;
                   this.s=val/60/60;
                },
                f:function(val){
                   this.m=val * 60;
                   this.f=val;
                   this.s=val/60;
                },
                s:function(val){
                   this.m=val*60*60;
                   this.f=val*60;
                   this.s=val;
                }
             }
          });
          //$watch 时一个实例方法
          vm.$watch('m',function(newValue,oldValue){
             //这个回调在vm.m改变后调用
             document.getElementById("p").innerHTML="修改前值："+oldValue+" 修改后值："+newValue;
          });
       </script>

【七、样式绑定】

    1、class属性绑定
       class 和 style 是HTML元素属性，可以用v-bind来设置样式属性。表达式的结果除了字符串外，还可是对象或数组
       可为v-bind:class设置一个对象，从而动态的切换class
       例1：
          <style>
             .som{color:red}
          </style>
          <div id="ap">
             <p v-bind:class="{som:sm}">vue样式绑定</p>
             相当于
             <p class="som">vue样式绑定</p>
          </div>
          <script>
             new Vue({
                el:"#ap",
                data:{
                   sm:true
                }
             });
          </script>
          显示结果为<p>中的字变为红色
       在对象中传入更多属性用来动态切换多个class
       例2：
          <style>
             .fon{font-size:30px;color:green;}
             .col{color:red}
          </style>
          <div id="ap">
             <p v-bind:class="{fon:f,col:c}">绑定多个class，重复样式会被覆盖</p>
             或者绑定一个数据对象
             <p v-bind:class="styobject">绑定多个class，重复样式会被覆盖</p>
             相当于
             <p class="fon col">绑定多个class，重复样式会被覆盖</p>            
          </div>
          <script>
             new Vue({
                el:"#ap",
                data:{
                   f:true,c:true
                   或者绑定一个数据对象
                   styobject:{
                      fon:true,col:true
                   }
                }
             });
          </script>
    2、数组语法
       把一个数组传给v-bind:class，还可用三元表达式切换class
       例：
          <style>
             .fon{font-size:30px;color:green;}
             .col{color:red}
          </style>
          <div id="ap">
             <p v-bind:class="[f,c]">数组语法</p>
             或者用三元表达式切换class
             <p v-bind:class="[iftr?f:c]">数组语法，用三元表达式切换class</p>
             相当于
             <p class="fon col">数组语法</p>
          </div>
          <script>
             new Vue({
                el:"#ap",
                data:{
                   f:'fon',c:'col',iftr:true
                }
             });
          </script>
    3、style内联样式
    用v-bind:style 直接设置样式
       例：
          <div id="ap">
             <p v-bind:style="{color:c,fontSize:f+'px'}">style直接设置内联样式</p>
             或者绑定一个样式对象
             <p v-bind:style="styObject">style直接设置内联样式,绑定一个样式对象</p>
             或者使用数组
             <p v-bind:style="[cc,ff]">style直接设置内联样式，使用数组</p>
             相当于
             <p style="color:yellow;font-size:30px;">style直接设置内联样式</p>
          </div>
          <script>
             new Vue({
                el:"#ap",
                data:{
                   c:'yellow',f:30,
                   styObject:{
                      color:"green",fontSize:"30px"
                   },
                   cc:{
                      color:'red'
                   },
                   ff:{
                      'font-size':'30px'
                   }
                }
             });
          </script>
    注：当v-bind:style使用需要特定前缀的css属性时，如transform，Vue.js会自动侦测并添加相应的前缀    
    4、附
       （1）v-bind 动态绑定指令，默认情况下标签自带属性的值是固定的，在为了能够动态的给这些属性添加值，
      可使用v-bind:动态变化的值="表达式"
       （2）v-bind用于绑定属性和数据，其缩写为":"，即v-bind:id===:id
       （3）v-model 用在表单控件上，实现双向数据绑定