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属性

  1. 都用对象方式,绑定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组件

但已停止维护

  1. 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(){ … }

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值