VUE知识点

1、什么是vue：

vue是一个小巧、容易上手的mvvm框架，和angular类似
 vue结构为：一片html代码配合json，再new一个vue实例

html:
   <div id='box'>
       {{text}}
    </div>
script:
   var c = new Vue({
       el:'#box',    //选择器 id、class、tagName
        data：{
           text:'hello vue'
        }
    })

前端框架：
1. mvc【react】model + view + control

2. mvvm【angular、vue】model + view + viewmodel

MVVM的优点：
低耦合：View可以独立于Model变化和修改，同一个ViewModel可以被多个View复用；并且可以做到View和Model的变化互不影响；

可重用性：可以把一些视图的逻辑放在ViewModel，让多个View复用；

独立开发：开发人员可以专注与业务逻辑和数据的开发 
ViewModemvvm设计人员可以专注于UI(View)的设计；

可测试性：清晰的View分层，使得针对表现层业务逻辑的测试更容易，更简单。

2、vue的特点：

不兼容低版本IE、轻（拆分成了很多模块，让用户自己选择需要的功能  vue-router、vuex、vue-resource、vue-server-renderer）、github活跃、作者是中国人所以文档对于中国程序猿更友好、渲染快
!)
 可以看到angular每秒只能进行100次左右的操作，React大概在1000-2000之间，Vue在10K以上，这是因为Vue每次赋值，都直接触发了数据项的对比然后直接更新绑定DOM元素的内部文本，而不是关联模板（angular）、也没有对比虚拟DOM节点差异（react）

3、常用指令：【扩展html标签功能、属性】

a) v-model (双向数据绑定) 一般表单元素（input）

b) v-for (循环)
   [1.*版本]：
            v-for='item in items'
            {{item}}

              v-for='(k,v) in items'
              {{k}} {{v}}
      另外还有：{{$index}} {{$key}}可用

    [2.*版本]：
             v-for='(v,k) in items'
               {{v}} {{k}}

          注意：v、k的顺序改变
            去除了{{$index}} {{$key}}

c) v-show (显示/隐藏)
          v-show='布尔值'
d) v-if (是否渲染)
          v-if='布尔'

4、常用事件：(v-on:* / @*)

a)鼠标类事件【click/mouseout/mouseover/dbclick/mousedown/contextmenu/..】

1. 用法：v-on:click/@click='函数'

   2. 对象：$event

原生js：
      document.getElementById('password').click=function(e){
            event = e||window.event
        }
vue.js:
      @click='mymethod($event)'

        methods:{
           mymethod:function(e){
               ...
            }
        }

3. 阻止冒泡：
         a) e.cancelBubble = true;
            b) @click.stop  ☆推荐

4. 阻止默认行为：
         a) e.preventDefault();
            b) @contextmenu.prevent ☆推荐

b)键盘类事件【keydown/keyup】

1. 用法：v-on:keydown/@keydown='函数'

2. 对象：同鼠标类事件

3. 获取键入码：
   mymothod:function(e){
            e.keyCode
     }
     
4.常用键：
         【exemple】判断按下的键是回车：
              a)
                 @keydown='mymethod($event)'

                 mymethod:function(e){
                    if(e.keyCode == 13) console.log('你按下了回车')
                 }

              b)
                 keydown.13='enterfunc'

                 enterfunc:function(){
                    console.log('你按下了回车')
                 }

              c)
                 keydown.enter='enterfunc'
          【补充】:
                @keyup/down.left
                  @keyup/down.right
                  @keyup/down.up
                  @keyup/down.down
                  ....

5、常用属性：(v-bind:* / :*)

a)class和style:
    1. :class=''      v-bind:class=''
       :style=''      v-bind:style=''
    2.
       :class='[active, bluebg]'
      
       :class='{active:isActive, bluebg:isBlue}'
        data:{
            isActive: true,
            isBlue: false
        }
    3.
       :class='json'
        data:{
            json:{active:isActive, bluebg:false},
            isActive:true
        }
     4.
     :class='[isActive ? active : "", bluebg]'
       :class='[{ active: isActive }, bluebg]'
     5.
     :style="{'margin-left':mleft, fontSize: ftSize + 'rem'}"
       data:{
        mleft:'20px',
           ftSize:'16'
       }
b)其他属性:【width、height、src、disable、自定义属性、...】
       v-bind:src='url_data'            :src='url_data'

        <img src='{{url_data}}'>        //数据能读出来，但是会报错
        <img :src='url_data'>         //数据能读出来，且不会报错

6、模板：

{{text}}               //数据更新则模板发生变化

   {{*text}}              //数据只绑定一次（初始值）

   {{{text}}}            //HTML转义输出

7、过滤器：

a) 过滤器用法：
    {{text| filterA}}
     {{text| filterA | filterB}}
 b) 示例：
    {{text| capitalize}}

     filters: {
       capitalize: function (value) {
         if (!value) return ''
         value = value.toString()
         return value.charAt(0).toUpperCase() + value.slice(1)
       }
     }

   1.\*版本中vue是自带系统默认的很多过滤器的，虽然不知道为什么，但是作者在2.*版本中全部取消了，让用户自己写filter，下面给出曾经自带的系统默认的过滤器，如果自己写，应该怎么写：

   1. uppercase
      text.toUpperCase()
   2. lowercase
      text.toLowerCase()
   3. pluralize
      filters: {
           pluralize: function (value, sotval) {
               if(sotval){
                 if (value === 0) {
                   return 'no' + sotval;
                 } else if (value === 1) {
                   return '1' + sotval
                 } else {
                   return value + sotval + 's'
                 }
              }else{
                   return value
              }
           }
        }
   4. currency
      filters: {
          currency: function (price, money) {
            if(money){
               money + price.toFixed(2)
            }else{
               '$' + price.toFixed(2)
            }
          }
        }
```        
#### 8、交互（vue-resouce）
   【引入vue-resouce后，会扩充vue实例对象，vue对象下挂一个$http对象】
```bash
   a)get:
       //获取一个普通的文本数据
        this.$http.get('a.txt').then(function(res){
           console.log('success');
            this.data = res.data;
        },function(res){
           console.log('faild');
            console.log(res.status);
        });