2. 程式人生 > 其它 >vue 基礎2(表單，自定義指令，計算屬性，偵聽器，過濾器的用法)

vue 基礎2(表單，自定義指令，計算屬性，偵聽器，過濾器的用法)

阿新 • • 發佈：2021-07-20

1：表單的基本操作

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
  
  form div {
    height: 40px;
    line-height: 40px;
  }
  form div:nth-child(4) {
    height: auto;
  }
  form div span:first-child 
 
{
    display: inline-block;
    width: 100px;
  }
  </style>
</head>
<body>
  <div id="app">
    <form action="http://itcast.cn">
      <div>
        <span>姓名：</span>
        <span>
          <input type="text" v-model='uname'>
        </span>
 

      </div>
      <div>
        <span>性別：</span>
        <span>
          <input type="radio" id="male" value="1" v-model='gender'>
          <label for="male">男</label>
          <input type="radio" id="female" value="2" v-model='gender'>
          <
 
label for="female">女</label>
        </span>
      </div>
      <div>
        <span>愛好：</span>
        <input type="checkbox" id="ball" value="1" v-model='hobby'>
        <label for="ball">籃球</label>
        <input type="checkbox" id="sing" value="2" v-model='hobby'>
        <label for="sing">唱歌</label>
        <input type="checkbox" id="code" value="3" v-model='hobby'>
        <label for="code">寫程式碼</label>
      </div>
      <div>
        <span>職業：</span>
        <select v-model='occupation' multiple>
          <option value="0">請選擇職業...</option>
          <option value="1">教師</option>
          <option value="2">軟體工程師</option>
          <option value="3">律師</option>
        </select>
      </div>
      <div>
        <span>個人簡介：</span>
        <textarea v-model='desc'></textarea>
      </div>
      <div>
        <input type="submit" value="提交" @click.prevent='handle'>
      </div>
    </form>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      表單基本操作
    */
    var vm = new Vue({
      el: '#app',
      data: {
        uname: 'lisi',
        gender: 2,
        hobby: ['2','3'],
        // occupation: 3
        occupation: ['2','3'],
        desc: 'nihao'
      },
      methods: {
        handle: function(){
          // console.log(this.uname)
          // console.log(this.gender)
          // console.log(this.hobby.toString())
          // console.log(this.occupation)
          console.log(this.desc)

        }
      }
    });
  </script>
</body>
</html>
View Code

2：表單修飾符的用法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <input type="text" v-model.number='age'>
    <input type="text" v-model.trim='info'>
    <input type="text" v-model.lazy='msg'>
    <div>{{msg}}</div>
    <button @click='handle'>點選</button>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      表單域修飾符
    */
    var vm = new Vue({
      el: '#app',
      data: {
        age: '',
        info: '',
        msg: ''
      },
      methods: {
        handle: function(){
          // console.log(this.age + 13)
          // console.log(this.info.length)
        }
      }
    });
  </script>
</body>
</html>
View Code

3：自定義指令的基本用法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <input type="text" v-focus>
    <input type="text">
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      自定義指令
    */
    Vue.directive('focus', {
      inserted: function(el){
        // el表示指令所繫結的元素
        el.focus();
      }
    });
    var vm = new Vue({
      el: '#app',
      data: {
        
      },
      methods: {
        handle: function(){
          
        }
      }
    });
  </script>
</body>
</html>
View Code

4：帶引數的自定義指令

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <input type="text" v-color='msg'>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      自定義指令-帶引數
    */
    Vue.directive('color', {
      bind: function(el, binding){
        // 根據指令的引數設定背景色
        // console.log(binding.value.color)
        el.style.backgroundColor = binding.value.color;
      }
    });
    var vm = new Vue({
      el: '#app',
      data: {
        msg: {
          color: 'blue'
        }
      },
      methods: {
        handle: function(){
          
        }
      }
    });
  </script>
</body>
</html>
View Code

