2020.10.16陈悦玲

VUE

vue 模板语法

1. 按键事件修饰符

   1. v-onn:keyup.enterup = "" 键盘抬起
   2. v-on:kyeup.delete =""

2. 属性绑定

   1. v-bind 缩写 ：
   2. v-model 双向绑定

3. 样式绑定也是用属性绑定来改变样式

   1. html
//对象语法
<div v-bind:class={active:isActive,background:isBackground}> data中isActive：true //这样是用来样式是否显示 如果为false就不会显示

   1. html
//数组语法
<div v-bind:class={activeClass,backgroundClass}> data中activeClass:"active"，backgroundClass:"background"


   1. data中：allClass = [active,background]
      //如果是对象的话就用下面这种方式绑定
      
      objClasses:{
      
      active:true,
      
      background:true
      
      }
      
      //使用：this.objClasses.avtive
      

   1. 默认的class会被保留

1. style样式处理(内联样式)

   1. <div v-bind:style="{border:borderStyle}"
      <div v-bind:style="objStyle"
      
      data:{
      
      borderStyle:"1px solid #000"
      
      objStyle:{
      
          width:"101px",
      
          height:"100px",
      
      }
      
      }
      
      methods:{
      
      handle:function(){
      
          this.borderStyle="2px solid #000"
      
      }
      
      }
      

1. 分支结构

   1. 
v-if
v-else-if
v-else


   1. 循环结构

      v-for遍历数组
      v-for="item in arr" <span>{{arr.ename}}
      
      data:{
      
      arr:[{
      
          id:1,
      
          ename:"ccc",
      
          cname:"ttt"
      
      },{
      
          id:2
      
          ename:"ccc",
      
          cname:"ttt"
      
      },{
      
          id:3,
      
          ename:"ccc",
      
          cname:"ttt"
      
      }]
      
      }
      
      v-for="(item,index) in arr"
      
      key的作用:帮助vue区分不同的元素，从而提高性能(不会对页面起作用)
      
      :key = item.id v-for="(item,index) in arr"
      

1. 表单操作

   1. //阻止默认行为
      @click.prevent="handle"
      
      handle:function(){
      
      console.log(this.name)
      
      }
      

      1. radio的值
         男
         女
      2. checkbox的值
         打篮球
         唱歌
         跳舞

      data:{
      gender:1//默认值为1 默认选的是男
      hobby:["1"]//默认值选择值选择第一个
      }

      4.下拉菜单
      
      1
      2
      3
      

      data:{
      occupation:["1"]
      }

      5.多行文本textarea
      

      data:{
      desc:"nihao"
      }

   1. 表单域修饰符

      1. number v-model.number="age"

         age:12

         number:转化为number值

      2. trim :去掉开始和结尾的空格

      3. lazy：将input事件切换为change事件（失去焦点时发生变化）

   2. 自定义指令

      1. 使用：v-focus

      2. 定义：

         Vue.directive("focus",{

         ​ inserted:function(el){

         ​ //el表示指令所绑定的元素

         ​ el.focus();

         }

         })

      3. 带参数的自定义指令

         //
         <input type = "text" v-color="msg">
         
         <input type = "text" v-focus>
         
          //全局指令
         
         Vue.directive("color",{
         
         inserted:function(el.binding){
         
         //el表示指令所绑定的元素 
         
         //el.focus();
         
          //根据指令的参数设置背景色
         
          console.log(binding.value.color)//hello
         
          el.style.backgroundColor = binding.value.color
         
         }
         
         })
         
         var vm = new Vue({
         
          data:{
         
          msg:{
         
              color:"orange"
         
         },
         
          //4.局部指令
         
          directives:{
         
              color:{
         
                  bind:function(el,binding){
         
                       el.style.backgroundColor = binding.value.color
         
                  }
         
              }
         
          },
         
          focus:function(){
         
              inserted:function(el){
         
                  el.focus();
         
              }
         
          }
         
         })
         

   3. 计算属性（与methods的区别：计算属性是基于他们的依赖进行缓存，方法不存在缓存。如果数据发生变化，计算属性也会发生变化）

      <div>{{msg}}</div>
      <div>{{reverseString()}}</div>
      
      var vm = new Vue({
      
        data:{
      
            msg:"nihao"
      
        }，
      
      computed:{
      
          reverseString:function(){
      
              return this.msg.split("").reverse().join("")
      
              //就是让这个字符串翻转一下
      
          }
      
      }
      
      })
      

   5.侦听器

   1. 数据变化时执行异步或者开销较大的操作

   2. watch

   3. <span v-model="firstName"></span>
      <span v-model="lastName"></span>
      
      <div>{{fullName}}</div>
      
      data:{
      
      firstName:"Jim",
      
      lastName:"Green",
      
      fullName:"Jim Green"
      
      },
      
      watch:{
      
      firstName:function(val){
      
          this.fullName = val + this,lastname
      
      }
      
      lastName:function(val){
      
          this.fullName = this,firstName + val
      
      }
      
      }
      

      4.验证用户名是否可用

      div id="app">
        用户名：<input type="text" v-model.lazy="uname">
      
        <!-- 失去焦点时开始绑定lazy -->
      
        <span>{{tip}}</span>
      
      </div>
      
        <script src="./vue.js"></script>
      
        <script>
      
        var vm = new Vue({
      
          el:"#app",
      
          data:{
      
            uname:"",
      
            tip:""
      
          },
      
          methods:{
      
            checkNname:function(uname){
      
              var that = this;
      
              //调用接口，但是可以使用定时任务的方式模拟接口的调用
      
              setTimeout(function(){
      
                //模拟接口调用
      
                if(uname == "admin"){
      
                  that.tip="用户已经存在"
      
                }else{
      
                  that.tip="用户名可以使用"
      
                }
      
              },2000)
      
            }
      
          },
      
          //采用监听器监听用户名的变化，
      
          // 2.调用后台接口进行验证
      
          // 3.根据验证的结果调整提示信息
      
          watch:{
      
            uname:function(val){
      
              ///调用后台接口验证用户名的合法性
      
              this.checkNname(val);
      
              this.tip="正在验证..."
      
            }
      
          }
      
        })
      
      </script>
      

   1. 过滤器： 格式化数据，比如将字符串格式化为首字母大写，将日期格式化为指定的格式的格式等

      1. js
<input type="text" v-model="msg"
<div>{{msg | upper}}</div>
Vue.filter("upper",function(val){
return val.charAt(0).toUpperCase() + val.slice(1)
})//首字母大写 slice(1)从第2个字符开始截取到最后
data:{
msg:""
}


​