vue的指令和插值总结

02-27 1267阅读 0评论

$vue的指令和插值总结,vue的指令和插值总结,词库加载错误:未能找到文件“C:\Users\Administrator\Desktop\火车头9.8破解版\Configuration\Dict_Stopwords.txt”。,使用,百度,方法,第2张$

（图片来源网络，侵删）

文章目录

一、安装vue
二、Vue模板案例

步骤
三、基础模板（记住）
四、vue的指令和插值

1、{{}}：插值表达式的语法
2、v-text：填充纯文本内容（data中的值）
3、v-html：填充html（data中的值）
4、v-pre：填充原始数据
效果展示：
5、v-bind：属性绑定
样式绑定
6、v-on：事件绑定
7、v-show：控制元素显示和隐藏的指令
8、v-model：数据的双向绑定
9、v-if、v-else-if、v-else：条件渲染

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

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

一、安装vue

直接使用script标签引入

二、Vue模板案例

步骤

1、引入vue框架

2、定义1个盒子（根节点）

3、定义1个script标签

3.1、定义js对象（根组件）

$vue的指令和插值总结,vue的指令和插值总结,词库加载错误:未能找到文件“C:\Users\Administrator\Desktop\火车头9.8破解版\Configuration\Dict_Stopwords.txt”。,使用,百度,方法,第3张$

（图片来源网络，侵删）

3.2、通过vue创建1个应用

3.3、将应用挂载到根节点（第二步中创建的盒子）

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


	
		
		
		
		
	
	
		
		
			{{title}}
			{{name}}
		
		
		
		
			//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')

三、基础模板（记住）


	
		
		
		
		
	
	
		
		
		
		
			
			Vue.createApp({
				data(){
					return{
						
					}
				}
			}).mount('#app')

四、vue的指令和插值

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

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

2、v-text：填充纯文本内容（data中的值）

效果和innerText一样

$vue的指令和插值总结,vue的指令和插值总结,词库加载错误:未能找到文件“C:\Users\Administrator\Desktop\火车头9.8破解版\Configuration\Dict_Stopwords.txt”。,使用,百度,方法,第4张$

（图片来源网络，侵删）

3、v-html：填充html（data中的值）

效果和innerHtml一样

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

防止vue对标签进行渲染（标签中写的什么，就显示什么）

显示两个花括号，中间为js：{{}}


	
		
		
		
		
	
	
		
		
			{{name}}
			{{age}}
			{{sex}}
			info中的a1:{info.a1}
			info中的a2:{info.a2}
			

			
			
			显示两个花括号，中间为js：{{}}
		
		
		
			//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')

效果展示：

5、v-bind：属性绑定

语法：

v-bind:属性=‘值’

简写 :属性=‘值’

简写


	
		
		
		
		
	
	
		
		
			{{aInfo.title}}
			
			{{aInfo.title}}
		
		
		
			
			Vue.createApp({
				data(){
					return{
						aInfo:{
							title:'百度',
							addr:'http://www.baidu.com'
						}
					}
				}
			}).mount('#app')

样式绑定


	
		
		
		
		
	
		
			.js{
				width:200px;
				height:200px;
				background: red;
			}
		
	
	
		
		
			
			js
		
		
py
		
			
			Vue.createApp({
				data(){
					return{
						isjs:false,
						s1:{
							width:'300px',
							height:'200px',
							background:'red',
						}
						
					}
				}
			}).mount('#app')

6、v-on：事件绑定

语法：v-on：事件名称=‘执行的方法’

简写

@事件名=‘执行的方法’

切换显示

简写

切换显示

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

控制元素显示隐藏的指令：

v-show 值为True则显示，值为false为隐藏

methods：定义页面操作过程中调用的函数（vue组件的方法）

注意点：不要直接把方法定义为箭头函数

例如

switchShow()

定义页面操作过程中调用的函数（vue组件的方法）

注意点：不要直接把方法定义为箭头函数


	
		
		
		
		
	
	
		
		
			
			切换显示
			
			
			py
		
		
		
		
			
			Vue.createApp({
				//定义页面上显示数据的（组件的属性）
				data(){
					return{
						status:true
					}
				},
				//定义页面操作过程中调用的函数（vue组件的方法）
				//注意点：不要直接把方法定义为箭头函数
				methods:{
					switchShow(){
						//在方法中可以通过this获取组件中的数据
						//方法中的this代表组件中的对象
						this.status=!this.status
						
					}
				}
				
			}).mount('#app')

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

双向绑定只用于表单和组件

页面修改数据会变，数据改变，页面也会改


	
		
		
		
		
	
		
		
		
		
		
		
			账号:
			密码:
			登录
		
		
		
			
			Vue.createApp({
				data(){
					return{
						user:"root",
						pwd:123456
					}
				},
				methods:{
					login(){
						//发送请求到后端，
						console.log('提交了登录')
						console.log(this.user,this.pwd)
					}
				}
			}).mount('#app')

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

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

v-if

v-else-if

v-else


	
		
		
		
		
	
	
		
			{{item}}
			{{item}}
			{{item}}
		
		
		
			
			Vue.createApp({
				data(){
					return{
						item:{
							case_id:1,
							title:'用例1',
							result:"success"
						},
					}
				}
			}).mount('#app')

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

案例：根据不同的结果，展示不同文字颜色


	
		
		
		
		
	
	
		
		
			id
					title
					result
					操作
				
{{item.id}}
					{{item.title}}
					
					{{item.result}}
					{{item.result}}
					{{item.result}}
					{{item.result}}
					
				
		
		
			
			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')