Fork me on GitHub

【VUE】Vue事件与表单处理及进阶语法02

一、事件与表单处理

1、v-on 监听事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>监听事件</title>
</head>
<body>
    <div id="app">
        <p>{{ content }}</p>
        <button v-on:click="content='这是新的内容'">按钮1</button>
        <button @click="content='这是按钮2设置的内容'">按钮2</button>
        <button @click="fn">按钮3</button>
        <button @click="fn2(200,$event)">按钮4</button>

    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <script>
     var vm= new Vue({
                el:'#app',
                data:{
                    content:'这个默认的内容'},
                methods:{
                    fn(event){
                        console.log(event);
                        this.content='这是设置3的内容';

                    },
                    fn2(value,event){
                        console.log(value,event);

                    }

                }
                }
        )
    </script>
    
</body>
</html>

2、v-双向数据绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p>p元素的内容是:{{ value }}</p>
        <input type="text" v-model="value">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <script>
        const vm =new Vue({
            el:'#app',
            data:{
                value:''
            }
        })
    </script>
</body>
</html>

3、v-输入框绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p>textarea输入框内容是:{{ value2 }}</p>

        <textarea  v-model="value2" ></textarea>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <script>
        const vm =new Vue({
            el:'#app',
            data:{
                value2:''
            }
        })
    </script>
</body>
</html>

4、单选框绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
       <p>radio的内容为:{{ value3 }}</p>
       <input type="radio" id="one" value="1" v-model="value3">
       <label for="one">选项1</label>
       <input type="radio" id="two" value="2" v-model="value3">
       <label for="two">选项2</label>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <script>
        const vm =new Vue({
            el:'#app',
            data:{
                value3:''
            }
        })
    </script>
</body>
</html>

5、多复选项框

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>

    <div id="app">
        多复选框：
        <br>
        <input type="checkbox" id="cb1" value="选项1" v-model="checkedNames">
        <label for="cb1">选项1</label>

        <br>
        <input type="checkbox" id="cb2" value="选项2" v-model="checkedNames">
        <label for="cb2">选项2</label>

        <br>
        <input type="checkbox" id="cb3" value="选项3" v-model="checkedNames">
        <label for="cb3">选项3</label>
        <br>
        
        <span>选中的值：{{checkedNames}}</span>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el: "#app",
            data: {
                checkedNames: []
            }
        });
    </script>
</body>

</html>

6、选择框绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择框绑定</title>
</head>
<body>
    <div id="app">
        <!-- 单选选择框 -->
        <p>单选选择框内容：{{ value6 }}</p>
        <select v-model="value6">
            <option value="">请选择</option>
            <option value="1">选项1</option>
            <option value="2">选项2</option>
            <option value="3">选项3</option>
        </select>

        <!-- 多选选择框 -->
        <p>多选选择框内容：{{ value7 }}</p>
        <select v-model="value7" multiple>
            <option value="1">选项1</option>
            <option value="2">选项2</option>
            <option value="3">选项3</option>
        </select>

    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <script>

        var vm=new Vue({
            el:'#app',
            data:{
                value6:'',
                value7:[]
            }
        })
    </script>
    
</body>
</html>

　

二、自定义命令

1、全局自定义指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全局自定义指令</title>
</head>
<body>
    <div id="app">
    
    <p v-highlight>这是一个自定义指令示例1</p>
    <p v-highlight="highlightColor">这是一个自定义指令示例2</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
    <script>
        // 全局注册 highlight 指令
        Vue.directive('highlight',{
            // bind指令表示第一次绑定到元素时调用,el表示指令所绑定的元素，binding参数表示指令的属性值
            bind:function(el,binding){     
                el.style.backgroundColor = binding.value || 'red'
            }
        })

        var app=new Vue({
            el:'#app',
            data:{
                highlightColor:'green'
            }
        })


    </script>
    
</body>
</html>

2、局部自定义指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>局部自定义指令</title>
</head>
<body>
    <div id="app">
    <p v-highlight="'yellow'">这是一个局部自定义指令示例1</p>
    <p v-highlight="highlightColor">这是一个局部自定义指令示例2</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
    <script>
      
        var app=new Vue({
            el:'#app',
            data:{
                highlightColor:'green'
            },
            directives:{
                // 局部注册 highlight 指令
                highlight:{
                 // bind指令表示第一次绑定到元素时调用,el表示指令所绑定的元素，binding参数表示指令的属性值
                bind:function(el,binding){     
                    el.style.backgroundColor = binding.value || 'red' 
                }
            }

        }
      
    
    })

    </script>
    
</body>
</html>

三、过滤器

1、全局过滤器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全局过滤器</title>
</head>
<body>
  <div id="app">{{ timestamp | formatDate }}</div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
    <script>
    // 定义全局过滤器 formatDate
    Vue.filter('formatDate', function (value) {
    // 将时间戳转换为日期对象
    const date = new Date(value)
    // 获取年月日
    const year = date.getFullYear()
    const month = date.getMonth() + 1
    const day = date.getDate()
    // 返回格式化后的日期字符串
    return `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`
    })

    var vm1=new Vue({
        el:'#app',
        data:{ // 时间戳
        timestamp: 1623041514000}
        })
    </script>
    
</body>
</html>

2、局部过滤器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>局部过滤器</title>
</head>
<body>
    <div id="app">{{ timestamp | formatDate }}</div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
    <script>
        var vm=new Vue({
            el:'#app',
            data:{ // 时间戳
            timestamp: 1623041514023},
            // 定义局部过滤器
            filters:{
            formatDate(value){
            // 将时间戳转换为日期对象
            const date = new Date(value)
            // 获取年月日
            const year = date.getFullYear()
            const month = date.getMonth() + 1
            const day = date.getDate()
            // 返回格式化后的日期字符串
            return `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`
            }}
        })
    </script>
</body>
</html>

 

　

　　

　　

　　

　　

　　

 

posted @ 2023-06-05 23:18  橘子偏爱橙子  阅读(51)  评论(0)    收藏  举报