VUE笔记二表单双绑、组件

jenrain

已于 2022-03-27 21:26:31 修改

阅读量1.6k

点赞数

分类专栏： vue 文章标签： vue

于 2021-11-23 21:29:04 首次发布

本文链接：https://blog.csdn.net/qq_49723651/article/details/121502625

版权

vue 专栏收录该内容

18 篇文章 2 订阅

订阅专栏

表单双绑、组件

文章目录

表单双绑、组件
VUE笔记列表

什么是双向数据绑定

Vue.js是一个MV VM框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。这也算是Vue.js的精髓之处了。
值得注意的是，我们所说的数据双向绑定，一定是对于UI控件来说的非UI控件不会涉及到数据双向绑定。单向数据绑定是使用状态管理工具的前提。如果我们使用Vuex那么数据流也是单项的，这时就会和双向数据绑定有冲突。

为什么要实现数据的双向绑定

用户在视图上的修改会自动同步到数据模型中去，同样的，如果数据模型中的值发生了变化，也会立刻同步到视图中去。

双向数据绑定的优点是无需进行和单向数据绑定的那些CRUD操作。

双向数据绑定最经常的应用场景就是表单了，这样当用户在前端页面完成输入后，不用任何操作，我们就已经拿到了用户的数据存放到数据模型中了。

v-model

v-model
表单输入绑定

我们可以使用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。
下面来看代码：

单行文本：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div class="app">
        <input type="text" v-model="message" value="hello">
        <p>Message is {{message}}</p>
    </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:{
            message:""
        }
    });
    console.log(vm._data);
</script>
</body>
</html>

多行文本：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
   <textarea v-model="pan"></textarea> <br> 多行文本是：{{pan}}
</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:{
            "pan":"Hello hello!",
        }
    });
</script>
</body>
</html>

单复选框：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    单复选框：
    <input type="checkbox" id="checkbox" v-model="checked">
    &nbsp;&nbsp;
    <label for="checkbox">{{checked}}</label>
</div>

<script src="../js/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            checked:false
        }
    });
</script>
</body>
</html>

多复选框：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    单复选框：
    <input type="checkbox" v-model="checked"> <br>
    <label>{{checked}}</label>
</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:{
            checked:false
        }
    });
</script>
</body>
</html>

单选按钮：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    单选框按钮: <br>
    <label for="one">One</label>
    <input type="radio" name="number" value="One" v-model="picked"> <br>
    
    <label for="two">Two</label>
    <input type="radio" name="number" value="Two" v-model="picked"> <br>
    <span>选中的值：{{picked}}</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:{
            picked:"One"
        }
    });
</script>
</body>
</html>

下拉框：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">

    下拉框:
    <select v-model="pan" style="margin-right: 20px;">
        <option value="" disabled>---请选择---</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
        <option>D</option>
    </select>
    <span>value:{{pan}}</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:{
            pan:"A"
        }
    });
</script>
</body>
</html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
<!--    性别：
    <input type="radio" name="sex" value="男" v-model="pan">男
    <input type="radio" name="sex" value="女" v-model="pan">女
    <p>选中了：{{pan}}</p>-->

    下拉框:
    <select v-model="pan">
        <option value="" disabled>---请选择---</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
        <option>D</option>
    </select>
    <span>value:{{pan}}</span>



</div>

<script src="../js/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            pan:"A"
        }
    });
</script>
</body>
</html>

注意：
v-model表达式的初始值未能匹配任何选项，下拉框将被渲染为“未选中”状态。在iOS中，这会使用户无法选择第一个选项，因为这样的情况下，iOS不会触发change事件。因此，更推荐像上面这样提供一个值为空的禁用选项。

Vue组件

组件基础

组件是可复用的Vue实例，说白了就是一组可以重复使用的模板，跟JSTL的自定义标签、Thymeleal的th:fragment等框架有着异曲同工之妙，通常一个应用会以一棵嵌套的组件树的形式来组织：

在这里插入图片描述

例如，你可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件。

第一个Vue组件

注意：在实际开发中，我们并不会用以下方式开发组件，而是采用vue-cli创建，vue模板文件的方式开发，以下方法只是为了让大家理解什么是组件。

使用Vue.component()方法注册组件，格式如下：

<!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>Component</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
</head>
<body>
    <div class="app">
        <comp></comp>
        <comp></comp>
    </div>
</body>
<script>
    Vue.component("comp", {
        template: '<input type="text" style="width: 500px; height: 100px; margin-top: 20px;">'
    });
    var vm = new Vue({
        el: ".app",

    });
</script>
</html>

说明：

Vue.component()：注册组件
comp：自定义组件的名字
template：组件的模板

使用props属性传递组件

像上面那样用组件没有任何意义，所以我们是需要传递参数到组件的，此时就需要使用props属性了！

注意：默认规则下props属性里的值不能为大写；

<!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>propos</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
</head>
<body>
    <div class="app">
        <comp v-for="item in arr" :elems="item"></comp>
    </div>
</body>
<script>
    Vue.component("comp", {
        props:['elems'],
        template: "<li>{{elems}}</li>",
    });
    var vm = new Vue({
        el:".app",
        data: {
            arr: ["姓名", "年龄", "邮箱"],
        },
    });
</script>
</html>

VUE笔记列表

VUE笔记一基础语法指令
 VUE笔记二表单双绑、组件
 VUE笔记三 Axios异步通信
 VUE笔记四计算属性、内容分发、自定义事件
 VUE笔记五 vue-cli
VUE笔记六 webpack
VUE笔记七 vue-router
VUE笔记八实战快速上手

参考资料：
https://www.bilibili.com/video/BV18E411a7mC?from=search&seid=11393012814896649855&spm_id_from=333.337.0.0
https://blog.csdn.net/qq_46138160/article/details/111028492

jenrain

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE笔记二表单双绑、组件

表单双绑、组件文章目录表单双绑、组件什么是双向数据绑定为什么要实现数据的双向绑定v-modelVue组件第一个Vue组件使用props属性传递组件VUE笔记列表什么是双向数据绑定Vue.js是一个MV VM框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。这也算是Vue.js的精髓之处了。值得注意的是，我们所说的数据双向绑定，一定是对于UI控件来说的非UI控件不会涉及到数据双向绑定。单向数据绑定是使用状态管理工具的前提。如果我
复制链接

扫一扫