vue入门 day02

当在文本框上按下回车键13再抬起时，自动调用vue中的search

<input @keyup.13="search">

1. 双向绑定:

     什么是单向绑定: 只能将程序中的修改更新到页面中。但是无法将页面中的更改，更新回程序中。

               只能从Model -> View  不能从View -> Model

               比如: {{}}  v-text   :   等等 都是单向绑定

               比如: <input :value="变量"

        结果: 变量中的值可正常显示在文本框中

                                 但是文本框内容修改，变量的值不会改变

     什么是双向绑定: 即能将程序中的修改更新到页面中，又能将界面中的修改，反向更新会程序中

     何时: 只要希望通过表单元素的修改，来更改程序的内容时。——只要绑定表单元素，都用双向绑定。

     如何：不要用:  ， 要用v-model:属性名="变量"

     原理: v-model其实就是自动为表单元素绑定了oninput或onchange事件。在这些内容更改事件中，自动修改当前Vue对象中的模型变量。

               普通绑定为什么不能更新程序中的数据：因为没有自动添加事件，导致界面上更改，Vue框架不知道，自然就无法更近模型变量。

     其它表单元素的双向绑定: 

1. 单选按钮radio: 要绑定checked

不绑定value，因为radio中的value是写死的，固定不变的。等着被选择。

绑定checked: 因为是否选中radio，取决于checked属性的值。用户更改选中项，改的也是checked属性值。——radio只能绑定v-model:checked=“变量”

绑定时:

<input type="radio" name="sex" value="1" v-model:checked="变量"

 <input type="radio" name="sex" value="0" v-model:checked="变量"  "变量==值"

小脾气: v-model在radio中：

从程序绑定到页面时: 会自动用checked后绑定的变量值和当前radio写死的value值做比较，返回bool值决定当前radio是否选中。时不用自己在checked后写完整条件！只写一个变量名即可！

改变选中状态时，v-model会将选中的radio的写死的value值更新回程序中绑定的变量上

2. 单个checkbox绑定: 也绑定checked属性

 <input type="checkbox" v-model:checked="isAgree"

3. select元素绑定: 绑定的是select元素整体的value属性

因为，无论选择了哪一个option，当前选中项的值都 变成select元素的value属性值。

如何:

<select v-model:value="变量">                                              
<option value="值1">

<option value="值2">
 ... ...                 

原理:

当从Model->View绑定时: 用变量的值和每个option的value做比较，按个相等，就选中哪一个 当修改select下的选中项后，将当前选中的option的value值更新回变量去

其实，以上绑定都有一个共同的简写: 只写v-model即可，可省略:value :checked等。v-model会个识别元素中起决定作用的可变的属性，自动绑定。

watch监控机制:

什么是: Vue中的watch监控机制可监控vue所有模型变量的变化。只要模型变量变化，就自动触发一个同名的函数。在函数中可调试变量的值或执行实时操作

何时: 希望只要变量的值变化，就立刻做一件事儿时

     如何: new Vue({

    el:"#app", //找要监控的整个页面空间

                      data:{ 

                                  变量1:值1

   }, //所有页面需要的模型变量

                        methods:{ ... }, //所有事件处理函数和一些自定义函数

                        created(){ ... }, //当new Vue()对象加载完自动执行

                        watch:{ //定义监控变量的函数

                                  变量1(){//必须同名，只有同名的函数，才能监视同名的变量

                                           执行一切js或vue的操作

                                }

   }

})

2. 计算属性:

什么是: 不实际属性值，绑定时，动态通过其他现有属性，计算出自己的属性值。

何时: 页面上需要一个值，但是，这个值数据库中没有直接保存，而是需要动态计算出来。

         如何: new Vue({

                            el:"#app",

                            data:{  },

                            methods:{  },

                            created(){  },

                            watch:{  },

                            computed:{

                                     属性名(){

                                               //通过其他变量计算获得最后结果

                                               return 结果

                                     }

                            }

                   }) 

使用计算属性：计算属性虽然定义成函数，但是，用法和普通模型变量完全一样！不要加()

特点:

1. 只要依赖的其它变量变化，计算属性都会自动重新计算

2. 一个属性如果多个位置使用，其实只计算一次。

原理: 计算属性的值，每计算一次，结果都会被Vue框架缓存起来，反复使用。除非依赖的变量发生改变时，才重新计算，然后再重新缓存，反复使用。

vs 函数: 也可以实现计算的效果

问题: 不会被缓存！每用一次就重复计算一次！

总结: 如果只关心计算结果时，首选计算属性
如果不关心结果，甚至没有返回值，只关心执行的过程时，首选函数。

3. 绑定样式:

2种:

1. 动态绑定单个css属性:

2种:

1. 用字符串方式，绑定整个style属性：

  <ANY :style="变量"            data:{

             变量:"top:50px; left:50px"

    }

缺点: 在字符串中不便于修改某一个css属性

