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.下拉菜单

      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:""
        }

标签

评论