5：區域性指令的用法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <input type="text" v-color='msg'>
    <input type="text" v-focus>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      自定義指令-區域性指令
    */
    var vm = new Vue({
      el: '#app',
      data: {
        msg: {
          color: 'red'
        }
      },
      methods: {
        handle: function(){
          
        }
      },
      directives: {
        color: {
          bind: function(el, binding){
            el.style.backgroundColor = binding.value.color;
          }
        },
        focus: {
          inserted: function(el) {
            el.focus();
          }
        }
      }
    });
  </script>
</body>
</html>
View Code

6：計算屬性的基本用法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div>{{msg}}</div>
    <div>{{reverseString}}</div>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      計算屬性
    */
    var vm = new Vue({
      el: '#app',
      data: {
        msg: 'Nihao'
      },
      computed: {
        reverseString: function(){
          return this.msg.split('').reverse().join('');
        }
      }
    });
  </script>
</body>
</html>
View Code

7：計算屬性與反方的區別

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div>{{reverseString}}</div>
    <div>{{reverseString}}</div>
    <div>{{reverseMessage()}}</div>
    <div>{{reverseMessage()}}</div>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      計算屬性與方法的區別:計算屬性是基於依賴進行快取的，而方法不快取
    */
    var vm = new Vue({
      el: '#app',
      data: {
        msg: 'Nihao',
        num: 100
      },
      methods: {
        reverseMessage: function(){
          console.log('methods')
          return this.msg.split('').reverse().join('');
        }
      },
      computed: { //依賴data中的資料做快取，如果資料相同，多次呼叫執行一次，而方法不同
        reverseString: function(){
          console.log('computed')
          // return this.msg.split('').reverse().join('');
          var total = 0;
          for(var i=0;i<=this.num;i++){
            total += i;
          }
          return total;
        }
      }
    });
  </script>
</body>
</html>
View Code

8：偵聽器的基本用法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div>
      <span>名：</span>
      <span>
        <input type="text" v-model='firstName'>
      </span>
    </div>
    <div>
      <span>姓：</span>
      <span>
        <input type="text" v-model='lastName'>
      </span>
    </div>
    <div>{{fullName}}</div>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      偵聽器
    */
    var vm = new Vue({
      el: '#app',
      data: {
        firstName: 'Jim',
        lastName: 'Green',
        // fullName: 'Jim Green'
      },
      computed: {
        fullName: function(){
          return this.firstName + ' ' + this.lastName;
        }
      },
      watch: {
        // firstName: function(val) {
        //   this.fullName = val + ' ' + this.lastName;
        // },
        // lastName: function(val) {
        //   this.fullName = this.firstName + ' ' + val;
        // }
      }
    });
  </script>
</body>
</html>
View Code

9：偵聽器的案列

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div>
      <span>使用者名稱：</span>
      <span>
        <input type="text" v-model.lazy='uname'>
      </span>
      <span>{{tip}}</span>
    </div>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*      
      偵聽器
      1、採用偵聽器監聽使用者名稱的變化
      2、呼叫後臺介面進行驗證
      3、根據驗證的結果調整提示資訊
    */
    var vm = new Vue({
      el: '#app',
      data: {
        uname: '',
        tip: ''
      },
      methods: {
        checkName: function(uname) {
          // 呼叫介面，但是可以使用定時任務的方式模擬介面呼叫
          var that = this;
          setTimeout(function(){
            // 模擬介面呼叫
            if(uname == 'admin') {
              that.tip = '使用者名稱已經存在，請更換一個';
            }else{
              that.tip = '使用者名稱可以使用';
            }
          }, 2000);
        }
      },
      watch: {
        uname: function(val){
          // 呼叫後臺介面驗證使用者名稱的合法性
          this.checkName(val);
          // 修改提示資訊
          this.tip = '正在驗證...';
        }
      }
    });

  </script>
</body>
</html>
View Code

