Day54 Vue的语法***

最新推荐文章于 2024-05-06 13:31:42 发布
最新推荐文章于 2024-05-06 13:31:42 发布
阅读量227 收藏
点赞数
文章标签： vue js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013621398/article/details/110261923
版权

Vue的插值表达式

{{message}}

  • （1）mustache 美[ˈmʌstæʃ] 口上须，八字须;
  • （2）数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值，Mustache 标签将会被替代为对应数据对象上属性的值
  • （3）特点是什么?
    绑定的数据对象上属性发生了改变，插值处的内容都会更新
    每个绑定都只能包含单个表达式
  • （4）案例
{{true ? 'OK':'Not OK'}}
<!-- 这是语句，不是表达式 -->
{{ var a = 1 }} //错误
<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }} //错误

事件1：点击事件 v-on

<body>
		<div id="app">
			{{message}}  
			<button v-on:click="func1('hello')">vue的onclick</button>
		</div>
	</body>
	<script>
		//view model
		var vm = new Vue(
				{
					el:'#app', //让vu掌握指定的视频区域
					data:{
						message:'hello Vue3'
					},  //对应的数据
					methods:{
						func1:function (msg) {//msg='hello'
							alert(msg)
						}
					}

				}
		) //创建了MVVM中的VM对象
	</script>

事件2：键盘事件 v-on

  • （1） $event表示Vue中的事件对象，类似js中的对象一样。
    $event
  • （2）keyCode是什么?
    键盘的编码

	<body>
		<div id="app">
			<input type="text" v-on:keydown="fun($event)">
		</div>
	</body>
	<script>
		//view model
		var vm = new Vue(
				{
					el:'#app', //让vu掌握指定的视频区域
					data:{
						message:'hello Vue3'
					},  //对应的数据
					methods:{
						fun:function (event) {//事件对象包含 event=$event
							alert(event.keyCode)
						}
					}

				}
		) //创建了MVVM中的VM对象
	</script>

事件3：鼠标事件 v-on

  • （1）v-on:mouseover=“函数名()” 表示监听的是鼠标停留事件
  • （2）可以简写@mouseover=”函数名()”
<body>
		<div id="app">
<!--			<div v-on:mouseover="fun($event)" style="height: 200px;width: 200px;background-color: green" >-->

<!--			</div>-->

			<div @mouseover="fun($event)" style="height: 200px;width: 200px;background-color: green" >

			</div>
		</div>
	</body>
	<script>
		//view model
		var vm = new Vue(
				{
					el:'#app', //让vu掌握指定的视频区域
					data:{
						message:'hello Vue3'
					},  //对应的数据
					methods:{
						fun:function (event) {//事件对象包含 event=$event
							alert("进入范围")
						}
					}

				}
		) //创建了MVVM中的VM对象
		
	</script>

Vue中的事件修饰符

  • （1）什么是事件修饰符？
    Vue.js 为 v-on 提供了事件修饰符。
    修饰符是由点开头的指令后缀来表示的。相当于调用事件的方法

  • （2）常见修饰符
    在这里插入图片描述

  • （3）案例
    表单提交
    嵌套点击

  • （4) prevent与stop

  • prevent消灭事件

  • stop 消灭内部标签传给外部标签的事件

<body>
		<div id="app">
			<form @submit.prevent action="#" method="post">
				<input type="text" name="username"><br/>
				<input type="text" name="password"> <br/>
				<input type="submit" value="login"> <br/>
			</form>
			<div>
				<a @click.prevent href="http://www.baidu.com">进入百度页面</a>
			</div>

			<div @click="fun1" style="height: 200px;width: 200px;background-color: green">
				<div @click.stop ="fun2"  style="height: 100px;width: 100px;background-color: red">

				</div>
			</div>
		</div>
	</body>
	<script>
		//view model
		var vm = new Vue(
				{
					el:'#app', //让vu掌握指定的视频区域
					data:{
						message:'hello Vue3'
					} ,//对应的数据
					methods:{
						fun1:function () {
							alert("我是绿的")
						},
						fun2:function () {
							alert("我是红的")
						}
					}
				}
		) //创建了MVVM中的VM对象
		
	</script>

