Vue知识点01

最新推荐文章于 2024-08-12 01:25:53 发布

三七yiii

最新推荐文章于 2024-08-12 01:25:53 发布

阅读量302

点赞数 1

分类专栏：前端文章标签：前端 vue.js html5 javascript

本文链接：https://blog.csdn.net/m0_65208646/article/details/125491456

版权

前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

1、v-text

更新元素的 textContent。如果要更新部分的 textContent，需要使用 {{ Mustache }} 插值。

text只能识别文本和innertext的属性用法类似

<h1 v-text="msg"></h1>
<!--或者-->
<h1>{{msg}}</span>

2、v-html

更新元素的 innerHTML。注意：内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译。如果试图使用 v-html 组合模板，可以重新考虑是否通过使用组件来替代。

html可以识别标签和innerHTML的属性用法类似

 <div v-html="msg"></div>

3、v-show

根据表达式之真假值，切换元素的 display

当条件变化时该指令触发过渡效果

<!-- true和false可以用变量替代 -->
<!-- true显示 -->
<img v-show="true" src="./img/5.jpg">  
<!-- false隐藏 -->
<img v-if="flase" src="./img/6.jpg">

4、v-on事件绑定

绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。

<!-- v-on事件绑定 ,点击切换true和false -->
<button v-on:click="flag=!flag" type="button">按钮{{count}}</button> 
<script>
			var vm = new Vue({
				el: '#app',
				data: {
					msg: 'hello',
					flag: true
				
				}
			})
</script>

5、条件渲染v-if v-else-if v-else

用法和if多分支判断的用法类似

<img v-if='count==1' src="img/3.jpg">
<!-- count等于1时显示-->
<img v-else-if='count==2' src="img/4.jpg">
<!-- count等于2时显示-->
<img v-else src="img/5.jpg">
<!-- count等于其他值时显示-->

6 、v-for 列表渲染

基于源数据多次渲染元素或模板块,遍历元素。

v-for在严格情况下要添加:key唯一标识

<ul>
	<li v-for="item,index in 10" :key="index" >{{item}}</li>
<!-- 遍历显示1到10 -->
</ul>

附加：用vue2获取接口数据并显示在页面上

<head>
 <!-- 1.引入vue -->
 <script src="js/v2.6.10/vue.js"></script>
</head>
<body>
<!-- 2.Dom节点 -->
 <div id="app">
	<div v-for="item,index in apiData" :key="index" class="item">
			<p>{{item.content}}</p>
		</div>
 </div>
 <!-- 3.vue对象 -->
 <script type="text/javascript">
 	var vm=new Vue({
		el:'#app',
		data:{
			msg:'hello',
			apiData:'111'
		}
	})
	fetch('http://localhost:3000/api/message').then((res)=>{
		return res.json();
	}).then((d)=>{
		vm.$data.apiData=d;
	})
 </script>
</body>