VUE L 摸版语法&数据绑定 ②

SYFStrive

已于 2023-06-24 11:28:53 修改

阅读量839

点赞数

分类专栏： VUEJS 文章标签： vue.js javascript ecmascript

于 2023-06-20 22:10:56 首次发布

本文链接：https://blog.csdn.net/m0_61490399/article/details/129951447

版权

VUEJS 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

文章有误请指正，如果觉得对你有用，请点三连一波，蟹蟹支持✨

                    ⡖⠒⠒⠒⠤⢄⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸   ⠀⠀⠀⡼⠀⠀⠀⠀ ⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢶⣲⡴⣗⣲⡦⢤⡏⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣰⠋⠉⠉⠓⠛⠿⢷⣶⣦⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢠⠇⠀⠀⠀⠀⠀⠀⠘⡇⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡞⠀⠀⠀⠀⠀⠀⠀⢰⠇⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⡴⠊⠉⠳⡄⠀⢀⣀⣀⡀⠀⣸⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⢸⠃⠀⠰⠆⣿⡞⠉⠀⠀⠉⠲⡏⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠈⢧⡀⣀⡴⠛⡇⠀⠈⠃⠀⠀⡗⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⣱⠃⡴⠙⠢⠤⣀⠤⡾⠁⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⢀⡇⣇⡼⠁⠀⠀⠀⠀⢰⠃⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⣸⢠⣉⣀⡴⠙⠀⠀⠀⣼⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⡏⠀⠈⠁⠀⠀⠀⠀⢀⡇⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⢸⠃⠀⠀⠀⠀⠀⠀⠀⡼⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⢸⠀⠀⠀⠀⠀⠀⠀⣰⠃⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⣀⠤⠚⣶⡀⢠⠄⡰⠃⣠⣇⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⢀⣠⠔⣋⣷⣠⡞⠀⠉⠙⠛⠋⢩⡀⠈⠳⣄⠀⠀⠀⠀⠀⠀⠀
⠀⡏⢴⠋⠁⠀⣸⠁⠀⠀⠀⠀⠀ ⠀⣹⢦⣶⡛⠳⣄⠀⠀⠀⠀⠀
⠀⠙⣌⠳⣄⠀⡇   不能   ⡏⠀⠀  ⠈⠳⡌⣦⠀⠀⠀⠀
⠀⠀⠈⢳⣈⣻⡇   白嫖 ⢰⣇⣀⡠⠴⢊⡡⠋⠀⠀⠀⠀
⠀⠀⠀⠀⠳⢿⡇⠀⠀⠀⠀⠀⠀⢸⣻⣶⡶⠊⠁⠀⠀
⠀⠀⠀⠀⠀⢠⠟⠙⠓⠒⠒⠒⠒⢾⡛⠋⠁⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⣠⠏⠀⣸⠏⠉⠉⠳⣄⠀⠙⢆⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⡰⠃⠀⡴⠃⠀⠀⠀⠀⠈⢦⡀⠈⠳⡄⠀⠀⠀⠀⠀⠀⠀
⠀⠀⣸⠳⣤⠎⠀⠀⠀⠀⠀⠀⠀⠀⠙⢄⡤⢯⡀⠀⠀⠀⠀⠀⠀
⠀⠐⡇⠸⡅⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠹⡆⢳⠀⠀⠀⠀⠀⠀
⠀⠀⠹⡄⠹⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣇⠸⡆⠀⠀⠀⠀⠀
⠀⠀⠀⠹⡄⢳⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢹⡀⣧⠀⠀⠀⠀⠀
⠀⠀⠀⠀⢹⡤⠳⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣷⠚⣆⠀⠀⠀⠀
⠀⠀⠀⡠⠊⠉⠉⢹⡀⠀⠀⠀⠀⠀⠀⠀⠀⢸⡎⠉⠀⠙⢦⡀⠀
⠀⠀⠾⠤⠤⠶⠒⠊⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⠙⠒⠲⠤⠽

提示：以下是本篇文章正文内容

$V u e j s$

简介： Vue 是一套用于构建用户界面的 渐进式 框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

官方

中文： https://cn.vuejs.org/
英文： https://vuejs.org/
Vue2API : https://v2.cn.vuejs.org/
Vue2 相关包： https://github.com/vuejs/awesome-vue
Vue2 入门安装官方：https://v2.cn.vuejs.org/v2/guide/installation.html
Vue 相关插件： https://awesomejs.dev/for/vue/

模板语法

模板的理解
1. 插值语法（双大括号表达式）
2. 指令（以v-开头的标签属性）

代码演示 🎊

	<!-- 
			Vue模板语法有2大类：
					1.插值语法：
							功能：用于解析标签体内容
							写法：{{xxx}},xxx会作为表达式去解析，且可以自动读取到data中的属性
					2.指令语法：
							功能：用于解析标签（包括：标签属性、标签体内容、绑定事件.....）
							举例：v-bind:href="xxxxx" 或  简写为 :
							备注：Vue中有很多的指令
	-->

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8" />
	<title>模板语法</title>
	<script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
	<div id="root">
		<h2>插值语法</h2>
		<h4>你好，{{msg}}</h4>
		<hr />
		<h2>指令语法</h2>
		<a v-bind:href="url">点我去百度1</a><br />
		<a :href="url">点我去百度2</a>
	</div>

	<script type="text/javascript">
		new Vue({
			el: '#root',
			data: {
				msg: 'AI',
				url: 'http://www.baidu.com'
			}
		})
	</script>
</body>

</html>

数据绑定

单向数据绑定
1. 语法：v-bind:href =“xxx” 或简写为 :href
2. 特点：数据只能从data流向页面
  –
双向数据绑定
1. 语法：v-mode:value=“xxx” 或简写为 v-model=“xxx”
2. 特点：数据不仅能从data流向页面，还能从页面流向data

代码演示 🎊

	<!-- 
			1.单向数据绑定(v-bind)：数据只能从data流向页面
			2.双向数据绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data
			备注：
					1.双向数据绑定一般都是针对表单类元素
					2.v-model:value 可以简写为 v-model，因为v-model默认收集value值。
	-->

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8" />
	<title>数据绑定</title>
	<script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
	<!-- 准备好一个容器-->
	<div id="root">
		单向数据绑定（v-bind）: <input type="text" v-bind:value="msg"> <br /><br />
		双向数据绑定（v-model）: <input type="text" v-model="msg">
	</div>

	<script type="text/javascript">
		new Vue({
			el: '#root',
			data: {
				msg: 'OpenAI'
			}
		})
	</script>
</body>

</html>