Vue.js学习笔记（一）

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:

        
            vue: message:'

VueMessage

'
    3、属性 -> Html属性中的值使用v-bind指令
        如：html :

                     

                         改变颜色
                     

                  

    
            css : .change{color:red;}
            js :             
        显示结果：“改变颜色”四字字体颜色变为红色
    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中
        例：

seen在vue的data中，若为true，插入p元素

    6、参数 --> 参数在指令后以冒号指明
        例1：百度
             其中herf在vue的data中
        例2：
             其中v-on指令，用于监听DOM事件，doSomething为事件名
    7、修饰符
        以.指明特殊后缀，用于指出一个指定应该以特殊方式绑定。
        例：

            其中.prevent修饰符告诉v-on指令对于触发的事件调用event.preventDefault();

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

        （1）、在input框中，使用v-model指令实现双向数据绑定
        例：
          

             

{{message}}

             
          

          
        效果为：在input框中输入修改字符串时，

中的值对应改变
        （2）、按钮的事件可以使用v-on事件绑定，并对用户输入作出响应
        例：用户点击按钮时，对输入的字符串进行反转事件
          

             

{{data.msg}}

             
              反转字符串
             

{{data.m}}

  //反转之后的字符串
          

            

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

    可自定义过滤器，用作一些常见的文本格式化
    格式：{{messgae | capitalize}} 其中capitalize为过滤器的方法名
         

  其中formatId为过滤器的方法名
    例：对字符串第一个字母转大写 ---》 str.toString().charAt(0).toUpperCase()+str.slice(1)
       

           {{message | capitalize}}
          

//其中v-bind:id的id要与"id:mid"中的id一样，mid为方法名
        

    
        
    过滤器还可以串联
        {{message | filterA | filterB}}    
    过滤器是JS函数，因此可以接受参数
        {{message | filterA('arg1',arg2)}}
    message是第一个参数，字符串'arg1'将传给过滤器作为第二个参数，arg2表达式的值将被求值然后传给过滤器作为第三个参数       
    10、缩写
    最常用的指令缩写：
    v-bind :
        完整语法：

    
        缩写：
    v-on :
        完整语法：    
        缩写：            

【三、条件判断】

    v-if   v-else  v-else-if

    例：
      

         

             scorce<=40 && scorce >=0
         

         

             scorce>40 && scorce<=70
         

         

             scorce>70 && scorce<=100
         

         

             No Msg
         

      

      
    v-show指令 ：根据条件展示元素
    

Hello

  其中ifok为vue的data中的，如果ifok为true则显示，为false则隐藏

【四、循环语句】

   1、v-for循环数组
      v-for需要以site in sites 形式的特殊语法，sites是源数据数组并且site是数组元素迭代的别名
      例：
        

            【
            

               {{s.name}}
            

            】或者在模板中使用
            【
              

                 
              

            】
        

        
        附：

有序列表 

无序列表  

    2、v-for迭代对象
    通过一个对象的属性来迭代数据
    例：
      


          【
            

                {{stu}}
            

          】或者提供第二个参数为键名
          【
            
  // 注意value,key 对应值，键，第二个参数为键名
                {{key}} -> {{value}}
            

          】或者 第三个参数为索引
          【
            
(value,key,index) in student">  
                {{key}} -> {{value}} -> {{index}}
            

          】
      

      
    3、迭代整数
    例：
      

         

            
• 
                  {{i}}
              

         

      

      
      输出1到5整数

【五、计算属性】

   1、计算属性关键词：computed
   例：反转字符串
      


         
原句：{{msg}}

         

         
直接反转：{{msg.split('').reverse().join('')}}

         
computed计算反转：{{computedmsg}}

         
methods使用方法反转：{{methodsmsg()}}

      

      
    注：computed和methods效果一样，但computed基于它的依赖缓存，只有依赖发生改变时才会重新取值；
        methods，在重新渲染的时候，函数总会重新调用执行
        即，使用computed性能更好，但如果不希望依赖缓存，可使用methods属性
    2、computed setter
    computed 的默认属性只有getter，需要时提供setter
    例：
      

         
{{sit}}

      
    
          
       输出 》测试---http://www.cs.com《，原先定义的会被覆盖

【六、监听属性】

    监听属性watch，通过watch来响应数据的变化
    例1：计数器
      


         
计数器：{{num}}

          点
         
{{afternum}}

      

      
    例2：秒，分，时转换
      

          秒：
          分：
          时：
      

      
       
      

【七、样式绑定】

    1、class属性绑定
       class 和 style 是HTML元素属性，可以用v-bind来设置样式属性。表达式的结果除了字符串外，还可是对象或数组
       可为v-bind:class设置一个对象，从而动态的切换class
       例1：
         
         


            
v-bind:class="{som:sm}">vue样式绑定

             相当于
            
vue样式绑定

         

         
          显示结果为

中的字变为红色
       在对象中传入更多属性用来动态切换多个class
       例2：
         
         


            
绑定多个class，重复样式会被覆盖

             或者绑定一个数据对象
            
绑定多个class，重复样式会被覆盖

             相当于
            
绑定多个class，重复样式会被覆盖
            
         

         
    2、数组语法
       把一个数组传给v-bind:class，还可用三元表达式切换class
       例：
         
         

            
数组语法

             或者用三元表达式切换class
            
数组语法，用三元表达式切换class

             相当于
            
数组语法

         

         
    3、style内联样式
    用v-bind:style 直接设置样式
       例：
         

            
style直接设置内联样式

             或者绑定一个样式对象
            
style直接设置内联样式,绑定一个样式对象

             或者使用数组
            
style直接设置内联样式，使用数组

             相当于
            
style直接设置内联样式

         

         
    注：当v-bind:style使用需要特定前缀的css属性时，如transform，Vue.js会自动侦测并添加相应的前缀    
    4、附
       （1）v-bind 动态绑定指令，默认情况下标签自带属性的值是固定的，在为了能够动态的给这些属性添加值，
      可使用v-bind:动态变化的值="表达式"
       （2）v-bind用于绑定属性和数据，其缩写为":"，即v-bind:id===:id
       （3）v-model 用在表单控件上，实现双向数据绑定