<strike id="iz7t7"></strike>
    1. <sub id="iz7t7"></sub>
    2. <sub id="iz7t7"><del id="iz7t7"></del></sub>
      1. <blockquote id="iz7t7"></blockquote>

        Vue-基础(一)

        一.Vue中的常用指令

          什么是指令?

          指令就是vue中提供的一些对于页面和数据更为方便的操作,

          指令就是以数据去驱动DOM行为的,简化DOM的操作

          常用指令

          v-text / v-html :用于为标签内部赋值:

            两者区别:v-text不能解析html标签.v-html可以解析html标签

          v-if/v-else-if/v-else:用于条件判断是否

          v-show:用于条件判断是否显示/隐藏

            二者区别:v-show 隐藏本质上是设置标签的displa:none,而v-if隐藏是将标签注释掉了

          v-for:遍历对象 或者 数组

         

        二.Vue中的单向数据流,双向数据流,以及事件绑定

          1.单向数据流==>也叫做单向数据绑定,就是内存改变印象页面改变,js代码运行在内存中,改变html页面

            使用v-bind指令,

        <input v-bind:value="name" v-bind:class="name">

          2.双向数据流==> 双向数据绑定,页面对于input的value的改变,能影响内存Js代码中name的变量,同样的,内存JS改变了name的值,会影响页面重新渲染最新值

            使用v-model指令:注意:v-model 只能作用于有value属性的元素

        <input v-model="name" v-bind:class="name">

          3.事件绑定:

           v-on:事件名="表达式||函数名" 也可以简写为@事件名="表达式||函数名"

         

        三.监听器watch和计算属性computed

          当被监听的对象发生变化时,会触发监听器或者计算属性的方法

          两者的对比:

            watch监听单个,computed监听多个,

          注意事项:

            当watch监听的是复杂数据类型,例如数组,对象的时候,需要做深度监听(deep:true)

        watch:{
          //被监听的属性 msg:{ handler(val){
        if(val.text==‘love‘){ alert(val.text) } }, deep:true//开启深度监听 } }
        相关文章
        相关标签/搜索
        每日一句
          每一个你不满意的现在,都有一个你没有努力的曾经。
        公众号推荐
           一个历史类的公众号,欢迎关注
        一两拨千金
        刘伯温三肖选一肖