Vue-03-数据双向绑定/组件

最新推荐文章于 2023-12-15 18:01:01 发布

褚师子书

最新推荐文章于 2023-12-15 18:01:01 发布

阅读量530

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_42045639/article/details/126051779

版权

Vue 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

4.数据双向绑定/组件

4.1 什么是双向数据绑定

Vue.js是一个MVVM框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。这也算是Vue.js的精髓之处了。
值得注意的是，我们所说的数据双向绑定，一定是对于Ul控件来说的，非Ul控件不会涉及到数据双向绑定。单向数据绑定是使用状态管理工具的前提。如果我们使用vue×,那么数据流也是单项的，这时就会和双向数据绑定有冲突。
为什么要实现数据的双向绑定? 在Vue.js中，如果使用vux,实际上数据还是单向的，之所以说是数据双向绑定，这是用的Ul控件来说，对于我们处理表单，Vue.js的双向数据绑定用起来就特别舒服了。即两者并不互斥，在全局性数据流使用单向，方便跟踪；局部性数据流使用双向，简单易操作。

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

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="static/vue.js"></script>
	</head>
	<body>
		
		<div id="app">
			<input v-model="msg" type="text" id = "msg" name="msg" >
			<p>msg:{{msg}}</p>
			<textarea v-model="msg2"></textarea>
			<p>msg2:{{msg2}}</p>
			<input  type="checkbox" id="java" value="java" v-model="checkvalues"/>
			<label for="java">java</label>
			<input  type="checkbox" id="python" value="python" v-model="checkvalues"/>
			<label for="python">python</label>
			<input  type="checkbox" id="c++" value="c++" v-model="checkvalues"/>
			<label for="c++">c++</label>
			<p>checkvalues:{{checkvalues}}</p>
			<input type="radio" value="one" v-model="pick"/>
			<label for="one">one</label>
			<input type="radio" value="two" v-model="pick"/>
			<label for="two">two</label>
			<p>pick:{{pick}}</p>
			<select v-model="opt">
				<option value="" disabled>请选择</option>
				<option>A</option>
				<option>B</option>
				<option>C</option>
			</select>
			<p>opt:{{opt}}</p>
			<button @click="submit">提交</button>
		</div>
		
		<script>

			const vm = new Vue({
				el: '#app',
				data: {
					msg: '123',
					msg2: '',
					checkvalues: [],
					pick: '',
					opt: ''
				},
				methods: {
					submit: function () {
						console.log(this.msg)
						const obj={
							msg: this.msg,
							msg2: this.msg2,
							checkvalues: this.checkvalues
						}
						console.log(obj)
			
					},
					clicknow: function (e){
						console.log(e)
					}
				},
				components: {
					test: {
						props: ['titles'],
						data: function (){
							return{
								count: 0
							}
						},
						template: '<div><button v-on:click="func">{{titles}}count:{{count}}</button><slot></slot></div>',
						methods: {
							func: function () {
								this.count++
								this.$emit('clicknow',this.count)
							}
						}
			
					}
				}
			})
			
		</script>
	</body>
</html>

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

4.2 组件

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

在这里插入图片描述

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

注意：在实际开发中，我们并不会用以下方式开发组件，而是采用vue-ci创建.vue模板文件的方式开发。
使用Vue.component()方法注册组件，格式如下：

先注册组件，后实例化vue

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="static/vue.js"></script>
	</head>
	<body>
		
		<div id="app">
			<button-counts titles="t1==" @clicknow="clicknow">
				<h2>h2--h2</h2>
			</button-counts>
			<button-counts titles="t2=="  @clicknow="clicknow"></button-counts>
			<test titles="t3=="  @clicknow="clicknow"></test>
		</div>
		
		<script>
			Vue.component('button-counts',{
				props: ['titles'],
				data: function (){
					return{
						count: 0
					}
				},
				template: '<div><button v-on:click="func">{{titles}}count:{{count}}</button><slot></slot></div>',
				methods: {
					func: function () {
						this.count++
						this.$emit('clicknow',this.count)
					}
				}
			
			})
			const vm = new Vue({
				el: '#app',
				data: {
					msg: '123',
					msg2: '',
					checkvalues: [],
					pick: '',
					opt: ''
				},
				methods: {
					submit: function () {
						console.log(this.msg)
						const obj={
							msg: this.msg,
							msg2: this.msg2,
							checkvalues: this.checkvalues
						}
						console.log(obj)
			
					},
					clicknow: function (e){
						console.log(e)
					}
				},
				components: {
					test: {
						props: ['titles'],
						data: function (){
							return{
								count: 0
							}
						},
						template: '<div><button v-on:click="func">{{titles}}count:{{count}}</button><slot></slot></div>',
						methods: {
							func: function () {
								this.count++
								this.$emit('clicknow',this.count)
							}
						}
			
					}
				}
			})
			
		</script>
		
	</body>
</html>

Vue.component():注册组件
my-component-li:自定义组件的名字
template:组件的模板

使用props属性传递参数

需要传递参数到组件的，此时就需要使用props属性了！注意：默认规则下props属性里的值不能为大写；

<div id="app">
    <blogpost v-for="item in items" v-bind:item="item">
        {{item.id}}---{{item.title}}
    </blogpost>
</div>	
//局部参数
const vm = new Vue({
				el: '#app',
				data: {
					items: [
						 { id: 1, title: 'My journey with Vue' },
						 { id: 2, title: 'Blogging with Vue' },
						 { id: 3, title: 'Why Vue is so fun' }
					]
				},
				methods: {
					
				},
				components: {
					blogpost: {
						props: ['item'],
						data (){
							return{
			
							}
						},
						template: '<div><p></p><slot></slot></div>'
			
					}
				}
			})

说明：

v-for=“item in items”:遍历Vue实例中定义的名为items的数组，并创建同等数量的组件
v-bind item-=“item”：将遍历的item项绑定到组件中props定义的名为item属性上；=号左边的item为props定义的属性名，右边的为item in items中遍历的item项的值