您现在的位置是：首页 > Javascript

当前栏目

Vue 学习笔记 —— 模板语法（一）

Vue 笔记学习

2023-04-18 14:50:34 时间

Vue 模板语法学习

记录 Vue 的复习使用，以加深理解为主，并非零基础入门

一、Vue 指令学习

文档在手，随时查阅：官方文档——指令学习

Vue 中的指令本质上是自定义属性
Vue 中指令的格式：以 v-xxx （比如 v-if，v-for 什么的）

插值表达式的使用及 vue 的初体验：

<div id="app" v-cloak>
	{{msg}}
div>

<script type="text/javascript">
	// 创建一个vue 实例
	var app = new Vue({
		el:"#app",
		data: {
			msg:"Hello World"
		}
	})
	
script>

会在页面上正常显示 Hello World

二、vue 解决闪动问题 v-cloak

我们在使用插值表达式的时候，游览器第一次渲染的时候可能会出现一下表达式的字符串，然后就被替换 data 中的数据内容，这种情况解决就如官方文档的方式皆可以解决了。

<html>
	<head>
		<meta charset="utf-8">
		<title>vue.js 第一天title>
		<script src="vue.js" type="text/javascript" charset="utf-8">script>
		<style type="text/css">
			/* 1. 解决花括号闪动的问题 */
			[v-cloak] {
				display: none;
			}
		style>
	head>
	<body>
		
		<div id="app" v-cloak>
			{{msg}}
		div>
		
		<script type="text/javascript">
			// 创建一个vue 实例
			var app = new Vue({
				el:"#app",
				data: {
					msg:"Hello World"
				}
			})
		script>
	body>
html>

三、数据绑定的指令

3.1 v-text （我就是 innerText）

填充纯文本内容，相当于 js 中的 innerText
相比插值表达式更简单

<html>
	<head>
		<meta charset="utf-8">
		<title>vue 模板指令学习title>
	head>
	<script src="../vue.js" type="text/javascript">script>
	<body>
				
		<div id="root">
			{{msg}}
			<div v-text="msg">div> 
		div>
		<script type="text/javascript">
			var vm = new Vue({
				el:"#root",
				data:{
					msg:'Hello Vue',
				}
			});
		script>
	body>
html>

3.2 v-html （会 innerHTML 吗）

填充 HTML 片段，相当于 js 中的 innerHTML
但是存在安全性问题，只能使用本站的数据作为数据源，第三方数据可以

<html>
	<head>
		<meta charset="utf-8">
		<title>vue 模板指令学习title>
	head>
	<script src="../vue.js" type="text/javascript">script>
	<body>
				
		<div id="root">
			<div v-html="html">div>
		div>
		<script type="text/javascript">
			var vm = new Vue({
				el:"#root",
				data:{
					html:"Hello Vue"
				}
			});
		script>
	body>
html>

可以看到 html 的部分会被转义

3.3 v-pre 跳过预编译

填充原始信息
显示原始信息
跳过编译过程

	<div v-pre>{{msg}}div> 

	<script src="../vue.js" type="text/javascript">script>
		
		<script type="text/javascript">
			var vm = new Vue({
				el:"#root",
				data:{
					msg:'Hello Vue',
					html:"Hello Vue"
				}
			});
		script>

显示原始字符串

