VUE (一) 基本语法

最新推荐文章于 2023-11-27 12:37:35 发布
最新推荐文章于 2023-11-27 12:37:35 发布
阅读量416 收藏 1
点赞数
分类专栏： Vue 文章标签： vue.js javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42262081/article/details/120361738
版权

简介

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

1、安装vue

方式一：直接使用script标签引入

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

方式二： npm安装
在用 Vue 构建大型应用时，推荐使用 NPM 安装

npm install vue

2、vue 指令和插值

1.{{ value}｝:插值表达式，绑定数据，语法如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>			
	</head>
	<body>
		<div id="work">
			<ul>
				<li>姓名: {{name}}</li>
				<li>年龄: {{age}}</li>
			</ul>
		</div>
		<script type="text/javascript">
		
			// 创建vue实例
			var vm = new Vue({
				// el：指定vue实例所绑定的根节点
				el: '#work', 
				//data：定义vue实例中的数据（页面上显示的数据）
				data: {
					name:'test',
					age:18
				}				
			})			
		</script>		
	</body>
</html>

2.v-text：填充纯文本内容，类似于js中的innerText

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>			
	</head>
	<body>
		<div id="work">
			<h1 v-text="name"></h1>
		</div>
		
		<script type="text/javascript">		
			var vm = new Vue({
				el: '#work',
				data: {
					name:'test',
					age:18
				}				
			})			
		</script>		
	</body>
</html>

在这里插入图片描述
3.v-html：填充html，类似于js中的innerHTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>			
	</head>
	<body>
		<div id="work">
			<h1 v-html="info"></h1>
		</div>
		<script type="text/javascript">
		
			var vm = new Vue({
				el: '#work',
				data: {
					name:'test',
					age:18,
					info:'<h1>test</h1>'
				}				
			})			
		</script>		
	</body>
</html>

在这里插入图片描述
4.v-pre：显示原始数据，不会解析为插值表达式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>			
	</head>
	<body>
		<div id="work">
			<ul>
				<li v-pre>姓名：{{name}}</li>
				<li v-pre>年龄: {{age}}</li>
			</ul>
			
		</div>
		<script type="text/javascript">
		
			var vm = new Vue({
				el: '#work',
				data: {
					name:'test',
					age:18,
					info:'<h1>test</h1>'
				}				
			})			
		</script>		
	</body>
</html>

在这里插入图片描述

3、属性绑定

属性绑定：使用v-bind:属性 也可以简写为 :属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>			
	</head>
	<body>
		<div id="work">
			<a v-bind:href="url1.url">{{url1.title}}</a>
			<a :href="url2.url">{{url2.title}}</a> // 简写为：
		</div>
		<script type="text/javascript">
		
			var vm = new Vue({
				el: '#work',
				data: {
					url1:{
						url:'www.baidu.com',
						title:'百度'
					},
					url2:{
						url:'www.taobao.com',
						title:'淘宝'
					}
				}				
			})			
		</script>	
	</body>
</html>

在这里插入图片描述

4、事件绑定

v-on:为元素绑定一个事件，绑定点击事件。
v-on:click = ‘指定执行的方法’，可简写为@click

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="work">
			<button type="button" v-on:click="test()">弹窗</button>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: '#work',
				data: {
					name: 'test'
				},
				<!-- 方法定义在methods{}中 -->
				methods:{
					test() {
						alert('666')
					}
				} 
			})
		</script>
	</body>
</html>

在这里插入图片描述

5、vue的双向数据绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="work">
			<input type="text" :value="nu1"><br>
			<input type="text" :value="nu2"><br>
			<button type="button" @click="add()">相加</button>
			<h3>结果：{{res}}</h3>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: '#work',
				data: {
					nu1:11,
					nu2:22,
					res:null
				},
				methods:{
					add(){
						this.res = this.nu1+this.nu2
					}
				} 
			})
		</script>
	</body>
</html>

当修改页面中的元素时，vue实例中的data数据不会修改，这时数据为单向形式：在这里插入图片描述
v-model：页面修改数据会变，数据改变，页面也会改，如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="work">
			<input type="text" v-model="nu1"><br>
			<input type="text" v-model="nu2"><br>
			<button type="button" @click="add()">相加</button>
			<h3>结果：{{res}}</h3>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: '#work',
				data: {
					nu1:11,
					nu2:22,
					res:null
				},
				methods:{
					add(){
						this.res = this.nu1+this.nu2
					}
				} 
			})
		</script>
	</body>
</html>

而此时input输入框，输入后默认为字符串的格式：
在这里插入图片描述
需要用到修饰符来解决，vue官方文档描述如下：
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="work">
			<input type="text" v-model.number="nu1"><br>
			<input type="text" v-model.number="nu2"><br>
			<button type="button" @click="add()">相加</button>
			<h3>结果：{{res}}</h3>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: '#work',
				data: {
					nu1:11,
					nu2:22,
					res:null
				},
				methods:{
					add(){
						this.res = this.nu1+this.nu2
					}
				} 
			})
		</script>
	</body>
