Vue学习笔记——two：Vue常用特性（表单操作、自定义指令、计算属性、过滤器、侦听器、生命周期）

Vue常用特性

表单操作

基于Vue的表单操作

• input单行文本
  • 通过v-model双向绑定
• textarea多行文本
• select下拉多选
• radio单选框
• checkbox多选框

表单域修饰符

• number：转化为数值（默认是字符串）
• trim：去掉开始和结尾的空格
• lazy：将input事件切换为change事件

 <div id="app">
        <!-- <input type="text" name="" id="" v-model="age"> -->
        <input type="text" v-model.number='age'>
        <input type="text" v-model.trim='trimc'>
        <input type="text" v-model.lazy='changet'>
        <div>{
   {
   changet}}</div>
        <input type="submit" value="点击" @click="handle">
    </div>
    <script>
        let vm = new Vue({
   
            el:"#app",
            data: {
   
                age: '',
                trimc: '',
                changet: ''
            },
            methods: {
   
                handle(){
   
                    console.log(this.age);
                    console.log(this.trimc);
                    console.log(this.changet);
                }
            }
        });
    </script>

自定义指令

1. 为何需要自定义指令

   内置指令不满足需求

2. 自定义指令的语法规则（获取元素焦点）

   Vue.directive('focus' ,{
        inserted: function(el){
            //获取元素的焦点
            el.focus();
        }
    })
   

3. 自定义指令用法

<div id="app">
        <input type="text" v-focus