Vue中的按键修饰符

  • （1）什么是按键修饰符
    Vue 允许为 v-on 在监听键盘事件时添加按键修饰符
    相当于对keyCode进行判断，如查是符合条件的按键才执行对应的函数
    在这里插入图片描述

  • （2）案例

<body>
		<div id="app">
			<input type="text" v-on:keyup.enter="fun1($event)">
		</div>
	</body>
	<script>
		//view model
		var vm = new Vue(
				{
					el:'#app', //让vu掌握指定的视频区域
					data:{
						message:'hello Vue3'
					} ,//对应的数据
					methods:{
						fun1:function (event) {
							//if(event.keyCode==13){
								alert("你点了回车")
							//}
						}
					}
				}
		) //创建了MVVM中的VM对象
		
	</script>

读data数据的三个指令

  • （1）v-text 读data中的数据（代码），显示成字符串
  • （2）v-html读data中的数据（代码），如果是代码，则执行代码
  • （2）v-bind读data中的数据赋值给属性
<body>
		<div id="app">
			<div v-text="message"></div>
			<div >{{message}}</div>
			<div v-html="message"></div>
			<font v-bind:color="color1">我爱中国</font>
			<font :color="color2">我爱中国</font>
		</div>
	</body>
	<script>
		//view model
		var vm = new Vue(
				{
					el:'#app', //让vu掌握指定的视频区域
					data:{
						message:'<font color="green"/>HelloWord</font>',
						color1:'green',
						color2:'red'
					} ,//对应的数据
					methods:{

					}
				}
		) //创建了MVVM中的VM对象
	</script>

控制显示的指令两个

  • （1）v-if读data数据，判断是否显示
  • （2）v-show读data数据，判断是否显示
<body>
		<div id="app">
			<div v-if="flag">我是hello</div>
			<div v-show="flag">我是world</div>
		</div>
	</body>
	<script>
		//view model
		var vm = new Vue(
				{
					el:'#app', //让vu掌握指定的视频区域
					data:{
						flag:false
					} ,//对应的数据
					methods:{

					}
				}
		) //创建了MVVM中的VM对象
		
	</script>

循环指令***重点

  • （1）v-for=”(元素) in 数组”
  • （2）v-for=”(value,key) in map集合”
  • （3）v-for=”(元素,index) in list集合”
    读data中的多个元素，循环显示每一个元素
<body>
		<div id="app">
<!--			<option v-for="(元素) in 数组"></option>-->
					<select >
						<option v-for="(name) in arr">{{name}}</option>
					</select>

			<hr/>
		<!--	<li v-for="(值,键)in map集合"></li>-->
			<ul>
				<li v-for="(value,key) in product">{{key}} , {{value}}</li>
			</ul>
			<hr/>
<!--			<tr v-for="(元素，索引 ) in 列表">-->
			<table border="1px" width="100%">
					<tr>
						<td>序号</td>
						<td>名字</td>
						<td>年龄</td>
						<td>地址</td>
					</tr>
					<tr v-for="(user,index ) in userList">
						<td>{{index}}</td>
						<td>{{user.name}}</td>
						<td>{{user.age}}</td>
						<td>{{user.address}}</td>
					</tr>
			</table>
		</div>
	</body>
	<script>
		//view model
		var vm = new Vue(
				{
					el:'#app', //让vu掌握指定的视频区域
					data:{
						arr:['人事部','Java','Python'],
						product:{name:'苹果12',price:1000,address:'bj'},
						userList:[{name:'jack',age:13,address:'bj'},{name:'rose',age:12,address:'bj'},{name:'tony',age:12,address:'bj'}]
					} ,//对应的数据
					methods:{

					}
				}
		) //创建了MVVM中的VM对象
		
	</script>

model指令***重点

  • （1）v-model是一个指令，限制在<input>、<select>、<textarea>、components中使用
<body>
		<div id="app">
			<!--更新-->
			<form action="" method="post">
				username:<input type="text" v-model="user.username" ><br/>
				password:<input type="text" v-model="user.password" ><br/>
				<input type="submit" value="login" ><br/>
			</form>
			<hr/>
			{{user.username}}
			{{user.password}}
		</div>
	</body>
	<script>
		//view model
		var vm = new Vue(
				{
					el:'#app', //让vu掌握指定的视频区域
					data:{
						user:{username:'jack',password:'123456'}
					} ,//对应的数据
					methods:{

					}
				}
		) //创建了MVVM中的VM对象
		
	</script>