2. 都用对象方式，绑定style:

 <ANY :style="变量"

 data:{

          变量:{

                    top:"50px", //必须px

                    left:"50px" //必须px

          }

          //绑定时，被自动翻译为字符串:

          //"top:50px; left:50px"

 }

强调: 固定的style和动态绑定的style可同时存在

比如：

   <div style="position:fixed" :style="divStyle">

      data:{

               divStyle:{

                         top:"50px", //必须px

                         left:"50px" //必须px

               }

      }

运行时，结果: 动态绑定的style会和写死的style合并为一个style:

2.动态绑定class

2种

1.将整个class属性当作一个字符串绑定

问题：不便于控制一个class的启用或禁用

2.今后要使用对象格式绑定

<b class = "固定不变的class" :class="变量名"
data:{
    变量名：{
        class1:true/false,
        class2:true/false,
        ...
    }
}

运行时：
1.将变量中值为true的class转为字符串：
比如：{down:true,fade:true}
->“down fade”
{down:false,fade:true}
->“fade”
2.用翻译好的class字符串和元素上规定的class=""，合并为一个class
如果想用程序切换使用/不适用某个样式类，只要修改类名对应的true/false就行

4.自定义指令

何时：当希望元素自动执行一件事，但是vue中的指令不够用，就可以自定义指令。
如何：
1.定义一个新的自定义指令

Vue.directive("指令名",{ //指令名不应该带v-前缀
    //会在当前元素加载后，自动执行
    inserted(elem){
        //elem:接住的是当前的指令所在的DOM元素
        //可对elem执行任何原生DOM的函数
    }

})

强调：应该定义在不属于任何new Vue()的外部全局
将来所有new Vue()都可以共用这个自定义指令

2.使用指令<ANY v-指令名
但是，使用指令时，必须加v-前缀
原理：当这个元素在HTML中加载完成后，自动去调用指令中携带的inserted()函数

5. 过滤器:

什么是: 将不能直接使用的变量值，过滤成可以给人看的新值的函数

何时: 只要变量的原始值不是想要的，都可用过滤器过滤成想要的值给人看。

如何:

1. 定义过滤器:

   Vue.filter(“过滤器名称”,function(oldVal){

        return 新值
   

   })

2. 使用过滤器:

   在绑定语法中都可用"|"将过滤器连接在变量之后

运行时: 原始变量值->过滤器->oldVal参数->return过滤后的新值->给人看

过滤器参数:

何时: 当根据不同值，选择过滤成不同的新结果时

如何: 2步:

1. 定义过滤器时添加形参:

                function(oldVal,lang="cn"){
   

2. 使用过滤器时传入实参:

     {{sex2|sexFilter("en")}}
   

强调: 定义时添加过滤器形参，从第二个形参开始添加。但是使用过滤器时，自定义实参值，却从第一个实参传入。但是还不会出错！因为过滤器函数在调用时，自动回将原始值作为第一个实参传入。我们添加的自定义实参，只能排在第二。

其实程序中的过滤器也可以用|串联多个:

{{变量|过滤器1|过滤器2|… }}

坑：定义后一个过滤器时，拿到的值不是原始值，而是上一个过滤过滤后的中间产物。

6. axios

什么是: 专门发送ajax请求的基于Promise的函数库

为什么:

1. 然哥四步/五步:

2. 可以自己封装

3. jQuery库中的$.ajax()

   将来在Vue项目中，几乎不会用jQuery

   如果仅仅为了发ajax请求而引入jQuery函数库，特别小题大做。

4. Vue官方有一个vue.resource组件

但已停止维护

5. axios: Vue官方推荐的最好的ajax函数库。

何时: 今后只要在任何位置想发ajax请求，都可用axios

如何:

1.引入axios.js
2.调用axios.get()函数发送请求

axios.get("url",{
    params:{ 
        参数1：值1
        ...:...
    
    }
    //运行时params中的参数会被翻译为字符串拼接到url结尾
}).then(result=>{
    this
    result返回的不只是服务端响应结果
    真正的响应结果包含在result.data中
})

7.new Vue()的生命周期

如何：new Vue()的生命周期包括4个阶段，8个函数
前: beforeCreate(){ … }
1.创建（create）阶段：创建new Vue()对象和data()对象
已经有data对象了，但是没有虚拟DOM树
可以发送ajax请求
因为没有虚拟DOM树，所以暂时不能用DOM操作
后：created(){ … .}
前: beforeMount(){ … }
2.挂载（mounted）阶段：创建虚拟DOM树，将data中的变量值开始向DOM树上绑定
既有data对象，又有虚拟dom树
即可发送ajax请求，又可执行dom操作
后：mounted(){…}
前：beforeUpdate(){…}

//后两个阶段不是必须
3.更新（update）阶段：当data中的变量值被改变时才触发
后：updated(){ … }
前：beforeDestroy(){ … }
4.销毁（destroy）阶段：当调用专门的$destroy函数销毁一个组件时，才触发
后：destroyed(){ … }