Vue表单双绑、组件

最新推荐文章于 2023-07-29 19:53:18 发布

The_Beacon

最新推荐文章于 2023-07-29 19:53:18 发布

阅读量353

点赞数

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

本文链接：https://blog.csdn.net/The_Beacon/article/details/108933000

版权

1、什么是双向数据绑定

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

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

在Vue.js中，如果使用vuex，实际上数据还是单向的，之所以说是数据双向绑定，这是用的UI控件来说，对于我们处理表单， Vue.js的双向数据绑定用起来就特别舒服了。即两者并不互斥，在全局性数据流使用单项，方便跟踪；局部性数据流使用双向，简单易操作。

2、在表单中使用双向数据绑定

你可以用v-model指令在表单、及元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但v-model本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
注意：v-model会忽略所有表单元素的value、checked、selected特性的初始值而总是将Vue实例的数据作为数据来源。你应该通过JavaScript在组件的data选项中声明初始值!

2.1、单行文本

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div id="app">
            输入的文本：<input type="text" v-model="message" value="hello">{
  {message}}
        </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:""
                }
            });
        </script>
    </body>
</html>

2.2、多行文本

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

最低0.47元/天解锁文章

The_Beacon

关注

0
点赞
踩
0

收藏

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

1、什么是双向数据绑定Vue.js是一个MV VM框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。这也算是Vue.js的精髓之处了。值得注意的是，我们所说的数据双向绑定，一定是对于UI控件来说的，非UI控件不会涉及到数据双向绑定。单向数据绑定是使用状态管理工具的前提。如果我们使用vue x那么数据流也是单项的，这时就会和双向数据绑定有冲突。1.1、为什么要实现数据的双向绑定在Vue.js中，如果使用vuex，实际上数据还是单向
复制链接

扫一扫