VUE基础02-模板语法

VUE基础02-模板语法

5.按键修饰符

• .enter 回车键

  <input type="text" v-model='pwd' @keyup.enter='fun'/>  

 

• .delete 删除键

<input type="text" v-model='pwd' @keyup.delete='fun'/>    

6.自定义按键修饰符

• 全局 config.keyCodes 对象

• Vue.config.keyCodes.自定义名称= keyCode值

  规则:自定义按键修饰符名字式自定义的,但是对应的值必须是按键对应的event.keyCode值.

    属性绑定

       v-bind指令可以动态控制属性值

 <a v-bind:href="url"></a>
  简写: <a :href="url"></a>

v-model的底层实现原理

   v-model可以实现双向数据绑定而v-bind可以动态控制属性的值.

   其实v-model的底层就是通过v-bind获取到属性值发生改变在通过事件来影响data中的模型的值.

  //v-model
  <input type="text" v-model='uname'/>
  //v-model底层:
  <input type="text" v-bind:value="uname" v-on:input="fun"/>
     <script>
          var vue =new Vue({
              el:'#div',
              data : {
                 uname:'user001'
              },
              methods:{
                  fun:function(event){
                    //使用输入域中的最新数据覆盖原来的数据
                   this.uname=event.target.value;
                 
                  }
                 
              }
          });
</script>

样式绑定

1.class 样式处理

•  对象语法

  <div v-bind:class="{box: isBox}" ></div>

  操作的是类的true.false

• 数组语法(控制多个对象)

<div v-bind:class="[box,box1]" ></div>

操作的是类的值

  样式绑定相关语法细节

   1.对象绑定和数组绑定可以结合使用

   2.class绑定的值可以简化操作

   3.默认的class会保留

样式绑定之内联样式 Style

• 对象用法

  <div v-bind:style-"{color:boxColor,fontSize:fontSize}"></div>

   

• 数组用法

  <div v-bind:style-"[baseStyle,overridingStyle]"></div>

  overridingStyle样式会对前面的样式有覆盖效果,没有的会补上多了的会覆盖.

  7.分支循环结构

  • v-if

  • v-else

  • v-else-if

    案例:

    ​

    <input type="text" placeholder="请输入你的成绩" v-model='score'/>
            <div v-if='score>=90'>优秀</div>
            <div v-else-if='score>=80 &&score<90'>良好</div>
            <div v-else-if='score>=60 &&score<80'>一般</div>
            <div v-else>垃圾</div>

     

  • v-show

    通过v-show指令来控制元素是否显示,v-show的值问true/false

    通过display属性的值来控制元素是否显示

    v-if与v-show的区别

    • v-if控制元素是否渲染到页面

    • v-show控制元素是否显示(已经渲染到了页面)

    • 渲染到页面和显示是俩种状态

      循环结构

      • v-for 遍历数组

       <ul>
                  <li v-for="item in color">{{item}}</li>
              </ul>

      数组中可以放对象,通过对象点属性的方式就可以将属性遍历出来

      可以在v-for的值里写上索引例如v-for="(item,index)"

      名称可以自定义

      • v-if和v-for 结合使用

        <div v-if='value==12' v-for='(value,key,index) in object'>
          </div>

        ​

      • v-for 遍历对象

        <div v-for='(value,key,index) in object'>
        ​
        
        </div>

         

  * key的作用:帮助Vue区分不同元素,从而提升性能

    通过key点属性来让Vue来更快的提升性能让代码的可读性变得更高