60.vue2.0学习 —— 语句渲染、指令

已于 2024-02-19 16:04:24 修改
阅读量911 收藏 26
点赞数 19
分类专栏： vue基础学习 从零教你学Web前端 文章标签： 学习 vue.js javascript 前端 前端框架 笔记 经验分享
于 2024-02-19 15:49:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Kylincsg/article/details/136171644
版权

上一篇：vue基础语法

目录

Vue核心

条件渲染

<!-- 
	条件渲染：
		1.v-if
			写法：
                (1).v-if="表达式" 
                (2).v-else-if="表达式"
                (3).v-else="表达式"
            适用于：切换频率较低的场景。
			特点：不展示的DOM元素直接被移除。
    		注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。

		2.v-show
            写法：v-show="表达式"
            适用于：切换频率较高的场景。
            特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉
								
	3.备注：使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。
		 -->
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>当前的n值是:{{n}}</h2>
			<button @click="n++">点我n+1</button>
			<!-- 使用v-show做条件渲染 -->
			<!-- <h2 v-show="false">欢迎来到{{name}}</h2> -->
			<!-- <h2 v-show="1 === 1">欢迎来到{{name}}</h2> -->

			<!-- 使用v-if做条件渲染 -->
			<!-- <h2 v-if="false">欢迎来到{{name}}</h2> -->
			<!-- <h2 v-if="1 === 1">欢迎来到{{name}}</h2> -->

			<!-- v-else和v-else-if -->
			<!-- <div v-if="n === 1">Angular</div>
			<div v-else-if="n === 2">React</div>
			<div v-else-if="n === 3">Vue</div>
			<div v-else>哈哈</div> -->

			<!-- v-if与template的配合使用 -->
			<template v-if="n === 1">
				<h2>你好</h2>
				<h2>尚硅谷</h2>
				<h2>北京</h2>
			</template>

		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false

		const vm = new Vue({
			el:'#root',
			data:{
				name:'尚硅谷',
				n:0
			}
		})
	</script>

列表渲染

<!-- 
v-for指令:
	1.用于展示列表数据
	2.语法：v-for="(item, index) in xxx":key="yyy"
	3.可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）
-->
<!-- 准备好一个容器-->
	<div id="root">
<!-- 遍历数组 -->
	<h2>人员列表（遍历数组）</h2>
	<ul>
		<li v-for="(p,index) of persons" :key="index">
			{{p.name}}-{{p.age}}
				</li>
			</ul>

			<!-- 遍历对象 -->
			<h2>汽车信息（遍历对象）</h2>
			<ul>
				<li v-for="(value,k) of car" :key="k">
					{{k}}-{{value}}
				</li>
			</ul>

			<!-- 遍历字符串 -->
			<h2>测试遍历字符串（用得少）</h2>
			<ul>
				<li v-for="(char,index) of str" :key="index">
					{{char}}-{{index}}
				</li>
			</ul>
			
			<!-- 遍历指定次数 -->
			<h2>测试遍历指定次数（用得少）</h2>
			<ul>
				<li v-for="(number,index) of 5" :key="index">
					{{index}}-{{number}}
				</li>
			</ul>
		</div>

		<script type="text/javascript">
			Vue.config.productionTip = false
			
			new Vue({
				el:'#root',
				data:{
					persons:[
						{id:'001',name:'张三',age:18},
						{id:'002',name:'李四',age:19},
						{id:'003',name:'王五',age:20}
					],
					car:{
						name:'奥迪A8',
						price:'70万',
						color:'黑色'
					},
					str:'hello'
				}
			})
		</script>

收集表单数据

