• vue的指令和插值总结


    在这里插入图片描述


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

    一、安装vue

    直接使用script标签引入

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    
    • 1

    二、Vue模板案例

    步骤

    1、引入vue框架
    2、定义1个盒子(根节点)
    3、定义1个script标签

    3.1、定义js对象(根组件)
    3.2、通过vue创建1个应用
    3.3、将应用挂载到根节点(第二步中创建的盒子)

    data():存放页面中显示数据的地方

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<!--1、引入vue框架-->
    		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    
    	</head>
    	<body>
    		<!--2、定义1个盒子(根节点)-->
    		<div id='app'>
    			<h1>{{title}}</h1>
    			<h1>{{name}}</h1>
    		</div>
    		
    		<!--3、定义一个script标签-->
    		<script>
    			//3.1、定义js对象(根组件)
    			const obj={
    				//data():存放页面中存放数据的地方
    				data(){
    					return{
    						title:'kobe',
    						name:'cc'
    					}
    				}
    			}
    		
    			//3.2、通过vue创建1个应用
    			const app=Vue.createApp(obj)
    			
    			//3.3、将应用挂载到根节点(第二步中创建的盒子)
    			app.mount('#app')
    			
    		</script>
    		
    	</body>
    </html>
    
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40

    三、基础模板(记住)

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<!--1、引入vue框架-->
    		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    	</head>
    	<body>
    		
    		<div id='app'></div>
    		
    		<script>
    			
    			Vue.createApp({
    				data(){
    					return{
    						
    					}
    				}
    			}).mount('#app')
    			
    		</script>
    		
    	</body>
    </html>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26

    四、vue的指令和插值

    1、{{}}:插值表达式的语法

    {{}}:可以在html中引用data中定义的数据

    {{name}}

    2、v-text:填充纯文本内容(data中的值)

    效果和innerText一样

    3、v-html:填充html(data中的值)

    效果和innerHtml一样

    4、v-pre:填充原始数据

    防止vue对标签进行渲染(标签中写的什么,就显示什么)

    显示两个花括号,中间为js:{{}}

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<!--1、引入vue框架-->
    		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    	</head>
    	<body>
    		
    		<div id='app'>
    			<h1>{{name}}</h1>
    			<h1>{{age}}</h1>
    			<h1>{{sex}}</h1>
    			<h2>info中的a1:{info.a1}</h2>
    			<h2>info中的a2:{info.a2}</h2>
    			<hr>
    			<h1 v-text='name'></h1>
    			<h1 v-text='arr[0]'></h1>
    			<div v-html='desc'></div>
    			<div v-pre>显示两个花括号,中间为js:{{}}</div>
    		</div>
    		
    		<script>
    			//obj是vue的组件对象
    			const obj={
    				//data方法(返回的是vue组件对象的属性)——》页面上要显示的数据全部放到这里
    				data(){
    					return{
    						name:'2022',
    						age:18,
    						sex:'男',
    						info:{
    							a1:'66',
    							a2:'88'
    						},
    						desc:'

    js

    '
    , arr:[8,24,23,24,25,66] } } } //3.2、通过vue创建1个应用 const app=Vue.createApp(obj) //3.3、将应用挂载到根节点(第二步中创建的盒子) app.mount('#app') </script> </body> </html>
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53

    效果展示:

    在这里插入图片描述

    5、v-bind:属性绑定

    语法:
    v-bind:属性=‘值’
    简写 :属性=‘值’

    {{aInfo.title}}
    简写
    {{aInfo.title}}

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<!--1、引入vue框架-->
    		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    	</head>
    	<body>
    		
    		<div id='app'>
    			<a v-bind:href="aInfo.addr">{{aInfo.title}}</a>
    			<!--简写-->
    			<a :href="aInfo.addr">{{aInfo.title}}</a>
    		</div>
    		
    		<script>
    			
    			Vue.createApp({
    				data(){
    					return{
    						aInfo:{
    							title:'百度',
    							addr:'http://www.baidu.com'
    						}
    					}
    				}
    			}).mount('#app')
    			
    	
    		</script>
    		
    	</body>
    </html>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34

    样式绑定

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<!--1、引入vue框架-->
    		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    	
    		<style>
    			.js{
    				width:200px;
    				height:200px;
    				background: red;
    			}
    		</style>
    	</head>
    	<body>
    		
    		<div id='app'>
    			<!--样式绑定:class属性绑定-->
    			<div :class='{js:isjs}'>js</div>
    		</div>
    		<hr />
    			<!--样式绑定 style属性-->
    		<div :style="s1">py</div>
    
    		<script>
    			
    			Vue.createApp({
    				data(){
    					return{
    						isjs:false,
    						s1:{
    							width:'300px',
    							height:'200px',
    							background:'red',
    						}
    						
    					}
    				}
    			}).mount('#app')
    			
    	
    		</script>
    		
    	</body>
    </html>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47

    6、v-on:事件绑定

    语法:v-on:事件名称=‘执行的方法’
    简写
    @事件名=‘执行的方法’


    简写

    7、v-show:控制元素显示和隐藏的指令

    控制元素显示隐藏的指令:
    v-show 值为True则显示,值为false为隐藏

    py

    methods:定义页面操作过程中调用的函数(vue组件的方法)
    注意点:不要直接把方法定义为箭头函数

    例如

    switchShow()
    定义页面操作过程中调用的函数(vue组件的方法)
    注意点:不要直接把方法定义为箭头函数

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<!--1、引入vue框架-->
    		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    	</head>
    	<body>
    		
    		<div id='app'>
    			
    			<button v-on:click='switchShow'>切换显示</button>
    			<!--<button @click='switchShow'>切换显示</button>-->
    			<!--控制元素显示隐藏的指令:v-show
    				值为True则显示,值为false为隐藏
    			-->
    			<div v-show='status' :style="{width:'200px',height:'200px',background:'red'}">py</div>
    		
    		</div>
    		
    		<script>
    			
    			Vue.createApp({
    				//定义页面上显示数据的(组件的属性)
    				data(){
    					return{
    						status:true
    					}
    				},
    				//定义页面操作过程中调用的函数(vue组件的方法)
    				//注意点:不要直接把方法定义为箭头函数
    				methods:{
    					switchShow(){
    						//在方法中可以通过this获取组件中的数据
    						//方法中的this代表组件中的对象
    						this.status=!this.status
    						
    					}
    				}
    				
    			}).mount('#app')
    			
    	
    		</script>
    		
    	</body>
    </html>
    
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49

    8、v-model:数据的双向绑定

    双向绑定只用于表单和组件
    页面修改数据会变,数据改变,页面也会改

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<!--1、引入vue框架-->
    		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    	</head>
    	<body>	
    		<!--属性绑定是单向的-->
    		<!--<div id='app'>
    			<div>账号:<input type="text" :value='user'></div>
    			<div>密码:<input type="password" :value='pwd'></div>
    		</div>-->
    		
    		<!--双向绑定-->
    		<div id='app'>
    			<div>账号:<input type="text" v-model='user'></div>
    			<div>密码:<input type="password" v-model='pwd'></div>
    			<button @click='login'>登录</button>
    		</div>
    		
    		<script>
    			
    			Vue.createApp({
    				data(){
    					return{
    						user:"root",
    						pwd:123456
    					}
    				},
    				methods:{
    					login(){
    						//发送请求到后端,
    						console.log('提交了登录')
    						console.log(this.user,this.pwd)
    					}
    				}
    			}).mount('#app')
    			
    	
    		</script>
    		
    	</body>
    </html>
    
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46

    9、v-if、v-else-if、v-else:条件渲染

    通过条件来控制元素是否渲染到页面

    v-if
    v-else-if
    v-else

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<!--1、引入vue框架-->
    		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    	</head>
    	<body>
    
    		<div id='app'>
    			<h1 v-if='item.result==="success"' style="color: green;">{{item}}</h1>
    			<h1 v-else-if='item.result===fail' style="color: red;">{{item}}</h1>
    			<h1 v-else>{{item}}</h1>
    		</div>
    		
    		<script>
    			
    			Vue.createApp({
    				data(){
    					return{
    						item:{
    							case_id:1,
    							title:'用例1',
    							result:"success"
    						},
    					}
    				}
    			}).mount('#app')
    			
    	
    		</script>
    		
    	</body>
    </html>
    
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36

    10、v-for:遍历对象、数组

    案例:根据不同的结果,展示不同文字颜色

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<!--1、引入vue框架-->
    		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    	</head>
    	<body>
    		
    		<div id='app'>
    			<table border='1'>
    				<!--表头-->
    				<tr>
    					<th>id</th>
    					<th>title</th>
    					<th>result</th>
    					<th>操作</th>
    				</tr>
    				<!--表格-->
    				<tr v-for='item in cases'>
    					<td>{{item.id}}</td>
    					<td>{{item.title}}</td>
    					<!--条件渲染-->
    					<td v-if='item.result==="success"' style="color: green;">{{item.result}}</td>
    					<td v-else-if='item.result==="error"' style="color:blue;">{{item.result}}</td>
    					<td v-else-if='item.result==="fail"' style="color:tomato;">{{item.result}}</td>
    					<td v-else>{{item.result}}</td>
    					<td></td>
    				</tr>
    				
    				
    			</table>
    			
    		</div>
    		
    		<script>
    			
    			Vue.createApp({
    				data(){
    					return{
    						cases:[
    							{
    							case_id:1,
    							title:'用例1',
    							result:"success"
    						},
    						{
    							case_id:2,
    							title:'用例2',
    							result:"fail"
    						},
    						{
    							case_id:3,
    							title:'用例3',
    							result:"error"
    						},
    						{
    							case_id:4,
    							title:'用例4',
    							result:"success"
    						},
    						
    						]
    					}
    				}
    			}).mount('#app')
    			
    	
    		</script>
    		
    	</body>
    </html>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73

    在这里插入图片描述


    在这里插入图片描述

  • 相关阅读:
    c++ vs2019 cpp20规范 模板function 源码解析
    Android Gradle权威指南读书笔记
    【群智能算法改进】一种改进的鹈鹕优化算法 IPOA算法[1]【Matlab代码#57】
    (未学懂,待填坑)【数据结构】哈夫曼树
    伪元素和伪类的概念和区别
    [蓝桥杯 2023 省 B] 冶炼金属
    接口测试重点内容看这一篇就够了
    【数据挖掘 | 关联性分析】万字长文详解关联性分析,详解Apriori算法为例,确定不来看看?
    自媒体人一般会从哪里找素材呢?
    Skywalking流程分析_9(JDK类库中增强流程)
  • 原文地址:https://blog.csdn.net/YZL40514131/article/details/127417976