Vue.js表单与自定义指令详解-优快云博客

本文链接：https://blog.youkuaiyun.com/JINGYUNSJ/article/details/94645861

表单域修饰符用法，

  <input type="text" v-model.number='age'>//如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符
    <input type="text" v-model.trim='info'>//会去出两边的空格
    <input type="text" v-model.lazy='msg'>//会同步输出文本

自定义指令。

<body>
  <div id="app">
    <div class="add">
      编号:<input type="text" v-model="newId" v-myfocus="newId">
      品牌名称:<input type="text" v-model="newName" @keyDown.enter="addData">
      <input type="button" value="添加" @click="addData">
    </div>

    <div class="add">
      品牌名称:<input type="text" placeholder="请输入搜索条件">
    </div>

    <div>
      <table class="tb">
        <tr>
          <th v-mycolor="color">编号</th>
          <th>品牌名称</th>
          <th>创立时间</th>
          <th>操作</th>
        </tr>
        <tr v-for="(item,index) in list" :key="index">
          <td>{{item.id}}</td>
          <td>{{item.name}}</td>
          <td>{{item.ctime}}</td>
          <td>
            <button @click="delData(index)" v-mycolor="color">删除</button>
          </td>
        </tr>
        <!-- <tr>
          <td colspan="4">没有品牌数据</td>
        </tr> -->
        <!-- 动态生成内容tr -->
      </table>
    </div>
  </div>
</body>
<script>
  // 利用Vue.directive()创建全局自定义指令，该方法有两个参数：一个自定义指令名称，一个是配置项(这里面主要包含一些和自定义指令执行相关的函数)
  // 1. 自定义指令名称 不带v-， 建议全部小写
  Vue.directive('myfocus', {
    // bind表示这个自定义指令一绑定到dom上，就开始自动执行
    bind(el,binding) {
      console.log('bind');
    },
    // 表示dom插入到页面上的时候自动执行
    // 这些函数都有两个参数，一个是el(使用自定义指令的元素), 一个是binding(记录自定义指令信息的对象)
    inserted(el, binding) {
      console.log('inserted');
      console.log(el);
      console.log(binding);
      el.focus()
    },
    // 表示自定义指令后面的值更新的时候，自动执行
    update() {
      console.log('update');
    }
  })

  // 创建一个自定义指令v-mycolor设置字体颜色
  Vue.directive('mycolor', {
    inserted(el, binding) {
      // binding.value获取到的是传递到自定义指令中属性的值
      el.style.color = binding.value
    }
  })


  let vm = new Vue({
    el: '#app',
    data: {
      color: 'red',
      newId: '', // 获取编号框中的值
      newName: '', // 获取品牌名称框中的值
      list: [
        {id: 33, name: 'LV', ctime: new Date()},
        {id: 44, name: 'CC', ctime: new Date()},
        {id: 55, name: 'NIKE', ctime: new Date()},
        {id: 66, name: 'YSL', ctime: new Date()},
      ]
    },
    methods: {
      delData(idx) {
        this.list.splice(idx, 1)
      },
      addData() {
        this.list.push({id: this.newId, name: this.newName, ctime: new Date()})
        // 添加完之后，给两个框清空
        this.newId = ''
        this.newName = ''
      }
    }
  })


</script>

计算属性与方法的区别
1 数据是可以进行逻辑处理相关的操作
2 可以对计算属性中的数据进行监视
3 计算属性是基于它所依赖的数据进行更新，在有在相关依赖的数据发生变化了才会进行更新，而普通的方法每次都会执行
4 计算属性是有缓存的，只要它所依赖的数据没有发生改变，后面的每一次访问计算属性中的值，都是之前缓存的结果，不会重复执行。
二、计算属性的用法

在一个计算属性里可以完成各种复杂的逻辑，包括运算、函数调用等，只要最终返回一个结果就可以。

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>　　//我们把复杂处理放在了计算属性里面了
</div>

var vm = new Vue({
    el: '#example',
    data: {
        message: 'Hello'
    },
    computed: {
        reversedMessage: function () {
            // `this` 指向 vm 实例
            return this.message.split('').reverse().join('')
        }
    }
});

监听器的用用法
在vue中，使用watch来响应数据的变化。watch的用法大致有三种。下面代码是watch的一种

<div>{{fullName}}</div>
watch: {
        // firstName: function(val) {
        //   this.fullName = val + ' ' + this.lastName;
        // },
        // lastName: function(val) {
        //   this.fullName = this.firstName + ' ' + val;
        // }
      }

过滤器的用法

  <div>{{msg | upper}}</div>
 Vue.filter('lower', function(val) {
      return val.charAt(0).toLowerCase() + val.slice(1);
    });

实例的生命周期
https://blog.youkuaiyun.com/weixin_40292626/article/details/80972146
响应式处理数据

  // Vue.set(vm.list, 2, 'lemon');
        vm.$set(vm.list, 1, 'lemon');

        // vm.info.gender = 'male';
        vm.$set(vm.info, 'gender', 'female');
        vm.$set(vm.info, 'gender1', 'female1');

VUE.2