<body>
		<!-- 
			收集表单数据：
					若：<input type="text"/>，则v-model收集的是value值，用户输入的就是value值。
					若：<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值。
					若：<input type="checkbox"/>
							1.没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）
							2.配置input的value属性:
									(1)v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）
									(2)v-model的初始值是数组，那么收集的的就是value组成的数组
					备注：v-model的三个修饰符：
									lazy：失去焦点再收集数据
									number：输入字符串转为有效的数字
									trim：输入首尾空格过滤
		-->
		<!-- 准备好一个容器-->
		<div id="root">
			<form @submit.prevent="demo">
				账号：<input type="text" v-model.trim="userInfo.account"> <br/><br/>
				密码：<input type="password" v-model="userInfo.password"> <br/><br/>
				年龄：<input type="number" v-model.number="userInfo.age"> <br/><br/>
				性别：
				男<input type="radio" name="sex" v-model="userInfo.sex" value="male">
				女<input type="radio" name="sex" v-model="userInfo.sex" value="female"> <br/><br/>
				爱好：
				学习<input type="checkbox" v-model="userInfo.hobby" value="study">
				打游戏<input type="checkbox" v-model="userInfo.hobby" value="game">
				吃饭<input type="checkbox" v-model="userInfo.hobby" value="eat">
				<br/><br/>
				所属校区
				<select v-model="userInfo.city">
					<option value="">请选择校区</option>
					<option value="beijing">北京</option>
					<option value="shanghai">上海</option>
					<option value="shenzhen">深圳</option>
					<option value="wuhan">武汉</option>
				</select>
				<br/><br/>
				其他信息：
				<textarea v-model.lazy="userInfo.other"></textarea> <br/><br/>
				<input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="http://www.atguigu.com">《用户协议》</a>
				<button>提交</button>
			</form>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false

		new Vue({
			el:'#root',
			data:{
				userInfo:{
					account:'',
					password:'',
					age:18,
					sex:'female',
					hobby:[],
					city:'beijing',
					other:'',
					agree:''
				}
			},
			methods: {
				demo(){
					console.log(JSON.stringify(this.userInfo))
				}
			}
		})
	</script>

