Vue(二)---指令---属性---组件

最新推荐文章于 2024-07-12 15:14:43 发布
最新推荐文章于 2024-07-12 15:14:43 发布
阅读量567 收藏 29
点赞数 27
分类专栏： Vue3 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dys000000/article/details/139618163
版权

一. 指令

补充Vue(一)里面没有写完的属性

1. v-on: 监听 DOM 事件

绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。

格式

  • v-on：事件名字.修饰符

  • :事件名：页面加载完成，直接触发当前事件，只运行一次

  • @事件名：简写

修饰符：(一小部分)

  • left - (2.2.0) 只当点击鼠标左键时触发

  • right - (2.2.0) 只当点击鼠标右键时触发

  • once - 只触发一次回调。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 引入vue -->
		<script src="js/vue.global.js"></script>
	</head>
	<body>
		<div id="app">
			<button @click="add()">按钮</button>
			<button @click.once="yici()">一次</button>
			<button @click.left="left()">左键</button>
			<button @click.right="right()">右键</button>
		</div>
		<script>
			// 创建vue实例
			const  app = Vue.createApp({
				
				methods:{ //methods是一个属性用来声明函数(方法) 函数在声明的时候一般只使用第一种
					// 函数的声明 一
					add(){
						alert("这是一个按钮")
					},
					yici(){
						alert("不管点几次只出现一次");
					},
					left(){
						alert("左键出现");
					},
					right(){
						alert("右键出现");
					}
				}
			});
			// 将vue实例挂载到div id=app 上面
			// 如果不挂载 试图不会显示
			// app.mount("#app");
			const vm = app.mount("#app")
		</script>
	</body>
</html>

2. v-on   img: 点击切换图片

使用v-on监听事件完成图片轮播操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 引入vue -->
		<script src="js/vue.global.js"></script>
	</head>
	<body>
		<div id="app">
			<img :src="imgs[index]" width="300px" height="300px"/>
			<button @click="myimg()">切换</button>
		</div>
		<script>
			// 创建vue实例
			const  app = Vue.createApp({
				data() {
					return{
						imgs: ["img/1.png","img/2.png","img/3.png"],
						index:0,
					}
					
				},
				methods:{ 
					myimg(){
						/**
						 * 点击切换按钮的时候进行判断 如果 index 大于图片大于等于图片张数则赋值为0 
						 * 重新从第一种图片开始
						 */ 
						if(this.index>=this.imgs.length-1){
							this.index=0;
						}else{
							// 如果index的值不大于等于所拥有的图片 则加一 播放下一张
							this.index++;
						}
					}
					
				}
			});
			// 将vue实例挂载到div id=app 上面
			// 如果不挂载 试图不会显示
			// app.mount("#app");
			const vm = app.mount("#app")
		</script>
	</body>
</html>

