vue入门(二)

最新推荐文章于 2023-05-17 19:46:30 发布

暴躁老猿

最新推荐文章于 2023-05-17 19:46:30 发布

阅读量87

点赞数 1

分类专栏： JavaEE 文章标签： vue

本文链接：https://blog.csdn.net/m0_55651130/article/details/115956205

版权

JavaEE 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

今天简单的学习一下vue的常见标签指令
v-text
：设置标签的文本值（textContent）
先准备一个初始的引入vue的页面：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body> 
		<div id="app" class="app">
  				
		</div>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
		var app = new Vue({
   			el: '#app',
 			 data: {
    	         
 			 }
		})
</script>
	</body>
</html>

下面使用v-text：

<div id="app" class="app">
  				 <h1 v-text="message">黑龙江</h1>
		        <h1 v-text="info">黑龙江</h1>
		</div>

使用这个v-text有个缺点就是 date里面数据他会显示然后替换原有的数据当我们想指定使用一部分时可以使用插值表达式替换指定内容

<h1>黑龙江+{{message}}</h1>

var app = new Vue({
   			el: '#app',
 			 data: {
    	          message:"今天天气真好！"
 			 }
		})

效果
在这里插入图片描述
另外两个黑龙江被替换了
text中还可以拼接字符串等等

v-html
:设置标签的innerhtml
示例：

<div id="app" class="app">
  			<p v-html="message"></p>
  				<p v-text="message"></p>	
 </div>

var app = new Vue({
   			el: '#app',
 			 data: {
    	          message:"今天天气真好！"
 			 }
		})

在这里插入图片描述
跟text标签对比一下
对于普通文本显示效果是一样的啦

当我们用一些html元素时差异就体现了

var app = new Vue({
   			el: '#app',
 			 data: {
//  	          message:"今天天气真好！"
    	          message:"<a href='http://www.qiandu.com'>千度</a>"
 			 }
		})

效果
在这里插入图片描述
结论：
所以说当我们有html指令需要渲染的时候就用 v-html
只有文本需要显示的时候用v-text
v-on
：为元素绑定事件
写法：
v-on：事件名
@事件名

<input type="button" value="事件绑定" v-on:事件="dolt" />	
  			<!--第二种写法-->
<input type="button" value="事件绑定" @事件="dolt" />

绑定的方法鞋子methods中
内部通过this可以访问定义在data中的数据

var app = new Vue({
   			el: '#app',
 			methods:{
 				dolt:function(){
 					alert("写代码")
 				}
 			}
		})

在这里插入图片描述
点击任意一个
弹窗

小案例：
做一个累加器点击加号数量加一，点击减号数量减一。

<div id="app" class="app">
  		<button @click="sub">-</button>
  		<span>{{num}}</span>
  		<button @click="add">+</button>
		</div>

两个按钮一个减号按钮一个加号按钮分别绑定了两个方法

var app=new Vue({
		el: "#app",
		data: {
			num:1
		},
		methods:{
			add:function(){
				this.num++
			},
			sub:function(){
				this.num--
			}
		}
	})

定义显示的数据和加减的方法
最后效果展示
在这里插入图片描述
点击

暴躁老猿

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue入门(二)

今天简单的学习一下vue的常见标签指令v-text：设置标签的文本值（textContent）先准备一个初始的引入vue的页面：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app" class="app"> &lt
复制链接

扫一扫