3.4 v-once (一次编译，不在变换）

v-once 只编译一次：显示内容之后不在具有响应式功能 (当你显示的信息后续不会在修改了，你就可以用 v-once，提高性能)

		<div id="root">
			<div>{{msg}}div>
			<p v-once>{{info}}p> 
		div>
		<script type="text/javascript">
			var vm = new Vue({
				el:"#root",
				data:{
					msg:"haha",
					info:"你好"
				}
			})
		script>

3.5 v-model 双向数据绑定

使用 v-model 进行双向绑定，那么数据的变化是相互的，使用时只需给它绑定一个值即可，而且数据的双向绑定常常用于表单。这里就要引出 vue 搭建项目的一个设计思想了，即 MVVM。

M（model）
V（view）
VM（View-Model）

双向数据绑定是基于分而治之的思想来做的

视图 ——> 模型事件监听
模型 ——> 视图数据绑定

		<div id="root">
			<div>msg:{{msg}}div>
			<input type="text" v-model="msg" value="" />
		div>
		<script type="text/javascript">
			var vm = new Vue({
				el:"#root",
				data:{
					msg:"haha"
				}
			})
		script>

数据是相互变化的

四、事件绑定 v-on使用

4.1 简单事件处理

使用 v-on 我们可以绑定很多的事件，比如：click, blur 等等，都是我们学 js 时常见的事件。我们下面就定义了一个简单的 click 事件，每当点击一下，数字就进行加一处理

	<div id="root">
		<div>num: {{num}}div>
		
		<input type="button" v-on:click="num++" value="点击1"/>
	div>
	<script src="../vue.js" type="text/javascript">script>
	<body>
		
		<script type="text/javascript">
			var vm = new Vue({
				el:"#root",
				data:{
					num:0
				}
			});
		script>

4.2 使用函数处理事件

和 js 基本一样，我们指定一个函数专门处理某个特定事件，然而这个事件也要专门定义在 vue 中的 methods 中，效果同上

<div id="root">
	<div>num: {{num}}div>

	
	<input type="button" @click="handle()" value="点击2"/>
	<input type="button" @click="handle" value="点击3" />

div>
<script type="text/javascript">
	var vm = new Vue({
		el:"#root",
		data:{
			num:0
		},
		// 事件调用,定义方法处理 click 事件
		methods: {
			// 方法必须定义在这里
			handle: function() {
				// 这里的 this 是 vue 中的实例对象
				this.num++;
			}
		}
	});
script>

4.3 事件函数传参

事件函数传参

如果事件直接绑定函数名称，默认传递事件对象（$event）作为第一个参数
如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，并且事件对象的名称是必须是 $event

<div id="root">
	<div>num: {{num}}div>
	
	<h3>事件函数传参h3>
	<button @click="say('hi',$event)">SayHibutton>
	
div>
<script type="text/javascript">
	var vm = new Vue({
		el:"#root",
		data:{
			num:0
		},
		// 事件调用,定义方法处理 click 事件
		methods: {
			say: function(p, event) {
				console.log(p); //打印传递过来的值
				console.log("标签名称："+event.target.tagName);
				console.log("标签内的内容："+event.target.innerHTML);
			}
		}
	});
script>

4.4 事件修饰符

简要了解一下事件冒泡与阻止冒泡就懂了

<h3> 事件修饰符h3>
<a v-on:click.stop="handle">跳转a> 
<a v-on:click.prevent="handle">跳转a>

五、属性绑定 v-bind 指令

5.1 v-bind 使用

v-bind 的作用动态处理属性的值,下面的实例中，我们给 href 绑定了一个 url 值，这样他就可以跳转到指定的路径了。

<div id="app">
	<a v-bind:href="url">跳转a>
	<button v-on:click="handle">切换button>
	
	
	<a :href="url">跳转1a>
div>
<script type="text/javascript">
	var app = new Vue({
		el:"#app",
		data:{
			url:"http://www.baidu.com"
		},methods:{
			handle: function() {
				this.url = "http://www.qq.com"
			}
		}
	})
script>

5.2 v-bind 就是 v-model ?

我们深入 v-model 的源码可以发现， v-model 之所以能够实现双向绑定是因为它的底层使用属性绑定实现的。

v-model 底层原理: 使用输入域中最新的数据覆盖原来的数据

5.3 v-bind 绑定样式

样式绑定由两种形式

使用对象的形式
使用数组的形式

<style>
	.active {
		width: 100px;
		height: 100px;
		border: 1px solid blue;
	}
	
	.error {
		background-color: red;
	}
style>
<body>
	<div id="app">
		
		<div v-bind:class="{active: isActive, error: isError}">
			测试样式
		div>
		<button v-on:click="handle">切换button>
		
		
		<div v-bind:class="[acticeClass, errorClass]">
			测试样式二
		div>
		<button v-on:click="handleClass">切换button>
	div>
	
	<script type="text/javascript">
		var app = new Vue({
			el:"#app",
			data:{
				//使用对象绑定的属性
				isActive:true,
				isError:true,
				//使用数组绑定的属性
				acticeClass:'active',
				errorClass:'error'
			},methods: {
				handle:function() {
					// 控制 isActive 在 true 和 false 之间进行切换，取反操作即可解决
					this.isActive = !this.isActive;
					this.isError = !this.isError
				},
				handleClass:function() {
					this.acticeClass = !this.acticeClass;
					this.errorClass = !this.errorClass
				}
			}
		})
	script>

六、分支与循环 v-if v-for

6.1 分支结构

6.1.1 使用 v-if

v-if
v-else
v-else-if 只会渲染一个 div v-if 控制元素是否渲染到页面

在判断结构中加入表达式即可完成数据的筛选

<div id="app">
	<div v-if="score >= 90">
		优秀
	div>
	<div v-else-if="socre >=80 && score<=89">
		良好
	div>
	<div v-else-if="score >=60 && score<=79">
		一般
	div>
	<div v-else>
		太差了
	div>
div>
<script>
	var app = new Vue({
		el:"#app",
		data:{
			score:10,
		}
	})
script>

结果肯定是打印最差的

6.1.2 使用 v-show

. v-show 控制元素是否显（已经渲染到页面上了）会在 dom 中显示出来，display 的值被设置为了 none

使用场景：频繁显示隐藏一个元素使用 v-show（因为频繁的操作 DOM 会造成极大的消耗

<div id="app">
	<div v-show="flag">测试 flagdiv>
div>
<script>
	var app = new Vue({
		el:"#app",
		data:{
			flag:false
		}
	})
script>

我们可以看到 dom 时存在的。

6.2 循环结构 v-for

使用 v-for 可以轻松遍历元素，下面看一看 v-for 的简单使用，我们可以遍历值的同时，把下表也能遍历出来

<div id="app">
	<div>数字列表div>
	<ul>
		<li v-for="(item,index) of row">{{item}} -- {{index}}li>
	ul>
	
	
	<ul>
		<li :key="item.id" v-for="item in books">
			<span>{{item.id}}span>
			<span>{{item.title}}span>
		li>
	ul>
	
	
	<div v-for="(value ,key, index) in people">
		{{value + '---' + key + '---' + index}}
	div>

div>
<script type="text/javascript">
	var app = new Vue({
		el: "#app",
		data: {
			people:{
				name:'张三',
				age:18,
				gender:'male'
			},
			row: [1, 2, 3, 4, 5, 6, 7, 8, 9],
			books: [{
					"id": 1,
					"title": "老人与海"
				}, {
					"id": 2,
					"title": "悲惨世界"
				},
				{
					"id":3,
					"title":"小王子"
				}
			]
		}
	})
script>

七、小案例

7.1 简易计算器

实现逻辑如下：

使用 v-model 指令实现数值 a 和数值 b 的绑定
给计算按钮绑定事件，实现计算逻辑
将计算结果响应到对应位置

<div id="app">
	<div>
		<span>数值A:span>
		<input type="text" v-model="a" />
	div>

	<div>
		<span>数值B:span>
		<input type="text" v-model="b" />
	div>

	<button v-on:click="handleA">计算button>
	<div>加法计算结果:<span v-text="resultA">span>div>

	<button v-on:click="handleB">计算button>
	<div>减法计算结果:<span v-text="resultB">span>div>

	<button v-on:click="handleC">计算button>
	<div>乘法计算结果:<span v-text="resultC">span>div>

	<button v-on:click="handleD">计算button>
	<div>除法计算结果:<span v-text="resultD">span>div>
	
div>

<script type="text/javascript">
	// 创建一个vue 实例
	var app = new Vue({
		el: "#app",
		data: {
			a: "",
			b: "",
			resultA: "",
			resultB: "",
			resultC: "",
			resultD: ""
		},
		methods: {
			handleA: function() {
				this.resultA = parseInt(this.a) + parseInt(this.b);
			},
			handleB: function() {
				this.resultB = parseInt(this.a) - parseInt(this.b);
			},
			handleC: function() {
				this.resultC = parseInt(this.a) * parseInt(this.b);
			},
			handleD: function() {
				this.resultD = parseFloat(this.a) / parseFloat(this.b);
			}
		}
	})
script>

7.2 Tab 选项卡实现

核心是，找到对应的下标板块，显示指定的模块

<style type="text/css">
	.tab ul {
		overflow: hidden;
		padding: 0;
		margin: 0;
	}

	.tab ul li {
		box-sizing: border-box;
		padding: 0;
		float: left;
		width: 100px;
		height: 45px;
		line-height: 45px;
		list-style-type: none;
		text-align: center;
		border: 1px solid blue;
		cursor: pointer;
	}

	.tab ul li.active {
		background-color: orange;
	}

	.tab div {
		width: 500px;
		height: 300px;
		display: none;
		text-align: center;
		font-size: 30px;
		line-height: 300px;
	}

	
	.tab div.active {
		display: block;
		background-color: #00F7DE;
	}
style>
<body>
	<div id="app">
		<div class="tab">
			<ul>
				<li v-on:click="change(index)" :class='currentIndex == index ? "active":"" ' :key="item.id" v-for="(item,index) in list">{{item.title}}li>
			ul>
			<div :class='currentIndex == index ? "active":"" ' :key="item.id" v-for="(item, index) of list">
				<span>{{item.des}}span>
			div>
		div>
	div>
	<script type="text/javascript">
		var app = new Vue({
			el: "#app",
			data: {
				currentIndex:0, // 当前选项卡的索引
				list: [{
					id:1,
					title: "A",
					des: "我是盒子一"
				}, {
					id:2,
					title: "B",
					des: "我是盒子二"
				}, {
					id:3,
					title: "C",
					des: "我是盒子三"
				}]
			},
			methods: {
				// 这里实现选项卡的切换操作，本质就是操作类名，通过 currentIndex, 通过素银控制类名的变化
				change:function(index) {
					this.currentIndex = index
				}
			}
		})
	script>

猜你喜欢

微软Teams高级版利用OpenAI提升GPT功能
选择SaaS提供商时需要问的关键问题
CC2530开发环境搭建，你学会了吗？
美国防部召集微软研究实用规模量子计算意在抢占全球领导地位
谈谈你对IaaS、PaaS、SaaS的理解
全球5G物联网市场预计将迎来高速增长
如何开发 SaaS 应用程序
盒马供应链算法实战
从5G到6G：连接技术将颠覆传统行业
5G 精确计时如何改变我们的自动化世界
腾讯云数据库自研内核全新升级新架构比原先性能提升20%
ChatGPT修bug横扫全场，准确率达78%！网友：程序员要开心了
5G网络将如何增强智慧城市解决方案？
如何使用机器学习来分析情感
如何正确进行云迁移
传微软将把ChatGPT整合到必应 AI魔法能打败谷歌搜索吗？
分布式云的扩展自动化需要考虑什么
第二届F5G千兆全光家庭高峰论坛成功举办，引领超感品质生活
开源云原生分布式文件系统 - JuiceFS
Matter落地在即，将为智能家居市场带来什么惊喜？

zl程序教程

当前栏目

Vue 学习笔记 —— 模板语法（一）

Vue 模板语法学习

一、Vue 指令学习

二、vue 解决闪动问题 v-cloak

三、数据绑定的指令

3.1 v-text （我就是 innerText）

3.2 v-html （会 innerHTML 吗）

3.3 v-pre 跳过预编译

3.4 v-once (一次编译，不在变换）

3.5 v-model 双向数据绑定

四、事件绑定 v-on使用

4.1 简单事件处理

4.2 使用函数处理事件

4.3 事件函数传参

4.4 事件修饰符

五、属性绑定 v-bind 指令

5.1 v-bind 使用

5.2 v-bind 就是 v-model ?

5.3 v-bind 绑定样式

六、分支与循环 v-if v-for

6.1 分支结构

6.1.1 使用 v-if

6.1.2 使用 v-show

6.2 循环结构 v-for

七、小案例

7.1 简易计算器

7.2 Tab 选项卡实现

相关文章

当前栏目

Vue 学习笔记 —— 模板语法 （一）

Vue 模板语法学习

一、Vue 指令学习

二、vue 解决闪动问题 v-cloak

三、数据绑定的指令

3.1 v-text （我就是 innerText）

3.2 v-html （会 innerHTML 吗）

3.3 v-pre 跳过预编译

3.4 v-once (一次编译，不在变换）

3.5 v-model 双向数据绑定

四、事件绑定 v-on使用

4.1 简单事件处理

4.2 使用函数处理事件

4.3 事件函数传参

4.4 事件修饰符

五、属性绑定 v-bind 指令

5.1 v-bind 使用

5.2 v-bind 就是 v-model ?

5.3 v-bind 绑定样式

六、分支与循环 v-if v-for

6.1 分支结构

6.1.1 使用 v-if

6.1.2 使用 v-show

6.2 循环结构 v-for

七、小案例

7.1 简易计算器

7.2 Tab 选项卡实现

相关文章

Vue 学习笔记 —— 模板语法（一）