</html>

在这里插入图片描述
v-model.lazy与v-model.trim就不一一列举了，也可以通过类似链式调用的方式组合使用：

v-model.lazy.number.trim

6、分支语句

v-if：判断条件成立时显示，
举例：当li数组中的第一个元素为11时,，li显示为蓝色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="work">
			<h3 v-if="li[0]==11" style="color: #0000FF;">{{li}}</h3>
		</div>
		
		<script type="text/javascript">
			var vm = new Vue({
				el: '#work',
				data: {
					li:[11,22,33,44]
				} 
			})
		</script>
	</body>
</html>

在这里插入图片描述

v-else-if：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="work">
			<h3 v-if="li[0]==22" style="color: #0000FF;">{{li}}</h3>
			<h3 v-else-if="li[0]==11" style="color: #ff0000;">{{li}}</h3>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: '#work',
				data: {
					li:[11,22,33,44]
				} 
			})
		</script>
	</body>
</html>

在这里插入图片描述
v-else:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="work">
			<h3 v-if="li[0]==22" style="color: #0000FF;">{{li}}</h3>
			<h3 v-else-if="li[0]==33" style="color: #ff0000;">{{li}}</h3>
			<h3 v-else>不符合条件</h3>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: '#work',
				data: {
					li:[11,22,33,44]
				} 
			})
		</script>
	</body>
</html>

在这里插入图片描述

7、遍历语句

v-for：遍历数组
举例：遍历三次后会生成三个包含内容的div标签，item为遍历后的值

<!DOCTYPE html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="work">
			<div v-for="item in info">{{item}}</div>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: '#work',
				data: {
					info: [{
							name: 'test',
							age: 11
						},
						{
							name: 'test01',
							age: 12
						},
						{
							name: 'test02',
							age: 11
						},
					]
				}
			})
		</script>
	</body>
</html>

在这里插入图片描述
v-for集合v-if一起使用：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="work">
			<div v-for="item in info">
				<h3 v-if="item.age==11" style="color: red;">{{item}}</h3>
				<h3 v-else-if="item.age==12" style="color: blue;">{{item}}</h3>
				<h3 v-else style="color: green;">{{item}}</h3>
			</div>
			
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: '#work',
				data: {
					info: [{
							name: 'test',
							age: 11
						},
						{
							name: 'test01',
							age: 12
						},
						{
							name: 'test02',
							age: 13
						},
					]
				}
			})
		</script>
	</body>
</html>

在这里插入图片描述
遍历对象：

v-for="value,keyin array"

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="work">
			<div v-for="value,key in info">键：{{key}}，值：{{value}}</div>
			
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: '#work',
				data: {
						info:{name:'test',age:18}
				}
			})
		</script>
	</body>
</html>

在这里插入图片描述

