03——Vue 之模板语法v-bind 与 v-model

最新推荐文章于 2024-06-02 11:07:16 发布

活学编程思想

最新推荐文章于 2024-06-02 11:07:16 发布

阅读量533

点赞数

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

本文链接：https://blog.csdn.net/weixin_45080272/article/details/125792842

版权

vue 2.0 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

Vue 之模板语法

前期案例引入
数据绑定
- 单项绑定 v-bind
- 双向绑定 v-model

前期案例引入

引入错误案例：

<!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>模板语法</title>
	<!-- 引入vue -->
	<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
	<!-- 准备好一个容器 -->
	<div id = "root">
		<h1>差值语法</h1>
		<h3>你好，{{name}}</h3>
		<hr/>
		<h1>指令语法</h1>
		<a href={{url}}>点我去尚硅谷学习1</a>
	</div>
	<script type="text/javascript">
		Vue.config.productionTip = false // 设置为 false 以阻止 vue 在启动时生成生产提示。
		new Vue({
			el: '#root',
			data:{
				name:'jack',
				url:'http:www.atguigu.com'
			}
		})
	</script>
</body>
</html>

页面显示
在这里插入图片描述
正确写法

<!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>模板语法</title>
	<!-- 引入vue -->
	<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
	<!-- 准备好一个容器 -->
	<div id = "root">
		<h1>差值语法</h1>
		<h3>你好，{{name}}</h3>
		<hr/>
		<h1>指令语法</h1>
		<a v-bind:href="url">点我去尚硅谷学习1</a>
		<a :href="url">点我去尚硅谷学习2</a>
	</div>
	<script type="text/javascript">
		Vue.config.productionTip = false // 设置为 false 以阻止 vue 在启动时生成生产提示。
		new Vue({
			el: '#root',
			data:{
				name:'jack',
				url:'http:www.atguigu.com'
			}
		})
	</script>
</body>
</html>

v-bind:href bind是绑定的意思，v-bind 是vue里面的指令
vue 里的指令都有一个特点：是v-开头
v-bind:href=‘url’ 这么写之后，引号里面的 url 当做 js 表达式去执行了
将引号里面的表达式的执行结果绑定给 href
v-bind: 可以简写成 : (冒号)

什么时候用差值语法？什么时候用v-bind指令？

差值语法用于指定标签体内容（如 “< h1> 这里面的内容就是标签体内容< /h1>”）
v-bind 指令负责标签属性（如" < a :href=“url”>点我去尚硅谷学习2</ a>"）

总结：
Vue 模板语法有2大类：

差值语法：
功能：用于解析标签体内容
写法：{{xxxx}}，xxxx是 js 表达式，且可以直接读取到data中的所有属性
指令语法：
功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…）
举例：v-bind:href = “xxxx” 或简写为 :href=“xxx”，xxxx 同样要写 js 表达式且可以直接读取到data 中的所有属性
备注：Vue中有很多的指令，且形式都是：v-??? ，此处我们只是拿 v-bind 举个例子

案例三：

<!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>模板语法</title>
	<!-- 引入vue -->
	<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
	<!-- 准备好一个容器 -->
	<div id = "root">
		<h1>差值语法</h1>
		<h3>你好，{{name}}</h3>
		<hr/>
		<h1>指令语法</h1>
		<a v-bind:href="school.url">点我去{{school.name}}学习1</a>
		<a :href="school.url">点我去{{school.name}}学习2</a>
	</div>
	<script type="text/javascript">
		Vue.config.productionTip = false // 设置为 false 以阻止 vue 在启动时生成生产提示。
		new Vue({
			el: '#root',
			data:{
				name:'jack',
				school:{
					name:'尚硅谷',
					url:'http:www.atguigu.com'
				},
				
			}
		})
	</script>
</body>
</html>

数据绑定

单项绑定 v-bind

<!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>数据绑定</title>
	<!-- 引入vue -->
	<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
	<!-- 准备好一个容器 -->
	<div id = "root">
		单项数据绑定：<input type="text" v-bind:value="name"></input>
	</div>
	<script type="text/javascript">
		Vue.config.productionTip = false // 设置为 false 以阻止 vue 在启动时生成生产提示。
		new Vue({
			el: '#root',
			data:{
				name:'尚硅谷'
			}
		})
	</script>
</body>
</html>

页面
在这里插入图片描述
但是在input 框中输入，下面的值不变化，值是存在的，如下

那为什么input 框中的值变化了，vue 实例中的值为什么不变化呢？
是因为 v-bind 是单项绑定

双向绑定 v-model

<!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>数据绑定</title>
	<!-- 引入vue -->
	<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
	<!-- 准备好一个容器 -->
	<div id = "root">
		单项数据绑定：<input type="text" v-bind:value="name"></input><br/>
		双项数据绑定：<input type="text" v-model:value="name"></input>
	</div>
	<script type="text/javascript">
		Vue.config.productionTip = false // 设置为 false 以阻止 vue 在启动时生成生产提示。
		new Vue({
			el: '#root',
			data:{
				name:'尚硅谷'
			}
		})
	</script>
</body>
</html>

在这里插入图片描述

<!-- 如下代码是错误的，因为v-model 只能应用在表单类元素（输入类元素）上 -->
		<h2 v-model:x="name">你好啊</h2>

总结
Vue 中有2种绑定的方式：

单项绑定（v-bind）：数据只能从data 流向页面
双向绑定（v-model）：数据不仅能从data 流向页面，还可以从页面流向 data
备注：
1、双向绑定一般都应用在表单类元素上（如：input select等）
2、v-model:value 可以简写为 v-model 因为v-model 默认收集的就是value值

简写：

双项数据绑定：<input type="text" v-model:value="name"></input>
// 可以简写为：
双项数据绑定：<input type="text" v-model="name"></input>

活学编程思想

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
03——Vue 之模板语法v-bind 与 v-model

v-bindhref=‘url’这么写之后，引号里面的url当做js表达式去执行了。v-bindhrefbind是绑定的意思，v-bind是vue里面的指令。那为什么input框中的值变化了，vue实例中的值为什么不变化呢？但是在input框中输入，下面的值不变化，值是存在的，如下。什么时候用v-bind指令？将引号里面的表达式的执行结果绑定给href。v-bind可以简写成(冒号)vue里的指令都有一个特点是v-开头。是因为v-bind是单项绑定。...
复制链接

扫一扫

专栏目录