表单双向数据绑定、组件

声明

本文为多位博主原创文章整合，仅用作个人学习，特此声明

参考文章链接：

狂神vue笔记（全）__路漫漫其修远的博客-CSDN博客_狂神vue笔记

Vue.js 教程 | 菜鸟教程 (runoob.com)

3、表单双绑、组件

3.1 双向数据绑定

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

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

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

3.2 表单数据双绑

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

下面来看几个例子

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">
	 <br><br>{{message}}
 </div>
 <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
 <script type="text/javascript">
     var vm = new Vue({
         el:"#app",
         data:{
             message:''
         }
     });
 </script>
 </body>
 </html>

2.多行文本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    多行文本：<textarea v-model="pan"></textarea><br><br>
	多行文本内容为：{{pan}}
</div>

<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            pan:"Hello hello!"
        }
    });
</script>
</body>
</html>

3.单复选框

<!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="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            checked:false
        }
    });
</script>
</body>
</html>

4.多复选框

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 </head>
 <body>
 <div id="app">
     多复选框：
     <input type="checkbox" id="jack" value="Jack1" v-model="checkedNames">
     <label for="jack">Jack</label>
	 &nbsp;&nbsp;
     <input type="checkbox" id="john" value="John2" v-model="checkedNames">
     <label for="john">John</label>
	 &nbsp;&nbsp;
     <input type="checkbox" id="mike" value="Mike3" v-model="checkedNames">
     <label for="mike">Mike</label>
	 &nbsp;&nbsp;
	 <br><br>
     <span>选中的值：{{checkedNames}}</span>
 </div>
 <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
 <script type="text/javascript">
     var vm = new Vue({
         el:"#app",
         data:{
             checkedNames:[]
         }
     });
 </script>
 </body>
 </html>

5.单选按钮

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

<div id="app">
    单选框按钮
    <input type="radio" id="one" value="One" v-model="picked">
    <label for="one">One</label>
    <input type="radio" id="two" value="Two" v-model="picked">
    <label for="two">Two</label>
	<br><br>
    <span>选中的值：{{picked}}</span>
</div>

<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            picked:'Two'
        }
    });
</script>
</body>
</html>

6.下拉框

<!DOCTYPE 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>
	<br><br>
    <span>value : {{pan}}</span>
</div>

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

注意：如果v-model表达式的初始值未能匹配任何选项，元素将被渲染为“未选中”状态。 在iOS中， 这会使用户无法选择第一个选项，因为这样的情况下，iOS不会触发change事件。

因此，更推荐像上面这样提供一个值为空的禁用选项。

我们玩一下

1.设置下拉框默认值和v-model初始值不一致

2.设置v-model初始值不匹配下拉框中任一选项

3.3 组件

组件（Component）是 Vue.js 最强大的功能之一。

组件可以扩展 HTML 元素，封装可重用的代码。

组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树

组件是可复用的Vue实例， 说白了就是一组可以重复使用的模板

注册一个全局组件语法格式如下：

Vue.component(tagName, options)

tagName 为组件名，options 为配置选项。注册后，我们可以使用以下方式来调用组件：

<tagName></tagName>

1、全局组件

所有实例都能用全局组件。

注册一个简单的全局组件 component1，并使用它

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 全局组件</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
	<component1></component1>
</div>

<script>
// 注册
Vue.component('component1', {
  template: '<h1>自定义全局组件</h1>'
})
// 创建根实例
new Vue({
  el: '#app'
})
</script>
</body>
</html>

2、局部组件

我们也可以在实例选项中注册局部组件，这样组件只能在这个实例中使用

注册一个简单的局部组件 runoob，并使用它

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 局部组件</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
	<component2></component2>
</div>

<script>
var Child = {
  template: '<h1>自定义局部组件</h1>'
}

// 创建根实例
new Vue({
  el: '#app',
  components: {
    // <component2> 将只在父模板可用
    'component2': Child
  }
})
</script>
</body>
</html>

3、Prop

prop 是子组件用来接受父组件传递过来的数据的一个自定义属性。

父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 "prop"

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - Prop</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
	<child message="父组件参数显示在这里"></child>
</div>

<script>
// 注册
Vue.component('child', {
  // 声明 props
  props: ['message'],
  // 同样也可以在 vm 实例中像 “this.message” 这样使用
  template: '<span>{{ message }}</span>'
})
// 创建根实例
new Vue({
  el: '#app'
})
</script>
</body>
</html>

通过一个实例稍微了解一下动态Prop

类似于用 v-bind 绑定 HTML 特性到一个表达式，也可以用 v-bind 动态绑定 props 的值到父组件的数据中。每当父组件的数据变化时，该变化也会传导给子组件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 动态Prop</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
	<div>
	  <input v-model="parentMsg">
	  <br><br>
	  <child v-bind:message="parentMsg"></child>
	</div>
</div>

<script>
// 注册
Vue.component('child', {
  // 声明 props
  props: ['message'],
  // 同样也可以在 vm 实例中像 “this.message” 这样使用
  template: '<span>{{ message }}</span>'
})
// 创建根实例
new Vue({
  el: '#app',
  data: {
	parentMsg: '父组件内容传递给子组件'
  }
})
</script>
</body>
</html>

4、综合实例

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

<div id="app">
    <!--组件：传递给组件中的值：props-->
    <pan v-for="item in items" v-bind:panh="item"></pan>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
    //定义组件
    Vue.component("pan",{
        props:['panh'],
        template:'<li>{{panh}}</li>'

    });
    var vm = new Vue({
        el:"#app",
        data:{
            items:["java","Linux","前端"]
        }
    });
</script>
</body>
</html>

代码说明：

  • v-for="item in items"：遍历Vue实例中定义的名为items的数组，并创建同等数量的组件

  • v-bind:panh="item"：将遍历的item项绑定到组件中props定义名为panh属性上；= 号左边的panh为props定义的属性名，右边的为item in items 中遍历的item项的值

posted @   无关风月7707  阅读(109)  评论(0)  编辑  收藏  举报
相关博文：
·  基础语法指令
·  我的第一个Vue程序
·  Vue学习笔记之表单绑定
·  Vue：表单双绑、组件
·  Vue双向绑定
阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾（3.3-3.9）
· winform 绘制太阳，地球，月球 运作规律
点击右上角即可分享
微信分享提示
AI IDE Trae