翁老师的教学团队
关注
专栏目录
day01-Vue模板语法.zip
01-17
在"day01-Vue模板语法.zip"这个压缩包中，我们可以预见到内容可能涵盖了Vue的基础模板语法教程，这对于初学者或者想要深入理解Vue的开发者来说是非常宝贵的资源。 Vue模板语法是Vue.js的一个核心特性，它允许开发者...
Vue基本指令
Dimuzero的博客
04-28 756
1.v-cloak 解决插值表达式闪烁问题 <style> [v-cloak] { display: none; } </style> v-text，v-html和{{}}的区别： {{}}渲染界面会有闪烁问题，但是v-text，v-html不存在 2 v-text 1.v-text指令的作用：设置标签的内容 2.默认写法会替换全部内容，使用**插值表达式{{}}**可以替换指定内容 3.内部支持写表达式（字符串拼接） 3 v-html 1.v-htm.
Vue基础语法
zhhvera的博客
06-12 431
vue 渐进式JavaScript框架 参考官网和API文档 库+框架（可以灵活使用） 高效 vue的基本使用 基本流程 1.提供标签用户填充数据 2.引入vue.js文件 3.使用vue的语法结构做功能 4.把vue提供的数据填充到标签里面 实例参数分析： **el:**元素的挂载位置（值可以是css选择器或者DOM元素） **data:**模型数据（值是一个对象，可以存放很多个键值对） **methods:**vue中用来定义方法（函数） 调用方法中的函数，需要用this进行访问，在这里this 就是指
vue之数字中间加**的过滤器
qq_41039264的博客
04-26 1873
从后台v-for循环出来的银行卡号码、手机号、ID号等等数字，用*代替中间的数字，vue是怎么做的呢？ 使用vue的过滤器可以很好的解决这个问题。 1.效果图 1.html部分 2.js部分 由于后台反的是number类型所以我在过滤器里面toString转成了字符串类型，如果是字符串类型就不需要toString直接用就可以啦。 ...
Vue 常用指令v-**
最新发布
u010373106的博客
05-06 148
【代码】Vue 常用指令v-**
Vue**插槽**
qq_45954420的博客
03-07 143
1.作用：让父组件可以向子组件指定位置插入HTML结构，也是一种组件间通信的方式，适用于父组件==>子组件 2，分类：默认插槽、具名插槽、作用域插槽、 3.使用方式： (1).默认插槽： 父组件： <Category> <div>html结构</div> </Category> 子组件： <template> <div> <!-- 定义插槽 -->
day01_Vue01-基础语法3.ppt
01-15
vue 基础知识点
Vue Day7 代码 vuex
08-11
Vue Day7 的学习重点在于了解和使用 Vuex，它是 Vue.js 应用状态管理的一个官方库。Vuex 提供了一个集中式的存储系统，用于管理和共享应用的状态，使得在复杂的应用中保持数据的一致性变得更容易。以下是对每个文件...
Day8 智慧商城 Vue2
08-27
在本课程"Day8 智慧商城 Vue2"中，我们将深入探讨如何使用Vue.js框架构建一个功能完善的智慧商城应用。Vue.js是一款轻量级的前端JavaScript框架，以其易用性、灵活性和高效的更新机制受到开发者们的广泛欢迎。在这个...
Vue Day6面经基础src文件
08-10
10. **模板语法**： - Vue使用基于HTML的模板语法，通过`v-model`实现双向数据绑定，`v-on`处理事件。 11. **单文件组件（Single File Components, SFC）**： - Vue的组件可以写在单个`.vue`文件中，包含模板、...
/** 内容 */、vue文件头部注释
weixin_39418338的博客
08-26 1625
1、/** 内容 */ 一直想知道这注释怎么做到的，今天查阅资料，原来是这么回事 在没有输入注释内容的情况下，输入/** 会自动 /** */中间输入注释的内容，换行会自动在前面带星 /** *open:true浏览器是否自动打开，不写默认false，true自动打开 */ 2、vscode在插件中查询插件koroFileHeader安装 (1)文件-》首选项-》设置 搜索fileheader (2)、在settings.json配置内容 "filehead...
vue 前几位显示数据，中间用 *** ，后几位显示数据
不想起床
07-31 1975
需求 一行数据太长，但是想要显示起来美观一些，那就前面，后面，显示固定位数。中间用***显示 之前 现在 具体实现代码 利用fliter过滤器 {{item.BlockHash | testfile}} 第一个参数是显示的字段数据参数，第二个是过滤器函数的名字 过滤函数filter,是与mounted，created平级位置 // 数字中间加*号 value是传的参数值(后端返回的，需要你处理的数据) filters: { testfile (value) { const sta
总结之Vue（一）——Vue常用语法
IManiy的博客
03-31 397
public class Node { private final int value; private Node next; public Node(int value){//构造方法，生成是给定初值 this.value=value; this.next=null; } public int getValue() { return value; } public N...
vue手机号中间显示****（脱敏）
m0_60207396的博客
10-19 1379
在table表头 { title: '手机号', align: 'center', dataIndex: 'mobile', customRender: function (t) { t = t.replace(t.substr(3, 4), '****') return t }, },
Vue的的指令及语法
weixin_45893073的博客
12-06 145
**Vue ** 1.概念：Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架 2.指令 （1）v-cloak：防止页面加载时出现闪烁问题 背后的原理：先通过样式隐藏内容，然后在内存中进行值的替换，替换好之后再显示最终的结果 <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css">
Vue.js 学习(9) -- 组件*1*
YuqiRealm.com
05-24 392
终于等到组件。组件是Vue最强大的功能之一，它可以提供一层封装，将一些自定义的功能打包，以供开发者在后续的代码中使用。使用组件的基本格式组件可以在全局范围内注册，也可以仅在另一个实例或组件中注册，下面我们先来介绍在全局范围内注册组件：全局组件Vue.component('my-component', { // 选项 }) PS：对于组件的标签名（在上面这个栗子中是my-component），
初识 Vue.js 中的 *.Vue文件
GoodIdea
05-23 5万+
什么是Vue.js？vue.js是一套构建用户界面的渐进式框架，它采用自底向上增量开发的设计。（自底向上设计方法是根据系统功能要求，从具体的器件、逻辑部件或者相似系统开始，凭借设计者熟练的技巧和丰富的经验，通过对其进行相互连接、修改和扩大，构成所要求的系统。）Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和Vue生态系统支持的库结合使用时，V...
vue导入的几种用法import.. from.. import * as import {..} from ..
m0_62131346的博客
05-17 5125
1：import * as API from '@/文件路径' 这种写法是把所有的输出包裹到 API 对象里 2：import … from “…” // A.js export default 20 // B.js import A from './A' 上面的代码生效的前提是，只有在A.js中有默认导出的export default语法时才会生效。 不使用｛｝来引用模块的情况下，import模块的命名是随意的 因为它总是会解析到A.js中默认的export default 3：impor
vue中js里的/* eslint-disable*/及其ESLint的介绍
热门推荐
chelflan's blog
07-25 9万+
团队协作中，为了减少代码错误、节约调试时间、维持团队成员之间代码风格的统一，除了制定编码规范之外，我们往往需要借助工具来进行代码检测，辅助编码规范的实施。 ESLint是个不错的选择，由鼎鼎大名的Nicholas C. Zakas创建，是一个可组装的JavaScript和JSX检查工具。下面我们一起来看看怎么使用它。 一. 安装 npm install eslint 二. 配置 ESLi...
Vue基础教程：Day02 模板语法与v-for的key属性解析
在Day02的Vue基础知识中，主要涉及了几个核心的指令，它们在构建动态内容时非常关键： 1. **v-html** - 这个指令用于将HTML字符串插入到DOM元素内。例如，在示例中，`v-html="htmlTxt"`将`htmlTxt`的数据（包含HTML...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

翁老师的教学团队

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

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

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

打赏作者

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

抵扣说明：

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

余额充值