过滤器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>过滤器</title>
		<script type="text/javascript" src="../js/vue.js"></script>
		<script type="text/javascript" src="../js/dayjs.min.js"></script>
	</head>
	<body>
		<!-- 
			过滤器：
				定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。
				语法：
						1.注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}}
						2.使用过滤器：{{ xxx | 过滤器名}}  或  v-bind:属性 = "xxx | 过滤器名"
				备注：
						1.过滤器也可以接收额外参数、多个过滤器也可以串联
						2.并没有改变原本的数据, 是产生新的对应的数据
		-->
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>显示格式化后的时间</h2>
			<!-- 计算属性实现 -->
			<h3>现在是：{{fmtTime}}</h3>
			<!-- methods实现 -->
			<h3>现在是：{{getFmtTime()}}</h3>
			<!-- 过滤器实现 -->
			<h3>现在是：{{time | timeFormater}}</h3>
			<!-- 过滤器实现（传参） -->
			<h3>现在是：{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h3>
			<h3 :x="msg | mySlice">尚硅谷</h3>
		</div>

		<div id="root2">
			<h2>{{msg | mySlice}}</h2>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false
		//全局过滤器
		Vue.filter('mySlice',function(value){
			return value.slice(0,4)
		})
		
		new Vue({
			el:'#root',
			data:{
				time:1627782043839, //时间戳
				msg:'你好，尚硅谷'
			},
			computed: {
				fmtTime(){
					return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
				}
			},
			methods: {
				getFmtTime(){
					return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
				}
			},
			//局部过滤器
			filters:{
				timeFormater(value,str='YYYY年MM月DD日 HH:mm:ss'){
					// console.log('@',value)
					return dayjs(value).format(str)
				}
			}
		})

		new Vue({
			el:'#root2',
			data:{
				msg:'hello,atguigu!'
			}
		})
	</script>
</html>

内置指令

<!-- 
				我们学过的指令：
						v-bind	: 单向绑定解析表达式, 可简写为 :xxx
						v-model	: 双向数据绑定
						v-for  	: 遍历数组/对象/字符串
						v-on   	: 绑定事件监听, 可简写为@
						v-if 	 	: 条件渲染（动态控制节点是否存存在）
						v-else 	: 条件渲染（动态控制节点是否存存在）
						v-show 	: 条件渲染 (动态控制节点是否展示)
				v-text指令：
						1.作用：向其所在的节点中渲染文本内容。
						2.与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。
				v-html指令：
						1.作用：向指定节点中渲染包含html结构的内容。
						2.与插值语法的区别：
									(1).v-html会替换掉节点中所有的内容，{{xx}}则不会。
									(2).v-html可以识别html结构。
						3.严重注意：v-html有安全性问题！！！！
									(1).在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。
									(2).一定要在可信的内容上使用v-html，永不要用在用户提交的内容上！
				v-cloak指令（没有值）：
						1.本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。
						2.使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。
				
		-->

自定义指令

<body>
    <!-- 
	需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。
	需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。
	自定义指令总结：
		一、定义语法：
			(1).局部指令：
					new Vue({															
						directives:{指令名:配置对象} 或 directives{指令名:回调函数}								})
			(2).全局指令：
					Vue.directive(指令名,配置对象) 或  Vue.directive(指令名,回调函数)

		二、配置对象中常用的3个回调：
			(1).bind：指令与元素成功绑定时调用。
			(2).inserted：指令所在元素被插入页面时调用。
			(3).update：指令所在模板结构被重新解析时调用。

		三、备注：
			1.指令定义时不加v-，但使用时要加v-；
			2.指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名。
		-->
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>{{name}}</h2>
			<h2>当前的n值是：<span v-text="n"></span> </h2>
			<h2>放大10倍后的n值是：<span v-big="n"></span> </h2>
			<button @click="n++">点我n+1</button>
			<hr/>
			<input type="text" v-fbind:value="n">
		</div>
	</body>
	
	<script type="text/javascript">
		Vue.config.productionTip = false

		//定义全局指令
		/* Vue.directive('fbind',{
			//指令与元素成功绑定时（一上来）
			bind(element,binding){
				element.value = binding.value
			},
			//指令所在元素被插入页面时
			inserted(element,binding){
				element.focus()
			},
			//指令所在的模板被重新解析时
			update(element,binding){
				element.value = binding.value
			}
		}) */

		new Vue({
			el:'#root',
			data:{
				name:'尚硅谷',
				n:1
			},
			directives:{
				//big函数何时会被调用？1.指令与元素成功绑定时（一上来）。2.指令所在的模板被重新解析时。
				
				big(element,binding){
					console.log('big',this) //注意此处的this是window
					// console.log('big')
					element.innerText = binding.value * 10
				},
				fbind:{
					//指令与元素成功绑定时（一上来）
					bind(element,binding){
						element.value = binding.value
					},
					//指令所在元素被插入页面时
					inserted(element,binding){
						element.focus()
					},
					//指令所在的模板被重新解析时
					update(element,binding){
						element.value = binding.value
					}
				}
			}
		})
		
	</script>

下一篇：vue的实例生命周期

Kylincsg
关注
  • 19
    点赞
  • 踩
  • 26
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue的学习（2.0）——Vue实例＋模板语法
qq_48741976的博客
06-29 291
所有的 Vue 组件都是 Vue 实例
59.vue2.0学习 —— 基础语法
Kylincsg的博客
02-19 761
Vue核心; 初识vue; 模板语法; 数据绑定; el和data的两种写法; 数据代理; 事件处理; 基本使用; 事件修饰符; 计算属性; 监视属性; 监视属性和计算属性的区别; 绑定样式;
61.vue2.0学习 —— 生命周期
Kylincsg的博客
02-19 328
常用的生命周期钩子
Vue.js 2.0使用指南
JackieDYH的博客
08-10 591
Vue 实例 属性与方法 不要在实例属性或者回调函数中（如vm.$watch('a', newVal => this.myMethod())）使用箭头函数。因为箭头函数绑定父上下文，所以this不会像预想的一样是Vue实例，而是this.myMethod未被定义 实例生命周期 生命周期钩子 var vm = new Vue({ data: { a: 1 }, created: function () { // `this` 指向 vm 实例 ...
编程学习之路：从零到一的成长指南
KsuferNotes
07-22 254
在当今数字化时代，编程技能已经成为许多人职业发展的重要组成部分。不论你是已经在IT业从业多年的老手，还是刚刚起步的编程新手，这篇博客将带你走过编程学习的每一个重要阶段，从而顺利完成从零到一的华丽转变。
学习测试10-3自动化 web自动化
最新发布
qq_44897733的博客
07-22 385
链接: https://pan.baidu.com/s/1QnGEAeP4ASMgdBYbAtSUTg?pwd=8sdd 提取码: 8sdd。性别、生日、出生地、居住地、情感状态、交友目的、血型。复制这段内容后打开百度网盘手机App，操作更方便哦。2、输入用户名，密码，（使用id属性）4、所有信息后的下拉框设置为保密。论坛系统课堂及其课后练习题库。3、基本资料栏位依次输入内容。三、单个注册与连续注册多个。4、实现连续注册10个账号。二、设置用户的真实姓名。
kubernetes学习日志（七）
qq_47037022的博客
07-18 611
本文记录了service管理，ingress管理，Dashboard管理插件，集群鉴权策略，角色与全局角色，赋权与全局角色赋权。
纯前端小游戏，4096小游戏，有音效，Html5，可学习使用
m0_62996549的博客
07-18 484
【代码】纯前端小游戏，4096小游戏，有音效，Html5，可学习使用。
手写简易版Spring IOC容器02【学习】
weixin_44794897的博客
07-19 563
其中applyPropertyValues用于从beanDefinition中读取属性的配置信息然后通过BeanUtil(hutool-all中提供的类)为其赋值@Overridetry {// 创建bean实例Class<?if (null!break;// 设置属性值try {// 从beanDefinition中获取property通过Resource获取文件流。
昇思25天学习打卡营第16天|munger85
MungerVC
07-20 424
MobileNet网络是由Google团队于2017年提出的专注于移动端、嵌入式或IoT设备的轻量级CNN网络，相比于传统的卷积神经网络首先安装依赖下载数据。
2024论文精读：利用大语言模型（GPT）增强上下文学习去做关系抽取任务
YxinMiracle's Studio.
07-20 954
高引论文精度，如何利用大预言模型做关系抽取任务
从0开始的STM32HAL库学习6
hwq_1229_0525的博客
07-21 255
配置红色框图中的各种配置时钟源选择外部时钟 21.预分频器Prescaler，下面填0，不分频2.计数模式，计数模式选择为向上计数3.自动重装寄存器，自动重装计数器填为10，计数到10后清空并出发中断4.滤波器的频率分频：不使用影子寄存器。
javaScrip的学习（一）
weixin_65450681的博客
07-19 1262
这篇文章让我们简单来了解一下js，那么什么是js?JavaScript（简称JS）是一种高级编程语言，主要用于为网页添加交互功能。它可以嵌入到HTML页面中，通过对DOM（文档对象模型）的操作来实现动态效果和用户交互。JavaScript由Netscape公司的Brendan Eich于1995年创造，最初是为了增强HTML页面的功能性。随着时间的推移，JavaScript逐渐演变成一种通用的编程语言，可以在浏览器以外的环境中运行，例如服务器端的Node.js。
huawei USG6001v1学习--防火墙相关知识（1）
m0_65350813的博客
07-19 413
防火墙主要是借助硬件和软件的作用于内部和外部网络的环境间产生一种保护的屏障，从而实现对计算机不安全网络因素的阻断。
《书生大模型实战营第3期》入门岛 学习笔记与作业：Python 基础知识
shiter编写程序的艺术
07-21 693
python开发简介：【集成开发环境 IDE】python开发简介：【Conda，Pip】虚环境搭建、配置python开发简介：【jupyter notebook】实战配置python开发简介： 编码规范与工程基础实践使用 jupyter hub /lab搭建机器学习工作台使用跨平台的visual studio code 进行python 开发（综合内容老版本）python 开发环境搭建（综合内容老版本）其实Python 的环境配置在所有编程技术栈中是相对简单的，由于conda，pip 的存在。
昇思25天学习打卡营第30天 | 文本解码原理--以MindNLP为例
嫦娥妹妹等等我的博客
07-22 674
学习MindNLP进行文本解码的经验为我揭示了自然语言处理中文本生成技术的复杂性与美妙之处。通过使用MindNLP库，我能够深入理解并实践如何基于预训练的GPT2模型生成文本，特别是学习如何控制生成过程，从贪婪搜索到Beam搜索，再到采样技术，每种方法都有其独特的优势和适用场景。
ES中的数据类型学习之Aggregate metric(聚合计算)
cclovezbf的博客
07-22 495
"metrics": [ "min", "max", "sum", "value_count" ], --那些聚合操作。--"field": "agg_metric" 代表的是对哪个字段进行聚合可能有agg_metric1，agg_metric2。"default_metric": "max" -- 默认显示的聚合字段 用来query的。"type": "aggregate_metric_double", --字段类型。"my-agg-metric-field": { -- 字段名。
FastAPI（六十五）实战开发《在线课程学习系统》基础架构的搭建
mr~li的博客
07-19 204
接下来我们的开发只需要关注主逻辑的处理即可，准备放到对应的crud.py和schemas.py文件中，其中crud主要是逻辑处理详细代码，schemas中主要是参数模型以及响应结果模型。在之前三篇，我们分享的就是需求的分析，基本接口的整理，数据库链接的配置。放所有中间件的地方，比如mysql，redis，mongodb等（主要是数据库操作相关）数据库表模型放在这里（你也可以把数据库相关的都放在这个目录下）之前配置的链接mysql数据库的配置放在对应的database.py中。通用目录，放一些通用的处理。
vue.js2.0+elementui ——> 后台管理系统
06-09
Vue.js 2.0 是一种流行的 JavaScript 框架，它可以用于构建单页面应用程序。Element UI 是一个基于 Vue.js 的组件库，它提供了大量的 UI 组件，可以帮助你快速构建漂亮的界面。结合 Vue.js 和 Element UI，可以轻松地构建一个后台管理系统。 在使用 Vue.js 和 Element UI 构建后台管理系统时，你可以使用 Vue Router 来管理路由，Vuex 来管理状态，axios 来进行网络请求，同时还可以使用 Element UI 提供的表格、表单、按钮等组件来构建界面。此外，你还可以使用一些其他的插件，如 vue-cli、vue-devtools 等，来提高开发效率。 总之，使用 Vue.js 和 Element UI 可以帮助你轻松地构建一个漂亮、高效的后台管理系统。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值