10：過濾器的基本用法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <input type="text" v-model='msg'>
    <div>{{msg | upper}}</div>
    <div>{{msg | upper | lower}}</div>
    <div :abc='msg | upper'>測試資料</div>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      過濾器
      1、可以用與插值表示式和屬性繫結
      2、支援級聯操作
    */
    // Vue.filter('upper', function(val) {
    //   return val.charAt(0).toUpperCase() + val.slice(1);
    // });
    Vue.filter('lower', function(val) {
      return val.charAt(0).toLowerCase() + val.slice(1);
    });
    var vm = new Vue({
      el: '#app',
      data: {
        msg: ''
      },
      filters: {
        upper: function(val) {
          return val.charAt(0).toUpperCase() + val.slice(1);
        }
      }
    });
  </script>
</body>
</html>
View Code

11：例項的生命週期

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div>{{msg}}</div>
    <button @click='update'>更新</button>
    <button @click='destroy'>銷燬</button>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      Vue例項的生命週期
      
    */
    var vm = new Vue({
      el: '#app',
      data: {
        msg: '生命週期'
      },
      methods: {
        update: function(){
          this.msg = 'hello';
        },
        destroy: function(){
          this.$destroy();
        }
      },
      beforeCreate: function(){
        console.log('beforeCreate');
      },
      created: function(){
        console.log('created');
      },
      beforeMount: function(){
        console.log('beforeMount');
      },
      mounted: function(){
        console.log('mounted');
      },
      beforeUpdate: function(){
        console.log('beforeUpdate');
      },
      updated: function(){
        console.log('updated');
      },
      beforeDestroy: function(){
        console.log('beforeDestroy');
      },
      destroyed: function(){
        console.log('destroyed');
      }
    });
  </script>
</body>
</html>
View Code

12：變異方法和替換陣列

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div>
      <span>
        <input type="text" v-model='fname'>
        <button @click='add'>新增</button>
        <button @click='del'>刪除</button>
        <button @click='change'>替換</button>
      </span>
    </div>
    <ul>
      <li :key='index' v-for='(item,index) in list'>{{item}}</li>
    </ul>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      Vue陣列操作
      1、變異方法：會影響陣列的原始資料的變化。
      2、替換陣列：不會影響原始的陣列資料，而是形成一個新的陣列。
    */
    var vm = new Vue({
      el: '#app',
      data: {
        fname: '',
        list: ['apple','orange','banana']
      },
      methods: {
        add: function(){
          this.list.push(this.fname);
        },
        del: function(){
          this.list.pop();
        },
        change: function(){
          this.list = this.list.slice(0,2);
        }
      }
    });
  </script>
</body>
</html>
View Code

13：動態響應是資料處理

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <ul>
      <li v-for='item in list'>{{item}}</li>
    </ul>
    <div>
      <div>{{info.name}}</div>
      <div>{{info.age}}</div>
      <div>{{info.gender}}</div>
    </div>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      動態處理響應式資料
      
    */
    var vm = new Vue({
      el: '#app',
      data: {
        list: ['apple', 'orange', 'banana'],
        info: {
          name: 'lisi',
          age: 12
        }
      },
    });
    // vm.list[1] = 'lemon';
    // Vue.set(vm.list, 2, 'lemon');
    vm.$set(vm.list, 1, 'lemon');

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

    
  </script>
</body>
</html>
View Code

相關推薦

vue 基礎2(表單，自定義指令，計算屬性，偵聽器，過濾器的用法)

1：表單的基本操作 <!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\">

vue自定義指令和計算屬性

技術標籤：Vuevuevue.js前端 自定義指令 Vue 自帶的指令無法滿足開發需求，這時需要自定義一些指令。指令可以註冊為全域性指令或者區域性指令。全域性指令使用 Vue 物件下的 directive 方法定義，區域性指令在 V

Vue【資料】計算屬性和偵聽器

筆記內容：學習編寫能夠讓模板產生響應式變化的資料。 目錄： 計算屬性 偵聽器

vue 計算屬性和偵聽器的使用小結

1. 計算屬性和偵聽器 1.1 計算屬性 <!DOCTYPE html> <html> <head> <meta charset=\"utf-8\">

10【Vue全家桶之Vue基礎】Vue 常用特性/高階特性，常用特性: 表單操作 v-model， 自定義指令， 計算屬性，過濾器， 傾聽器， 生命週期

Vue 常用特性/高階特性 常用特性: 表單操作 v-model 自定義指令 計算屬性 methods 過濾器 傾聽器 生命週期