3. 样式绑定

 绑定多个.class样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 引入vue -->
		<script src="js/vue.global.js"></script>
		<style>
			.myclass1{
				color: aqua;
			}
			.myclass2{
				background-color: black;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div :class="[aaa,bbb]">只是一个测试</div>
		</div>
		<script>
			// 创建vue实例
			const  app = Vue.createApp({
				data() {
					return{
						aaa:'myclass1',
						bbb:'myclass2'
					}
				}
			});
			// 将vue实例挂载到div id=app 上面
			// 如果不挂载 试图不会显示
			// app.mount("#app");
			const vm = app.mount("#app")
		</script>
	</body>
</html>

4. v-moduel 表单绑定 

在前端处理表单时，我们常常需要将表单输入框的内容同步给 JavaScript 中相应的变量。手动连接值绑定和更改事件监听器可能会很麻烦。v-model 指令在表单 、 及 `` 等元素上创建双向数据绑定。

v-model 会根据控件类型自动选取正确的方法来更新元素。

v-model 会忽略所有表单元素的 value、checked、selected 属性的初始值，使用的是 data 选项中声明初始值。

v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：

  • text 和 textarea 元素使用 value 属性和 input 事件；

  • checkbox 和 radio 使用 checked 属性和 change 事件；

  • select 字段将 value 作为属性并将 change 作为事件。

<!DOCTYPE html>
<html>
	<!-- 双向绑定 -->
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!--  引入vue -->
		<script src="js/vue.global.js"></script>
	</head>
	<body>
		<div id="app">
		<input v-model="msg" placeholder="编辑我……"><br>
		{{msg}}<br><br><br>
		
		
		性别:<input type="radio" name="sex" value="男" v-model="sex" >男
		     <input type="radio" name="sex" value="女"  v-model="sex">女<br>
			 选中的性别:{{sex}}<br><br><br>
			 
			 
		兴趣爱好:
		     <input type="checkbox" name="inter" value="吃饭" v-model="inters" >吃饭
		     <input type="checkbox" name="inter" value="睡觉"  v-model="inters">睡觉
			 <input type="checkbox" name="inter" value="钓鱼" v-model="inters" >钓鱼
			 <input type="checkbox" name="inter" value="跳舞" v-model="inters" >跳舞<br>
			 兴趣爱好:{{inters}}<br><br><br>
			 
			 
		 下拉框:
		 <select v-model="xueli">
			 <!--  option没有设置value属性的时候  默认值 是标签中间的值-->
			 <!--  设置值了  设置的是什么就是什么-->
			 <!--  下拉框选中的是value的值-->
			 <option value="0">吃饭</option>
			 <option value="1">睡觉</option>
			 <option value="2">打篮球</option>
		 </select>
		 <br>
		 选中的下拉框的值是:{{xueli}}<br><br><br>
			 
			 
		 多选下拉框:
		 <select v-model="wangzhan" multiple>
				<option value="www.runoob.com">Runoob</option>
				<option value="www.google.com">Google</option>
				<option value="www.taobao.com">Taobao</option>		
		 </select>
		 <br>
		 选中的下拉框的值是:{{wangzhan}}<br><br><br>
		 
		 
		 多行文本框:<br>
		 <textarea v-model="content"></textarea>
		 <br />
		 {{content}}
		</div>
		
		<script>
			//创建vue实例
			const app = Vue.createApp({
				data(){
						
					return{
						msg:"dys",
						sex:"女",
						inters:["吃饭"],
						xueli:"",
						wangzhan:[],
						content:"我是dys"
					}
				}
			});
			
			// 将vue实例挂载到id=app上面
			// 如果不挂载 视图内容不会显示
			app.mount("#app"); 
		</script>
		
	</body>
</html>

二. 属性

1. 计算属性 computed

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.global.js"></script>
	</head>
	<body>
		<div id="app">
			年龄: {{getAge()}}
			性别: {{sex}}
		</div>
		<script>
			const app = Vue.createApp({
				data() {
					return{
						idcard:"410727198802103418"
					}
				},
				methods:{
					getAge(){
						// 当前年份 - 出生的年份  每次运行都需要重新运行
						// 获取到当前年份
						let now = new Date().getFullYear();
						// 截取身份证的年份
 						let birthyear=this.idcard.substr(6,4);
						// 当前年份减去身份证年份 获取到年龄
						let age = now-birthyear;
						alert(age);
						return age;
					}
				},computed:{
					/**
					 * 计算属性
					 * 只要身份证不发生变化 性别就不会重新计算 提高效率
					 */
					sex(){
						let sex = this.idcard.substr(16,1);
						return sex%2==1?"男":"女";
					}
				}
			})
			const vm = app.mount("#app")
		</script>
	</body>
</html>

2. 监听属性 watch

监听属性，用来监听数据的变化，绑定数据变化时的相关操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.global.js"></script>
	</head>
	<body>
		<div id="app">
			千米: <input type="text" v-model="kilometers"/>
			米: <input type="text" v-model="meters"/>
		</div>
		<script>
			const app = Vue.createApp({
				data() {
					return{
						kilometers:"1",
						meters:"1000"
					}
				},
				watch:{
					// 设置 米 跟随 千米 变化而变化
					kilometers(val1,val2){
						this.meters=val1*1000;
					},
					// 设置 千米 跟随 米 变化而变化
					meters(val1,val2){
						this.kilometers=val1/1000;
					}
				}
			})
			const vm = app.mount("#app")
		</script>
	</body>
</html>

 3.区别

  1. 计算属性是用来解决模板语法冗余的, 侦听器是用来侦听data中某一数据的变化(功能不同)

  2. 计算属性有缓存机制, 侦听器没有

  3. 计算属性不支持异步操作, 侦听器支持

  4. 计算属性可以给vue新增属性, 侦听器必须是data中已有的属性

  5. 计算属性只要使用了就会立即执行一次, 侦听器默认只有当数据第一次改变才会执行, 需要设置immediate属性来控制是否立即执行一次

三. Vue组件

1.根组件

一旦写了在 createApp 中传入了 template 则就构成了当前应用的根组件 (告诉 vue 如何去渲染根组件相关页面)

不声明template，默认使用挂载点作为根组

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!--  引入vue -->
		<script src="js/vue.global.js"></script>
	</head>
	<body>
		
		
		
		<div id="app"></div>
		
		<script>
			//创建vue实例
			const app = Vue.createApp({
				// 根组件
				//  createApp 的时候 template 成为根组件   无需调用即可显示到界面中
				template:"<h1>DYS------</h1>"
			});
			
			// 将vue实例挂载到id=app上面
			// 如果不挂载 视图内容不会显示
			app.mount("#app"); 
		</script>
		
	</body>
</html>

2.全局组件

1.注册多个全局组件 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!--  引入vue -->
		<script src="js/vue.global.js"></script>
<!-- 		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> -->
	</head>
	<body>
		
		
		
		<div id="app">
			<my-com></my-com>
			<my-com2></my-com2>
		</div>
		
		<script>
			//创建vue实例
			const app = Vue.createApp({
				
			});
			/**
			 * 注册全局组件
			 * vue对象.component("组件名字",{具体内容})
			 */
			// 第一个全局组件
			app.component("my-com",{
				template:"<h1>DYS~~~~~~</h1>"
			})
			// 第二个全局组件
			app.component("my-com2",{
				template:"<h1>AaAaAaAaA</h1>"
			})
			
			
			// 将vue实例挂载到id=app上面
			// 如果不挂载 视图内容不会显示
			app.mount("#app"); 
		</script>
		
	</body>
</html>

2.组件的复用性 

即同一个组件有点像 api , 它是可以被重复用的, 和小工具一样, 而且互相之间是隔开的, 举个栗子如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!--  引入vue -->
		<script src="js/vue.global.js"></script>
<!-- 		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> -->
	</head>
	<body>
		
		
		
		<div id="app">
            <!-- 组件可重复调用并别之间互不影响< -->
			<my-btn></my-btn>
			<my-btn></my-btn>
			<my-btn></my-btn>
		</div>
		
		<script>
			//创建vue实例
			const app = Vue.createApp({
				
			});
			app.component("my-btn",{
				data(){
					return{
						count:1
					}
				},
				template:'<div @click="count += 1">按钮：{{count}}</div>'
			})
			// 将vue实例挂载到id=app上面
			// 如果不挂载 视图内容不会显示
			app.mount("#app"); 
		</script>
		
	</body>
</html>

缺点

只要通过 app.component ( ) 注册的组件即为全局的, 在任何地方都能用, 很方便. 但同时也会一直挂载在 app 上, 则会占用其资源, 性能也是有很多损耗

3.局部组件 

与全局组件相比是相对的, 要注册后才会挂载, 在实际工作中基本都是局部组件的方式来拆分功能。 从代码来看, 自定义一个局部组件就是一个对象而已。然后通过在父组件中进行注册 (component) 即可使用。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.global.js"></script>
	</head>
	<body>
			<div id="app">
				<my-jubu></my-jubu>
				<my-jubu2></my-jubu2>
			</div>
			
			<script>
				const app = Vue.createApp({
					components:{
						"my-jubu":{
							template:"<h1>DYS</h1>"
						},
						"my-jubu2":{
							template:"<h1>DYS2</h1>"
						}
					}
				})
				
				const vm = app.mount("#app")
			</script>
	</body>
</html>

DYS_00001
关注
  • 27
    点赞
  • 踩
  • 29
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue指令之v-on
俊而不逊的博客
12-07 1万+
Vue指令之v-on 目录 Vue指令之v-on 1.v-on怎么使用？ 2.事件名到底写什么呢？ 3.方法名在哪里定义呢？ 4.v-on的简写 5.访问data中的数据,通过this关键字 6.总结 v-on指令是事件绑定指令，当用户需要点击，按下键盘，滚动鼠标等操作时，想要添加一些自己的逻辑处理时，就可以为特定的元素绑定一些特定的事件。 我们先在被vue实例挂载的标签div中，放入一个按钮为input标签，在标签内部写入v-on指令，冒号(:)后面就是事件名，等号(=)后面就是需..
Vue之v-model
玉案轩窗的博客
07-24 3352
前言 上一篇文章主要了解Vue的数据对象的构建，实际主要是attrs、props和DomProps的比较，而在template形式中有个关键点就是特殊属性的处理，而数据属性中特殊属性的处理实际上就会涉及到v-model语法糖。 本文的目标有两个： v-model语法糖的实现逻辑 涉及特殊属性的v-model的特殊处理 v-model实现逻辑 从简单实例出发，来梳理v-model的处理逻辑： &...
Vue v-model 详解
俊刚的博客
01-16 1912
在Vue.js中，v-model是一个非常重要的指令，它可以实现双向数据绑定，使得数据的改变可以自动反映到视图上，同时用户在视图上的操作也可以自动更新到数据中。它可以用于在表单元素上创建双向数据绑定。通过使用v-model指令，我们可以将表单元素的值与Vue实例中的数据进行关联，从而实现数据的双向同步。本文将详细介绍v-model的使用方法和实现原理，并通过详细的使用示例来帮助读者更好地理解和应用v-model。
vue-property-decorator使用指南
前端博客
04-25 1万+
在Vue中使用TypeScript时，vue-property-decorator非常好用的一个库，使用装饰器来简化书写。 1、安装npm install --save vue-property-decorator @Component (from vue-class-component) @Prop @Model @Watch @Emit @Inject @Provide Mixins (the...
vue组件的v-model
weixin_47450807的博客
02-10 1万+
一、正常使用的v-model 使用对input标签使用v-model，如上图所所示，可以将其拆分成两部分，一个是数据绑定，另一个是监听事件。 二、对组件使用v-model 如图所示，在给组件使用v-model的时候，其实相当于将绑定的值update:model-value通过props传递给组件。并且在该组件上监听一个名为update:model-value，在组件中通过this.$emit触发事件，并且可以将要修改的值，传递过去。 也可以将其写成如下所示 如上图所示，当我们在home组件中使用v-
vue中v-model使用方法
irose的博客
05-15 4129
1.v-model在input的下拉框、单选按钮、复选框中的应用 这里有一个值绑定的问题，不管是下拉框或者单选按钮还是复选框，我们都可以在对应的标签内设置value。以下拉框为例，我们在中添加了vulue=“A被选”，当我们选择第一个下拉框A的时候，在selected中的字符串为‘A被选’，如果我们不在中设置value值的话那么selected中的字符串将是中的值‘A’。单选、复选框同理。 下拉框： <!--下拉框--> <div id="app"> <select v-m
实现vue自定义指令v-loading
weixin_44775548的博客
09-09 2861
1. 创建文件 在 loading文件夹下创建3个文件，index.js、loading.vue 和 loading.js index.js文件用来暴露安装插件接口，这个下面会有说明。有了 Vue.directive这个方法就可以在页面中使用自定义指令 v-loading了 // plugins/loading/index.js import loading from './loading' ex...
Vue之v-model解析
玉案轩窗的博客
11-26 2810
前言 今天介绍Vue.js中一种常用的指令：v-model，以及v-model指令特性带来的一些使用。 具体分析 依旧是以简单实例为引去分析Vue.js中针对v-model的处理，具体实例： &lt;input v-model="text" /&gt; &lt;script&gt; new Vue({ data: { text: '测试v-model...
vue中v-charts的使用
热门推荐
weixin_39568103的博客
05-30 4万+
官方文档：https://v-charts.js.org/#/在使用 echarts 生成图表时，经常需要做繁琐的数据类型转化、修改复杂的配置项，v-charts 的出现正是为了解决这个痛点。基于 Vue2.0 和 echarts 封装的 v-charts 图表组件，只需要统一提供一种对前后端都友好的数据格式设置简单的配置项，便可轻松生成常见的图表。1：在初次安装的时候，用的是官方推荐npm i ...
Vue-学习笔记-06 v-if详解
欢迎访问我的主页：https://www.bookbook.cc
07-25 2万+
文章目录一、Vue中的v-if 和 v-show1.1 v-if 决定是否渲染 基本使用：1.2 v-show 决定是否显示1.3 v-if 和 v-show的区别1.4 v-if 根据成绩返回评价二、小案例 点击切换登录的类型 一、Vue中的v-if 和 v-show v-if、v-else-if、v-else 这三个指令与JavaScript的条件语句if、else、else if类似。 Vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件 v-if的原理： v-if后面的条件为fals
vue+element-ui使用
01-06
在实际项目中，你需要根据具体的业务需求选择和组合不同的 Element UI 组件，同时利用 Vue 的特性（如计算属性、侦听器、生命周期钩子等）来处理交互逻辑。记住，文档是你的朋友，遇到问题时，查阅官方文档通常能...
petite-vue-main.zip
07-16
【标题】"petite-vue-main.zip" 是一个包含 Petite Vue 框架的示例项目的压缩包。Petite Vue 是Vue.js的一个轻量级版本，专为简单的SPA（单页应用）或作为Vue 3的渐进式引入设计。这个压缩包提供了实践和了解Petite ...
vueDemo-master1.zip
04-21
- **事件处理**: 结合Vue的事件系统，利用`@click`等指令与Element-UI组件交互，实现业务逻辑。 - **属性配置**: 根据需求，通过属性设置调整Element-UI组件的行为和样式。 - **优化性能**: 使用`v-if`和`v-show`...
vue-devtools
06-13
Vue.js框架的核心特性包括虚拟DOM、响应式数据绑定、指令系统、组件系统等，而Vue DevTools则提供了与这些特性对应的可视化工具，如： 1. **组件树**：展示应用中的所有组件层次结构，点击各个组件可以查看其属性、...
vue实战--用户管理系统
08-02
在这个过程中，我们将接触到Vue的数据绑定、指令、计算属性、事件处理等核心概念。数据绑定（v-model）用于实时同步组件和数据，使得视图与模型保持一致。指令（如v-if、v-for）用于控制元素的显示和循环遍历数据。...
vue 切换主题色切换主题色切换主题色切换主题色切换主题色
口袋的天空的博客
07-09 1185
vue切换主题
vue解决页面放大图片模糊的问题
最新发布
m0_56104994的博客
07-12 185
解决页面放大，图片模糊的问题
【vueUse库Reactivity模块各函数简介及使用方法--下篇】
xiejunlan的博客
07-11 1347
vueUseReactivity函数构想中的refWithControl函数可能的实现方式总结2. syncRef构想中的syncRef函数可能的实现方式注意事项总结3.syncRefs构想中的syncRefs函数可能的实现方式注意事项总结假想的toReactive函数注意事项假设的toReactive函数实现结论5.toReftoRef函数介绍使用方法示例代码总结6.toRefstoRefs函数介绍使用方法示例代码总结7.toValue使用 Vue 3 自身的 API示例使用 vueUse 的类似功能。
vue实现预览编辑ppt、word、pdf、excel、等功能的解决方案（内网-前端）
m0_68271787的博客
07-10 743
在Vue中实现预览和编辑PPT、Word、PDF、Excel等文件的功能，尤其是在内网环境下且主要侧重于前端，我们需要明确的是，直接在前端编辑这些格式的文件（特别是PPT和Word）是非常复杂且通常不推荐的，因为这些格式涉及复杂的布局和格式设置。然而，我们可以实现预览功能，并可能通过一些间接方式支持简单的编辑（如表格数据的修改）。下面我将分别给出预览PPT、Word、PDF、Excel文件的Vue组件示例代码，并简要说明如何可能实现简单的编辑功能。
vue vue-grid-layout 代码
04-25
Vue是一种流行的JavaScript框架，用于构建用户界面。它采用了组件化的开发方式，使得开发者可以将页面拆分成...在`vue-grid-layout`标签内部，我们使用`v-for`指令来遍历`layout`数组，并将每个元素渲染为一个网格项。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值