久醉绕心弦，
关注
专栏目录
(某马培训)Vue-基础语法.ppt
07-23
Vue-基础语法Vue-基础语法Vue-基础语法Vue-基础语法Vue-基础语法Vue-基础语法Vue-基础语法Vue-基础语法Vue-基础语法Vue-基础语法Vue-基础语法Vue-基础语法Vue-基础语法Vue-基础语法Vue-基础语法Vue-基础语法Vue-基础...
Vue 基础语法 实例演示 示例代码
最新发布
07-17
Vue 基础语法 实例演示 示例代码Vue 基础语法 实例演示 示例代码Vue 基础语法 实例演示 示例代码Vue 基础语法 实例演示 示例代码Vue 基础语法 实例演示 示例代码Vue 基础语法 实例演示 示例代码Vue 基础语法 实例...
Vue中:value的易错
weixin_45586870的博客
02-10 5863
今天写项目才发现自己还没完全掌握好理解这个:value，很容易混淆，于是自己捋一捋： 下面有4种情况： ①value=“abc” 这样写是直接让value等于abc，其实与③的写法表达的意思一样 ⭐下面是有：冒号的情况，有冒号：的都是动态绑定 ② :value=“abc” 这样写是让value绑定变量abc，这个变量要写在data里定义，这样可以在data里动态地改变abc的值。 ③ :value=" ‘abc’ " 这样写，是让value绑定字符串abc ④ :value=“true” 这样写，是让val
vue 常用语句
jack_rose_me的博客
08-10 861
1、v-if="file.raw.type.substring(0,5) == 'image'"
Vue常用语法
weixin_30654419的博客
07-20 403
一、模板语法 1、双大括号表达式 【语法：】 {{exp}} 用于向页面输入数据，即页面显示数据。 【举例：】 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" ...
vue.js常用语句记录
无拘7的博客
10-29 507
vue table点击行选中 <el-table @row-click="clickRow" > clickRow(val) { this.$refs.table.toggleRowSelection(val); } // $nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM this.$nextTick(function () { this.trainPeopleTable.forEach
Vue篇—Vue基本语法，一篇文章帮你速通！
我热爱学习，也乐于分享。无论是科技前沿的洞见，还是生活中的小技巧，我都会在这里与你分享。我相信，知识就是力量，而分享则能让这份力量得到更好的传递。
11-27 1077
我们在html中可以使用v-on（简写为@）来监听绑定DOM事件，并在触发时执行对应的JavaScript。至此，你对于Vue的常见的语法已经掌握，后续会继续更新关于前端Vue等技术栈，敬请期待！（2）利用双向绑定机制，控制台修改ok的值为false。（2）利用双向绑定机制，控制台修改type。方法必须定义在Vue的methods对象中。二、if和else-if。（1）正常情况下展示A。
Vue2.5学习笔记（二）深入了解组件
Zijeak的博客
09-08 4251
1.组件使用的细节 1.2 子标签内使用组件 假设想在表格便签内使用一个组件作为行，直接使用组件是不行的，原因在于tbody内只能放tr便签，否则浏览器就会将tbody内的标签解析到外面，从而导致结构的错乱。 为了解决这个问题，我们可以使用is特性，将is特性设置为组件名称，这样既保证了tbody和tr之间的层级关系，也使用了组件。 1.2 非根组件的data必须是一个函数 一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝。 1.3 在Vue中操作DOM：使用ref
一、vue基础语法（轻松入门vue）
01-08
Vue基础语法一、HelloWord二、MVVM设计思想三、指令1. v-cloak2. v-text3. v-html4. v-show4. v-pre5. v-once6. v-model7. v-on事件修饰符按键修饰符自定义按键修饰符8. v-bindclass样式绑定style样式绑定9. v-if、v...
vue基础语法练习源码
12-09
首先，让我们深入了解Vue的基础语法。Vue实例是整个应用的核心，它通过`new Vue()`创建。在HTML文件中，我们通常使用`<script>`标签引入Vue库，并创建实例，将DOM元素与Vue实例绑定。例如： ```html ...
vue3基础语法&示例demo.zip
02-21
这个“vue3基础语法&示例demo.zip”压缩包文件显然是为了帮助学习者掌握Vue3的基础语法和实际应用。下面我们将深入探讨Vue3的核心概念、新特性以及如何通过示例来学习它们。 1. **Composition API**：Vue3引入了...
Vue面试中，经常会被问到的面试题/Vue知识点整理
weixin_34310127的博客
09-10 9137
看看面试题，只是为了查漏补缺，看看自己那些方面还不懂。切记不要以为背了面试题，就万事大吉了，最好是理解背后的原理，这样面试的时候才能侃侃而谈。不然，稍微有水平的面试官一看就能看出，是否有真才实学还是刚好背中了这道面试题。（都是一些基础的vue面试题，大神不用浪费时间往下看） 一、对于MVVM的理解？ MVVM 是 Model-View-V...
vue获取value值
qq_37390420的博客
01-12 3466
methods: { del:function(index,event){ console.log(event.target.attributes.value.value) } }
Vue中给键值对的id动态赋值
qq_36028750的博客
05-06 3355
getRadioVal1(i, id, value){ console.log(i + 1 + "题 id:" + id + " value:" + value); this.radio[i]={ [id] : value }; //此处若直接写id,id将会是字符串，不发生变化 this.allRadio[i] = this.radio[i]; // 将数据...
Vue基础语法
m0_52896752的博客
08-06 572
VUE基础语法
Vue input控件通过value绑定动态属性及修饰符
热门推荐
heartOfblack 离开了电脑，我不希望我还有病
05-02 6万+
对于单选按钮，勾选框及选择列表选项， v-model 绑定的 value 通常是静态字符串（对于勾选框是逻辑值）：<!-- 当选中时，`picked` 为字符串 "a" --> <input type="radio" v-model="picked" value="a"> <!-- `toggle` 为 true 或 false --> <input type="checkbox" v-model=
Vue 循环绑定value
Dr_Tang_的博客
03-01 461
：value=“xxx”，就这样????了 <template v-for="(item,index) in list"> <div class="doctor-li"> <input type="checkbox" v-on:change="check(12)" :id="index" :value="index" v-model="visitplan"> <label :for="index" class="doctor-li-fang" v-bi
vue - vue表单中v-model和:value的区别
qq_43886365的博客
02-17 5766
v-model在渲染的时候不能写表达式； :value在渲染时可以写成表达式的形式，`便于对数据展示的二次转换`；
vue中v-model和:value（即：v-bind:value）
weixin_45153463的博客
02-21 1万+
1、区别 v-mode实现了视图和data中数据的双向绑定，两者其一改变均改变 v-bind:value只是将初始化时data中的数据绑定到input上，修改input中的值并不会改变data中的数据。 2、v-model的本质 v-model其实时一个语法糖，背后本质上是v-bind:value和v-on:input两个操作 父组件将值通过:value传给子组件，当值改变的时候，子组件通过@input通知父组件值发生了改变，形成单向数据流 3、$attrs 和 in
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

久醉绕心弦，

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值