vue基础-术语解释

最新推荐文章于 2023-09-22 00:22:34 发布

一杯雪花勇闯天涯

最新推荐文章于 2023-09-22 00:22:34 发布

阅读量1k

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/u014265398/article/details/109015839

版权

vue 专栏收录该内容

41 篇文章 2 订阅

订阅专栏

文章目录

前言
一.术语解释
- 1.插值表达式
2.指令
总结

前言

学习vue基础之术语解释

一.术语解释

1.插值表达式

作用：会将绑定的数据实时显示出来，通过任何形式修改绑定的数据，所显示的数据都会被实时的替换{{js表达式|、三目运算符、方法调用等}}

实例：

   <div id='app'>
       <div>{{msg}}</div>
       <div>{{msg}}+'啦啦啦啦啦啦'</div>
       <div><{{msg.split("")}}/div>
   </div>

<script type="text/javascript" src="js/vue.js"></script>
<script>
	 var vm = new Vue({
		 el:"#app",
		 data:{
			 msg:'你好',
			 age:20
		 },
		 methods:{
			 fn1:function() {
				 this.$data.msg='PHP';
			
			 }
		 }
	 });
</script>

温馨提示:插值表达式中不可以写入javascript语句,比如var a=1;if 语句 for 循环语句

2.指令

1.作用:

增强了html标签功能作用，所有指令都是v-开头；所有指令都是取代之前的dom操作

2.实例

2.1 v-on：事件名

给标签绑定事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<button v-on:click="{{count++}}">Add</button>
			<button v-on:click="{{count--}}">sub</button>
			<p @click="fn()"></p>
			<p>{{count}}</p>
			<div v-on:click='fn()'></div>
			<button v-on:click='fn1(100)'>按钮1</button>
			<button @click='fn2($event)'>按钮1</button>
		</div>
	</body>
</html>
<script type="text/javascript" src="js/vue.js"></script>
<script>
	var vm = new Vue({
		el:'#app',
		data:{
			count:0,
		},
		methods:{
			fn:function() {
			  console.log(vm);
			},
			fn1:function($result){
			   alert($result);
			},	
			fn2:function($event){
			   alert(JSON.stringify($event));
			}
		}
	});
</script>

总结：
在这里插入图片描述

作用：绑定事件
语法：@事件名.修饰符=‘methods中的方法’；
修饰符： once和prevent
注意:$event表示事件对象

2.2 v-text 与v-html

v-text   替换标签全部内容     v-html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		 <div id="app">
			 <p v-text="html"></p>
			 <p v-html="html"></p>
		 </div>
	</body>
</html>
<script type="text/javascript" src="js/vue.js"></script>
<script>
	var vm = new Vue({
		el:"#app",
		data:{
			message:"hello",
			html:"<span style='color:red'>你好</span>"
		},
		methods:{
			
		}
	});
</script>

2.3 v-text 与v-html的区别

1.v-text的作用:替换标签中的全部内容
{{}}会表达式会替换出现表达式的位置
2.v-html的作用：替换标签中的全部内容
v-html可以识别字符串中的标签

总结

vue基础之属于表达式

一杯雪花勇闯天涯

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue基础-术语解释

文章目录前言一.术语解释1.插值表达式2.指令1.作用:2.实例2.1 v-on：事件名 2.2 v-text 与v-html2.3 v-text 与v-html的区别总结前言学习vue基础之术语解释一.术语解释1.插值表达式作用：会将绑定的数据实时显示出来，通过任何形式修改绑定的数据，所显示的数据都会被实时的替换{{js表达式|、三目运算符、方法调用等}}实例： <div id='app'> <div>{{msg}}</div>
复制链接

扫一扫