Vue2020 - 2 - 表單操作，表單修飾符，自定義指令，計算屬性，偵聽器，過濾器，生命週期，陣列變異，替換陣列，動態陣列相應，圖書列表案例，常用特性應用場景

目錄day02Vue常用特性表單基本操作表單修飾符自定義指令Vue.directive註冊全域性指令Vue.directive註冊全域性指令 帶引數自定義指令區域性指令計算屬性computed偵聽器watch過濾器過濾器中傳遞引數生命週期常用的 鉤子

vue——進階(slot插槽，自定義指令，過濾器)

一、slot插槽 #指定元件的樣式，只用元件的功能 哪裡需要就在哪裡放插槽： <slot></slot>

from表單實現自定義驗證

技術標籤：elementui 頁面實現程式碼 <el-col :span="12" style="margin-left: -60px">

iview實現動態表單和自定義驗證時間段重疊

動態新增表單項 iview的動態新增表單很簡單，只需設定好表單項為一個array，新增新專案的時候就push一個預設好的值，剩下的iview會幫你做好。

Antd——表單使用自定義正則進行校驗

前言 Ant Design of Vue中的表單如何使用自定義正則進行校驗 內容 <template> <!--省略程式碼-->

第183天學習打卡（專案 穀粒商城25 表單檢驗自定義檢驗器 JSR303資料校驗 ）

表單校驗，自定義校驗器 brand-add-or-update.vue <template> <el-dialog:title=\"!dataForm.brandId ? \'新增\' : \'修改\'\":close-on-click-modal=\"false\":visible.sync=\"visible\" ><el-form

Mybatis外掛，sql攔截器，國密SM4加密資料庫欄位，自定義註解配置加密屬性，攔截器自動解密

資源地址： 本文只是做了一個小小的demo，針對於Mybatis外掛的編寫，主要參考官方文件

vue中的計算屬性和偵聽屬性

計算屬性 計算屬性用於處理複雜的業務邏輯 計算屬性具有依賴性，計算屬性依賴 data中的初始值，只有當初始值改變的時候，計算屬性才會再次計算

Vue中偵聽器的基本用法示例

目錄前言一、偵聽器的基本用法二、偵聽器的格式三、實現剛進入頁面就觸發監聽和深度監聽深度監聽深度監聽返回偵聽物件子屬性的值最後前言

一個另類的VUE 表單驗正 自定義指令input表單的資料驗證

Installation npminstall--savevue-directive-valid or yarnaddvue-directive-valid Usage importvalidfrom\'vue-directive-valid\';

Vue基礎：插槽（slot），自定義事件內容分發（$emit('事件名',引數);

一，slot（插槽） 　　通俗的說：就是元件巢狀元件，被巢狀的元件插到相應的插座上

vue學習筆記（四）--來源尚矽谷《收集表單資料、過濾器、內建指令、自定義指令、生命週期、非單檔案元件、單檔案元件》

十三、收集表單資料 收集表單資料： 若：<input type=\"text\"/>，則v-model收集的是value值，使用者輸入的就是value值。

Vue 中怎麼自定義指令， Vue 中怎麼自定義過濾器， NextTick 是做什麼的，Vue 如何去除url中的，computed 和事件 methods 有什麼區別

全域性註冊 區域性註冊 Vue 中怎麼自定義過濾器 可以用全域性方法Vue.filter()註冊一個自定義過濾器，它接收兩個引數：過濾器ID和過濾器函式。過濾器函式以值為引數，返回轉換後的值

vue框架之swiper、自定義指令、過濾器及單檔案元件等相關內容-114

1 生命週期 1 mounted用的最多：向後端傳送請求，定時器初始化2 destroyed：元件銷燬--->給元件寫一個定時器-->元件銷燬，定時器清除

vue專案開發自定義步驟條，自定義高亮

技術標籤：vuevuejavascriptvue.jshtml 專案開發過程中很多時候element的UI元件和實際專案的需求有一樣，不能直接服用，我這裡是自定義實現步驟條方式