v-model的概念

最新推荐文章于 2024-04-23 16:51:15 发布

77不吃香菜.

最新推荐文章于 2024-04-23 16:51:15 发布

阅读量143

点赞数 1

文章标签： vue

本文链接：https://blog.csdn.net/luna_H/article/details/137491170

版权

本文介绍了Vue.js中v-model的作用、其实现原理以及如何在表单中使用。同时，还提及了Vue.jsdevtools扩展工具，并涉及了局部自定义指令的使用。

摘要由CSDN通过智能技术生成

v-model是什么
	1.双向数据绑定，既可以拿取data的数据，也可以写入数据
	2.v-model本身是一个语法糖，一般用于表单收集
	3.v-model自动绑定表单value值 v-model=""
	v-model原理
	1.使用v-bind绑定数据
	2.使用oninput传递数据

vue.js devtools扩展工具

directives局部自定义指令


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- v-model是什么
        1.双向数据绑定，既可以拿取data的数据，也可以写入数据
        2.v-model本身是一个语法糖，一般用于表单收集
        3.v-model自动绑定表单value值 v-model=""
        v-model原理
        1.使用v-bind绑定数据
        2.使用oninput传递数据 -->
        <!-- vue.js devtools扩展工具 -->
        <div>
            <input type="text" :value="val" @input="func()">
            {{val}}
            <input type="submit" @click="fun1()">
        </div>
        <hr>
        <button @click="myfunc1()">点击</button>
        <h1 v-nums="sum"></h1>
    </div>
</body>
<script src="../vue.js"></script>
<script>
    Vue.config.productionTip = false;
    var vm = new Vue({
        el:"#app",
        data() {
            return {
                val:"我是默认数据",
                sum:10
            }
        },
        // directives局部自定义指令
        directives:{
            "nums":{
                bind(element,binding){
                    console.log(element);
                    console.log(binding);
                    element.innerText = binding.value*10;
                    console.log("-----------------");
                },
                inserted(element,binding){
                    console.log(element);
                    console.log(binding);
                    element.innerText = binding.value*100;
                    console.log("-----------------");
                },
                update(element,binding) {
                    console.log(element);
                    console.log(binding);

                },
            }
        },
        methods: {
            // window.event==e
            // 不同：e定义函数后不要加(),event可加可不加
            // 相同：取到操作元素的所有方法
            func(){
                console.log(11111111111);
                console.log(event);
                console.log(event.target);
                return this.val=event.target.value;
            },
            fun1(){
                // console.log(event);
                console.log(window.event);
            },
            myfunc1(){

            }
        },
    })
</script>
</html>