Vue的基本用法及模板语法

于 2024-10-05 22:01:45 发布
阅读量198 收藏 2
点赞数 6
分类专栏： vue 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_59868842/article/details/142716234
版权

Vue.js使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层  Vue实例的数据。所有 Vue.js的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。

在底层的实现上，Vue将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue`能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。

1.创建一个Vue实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<!--1- 引入核心模块，提供了构造函数Vue	-->
	<script src="lib/vue.js"></script>
</head>
<body>

</body>
<script>
	// 1- vm即是Vue实例。
	// 2- Vue构造函数接收一个配置对象。
	// 3- 配置对象中可以设置data属性（类型是一个对象）
	// 4- data对象的属性会作为vm的实例属性(记住)。
	// 5- 建议将方法放置到methods属性中（类型也是一个对象）
	// const vm = new Vue({
	// 	// 实例中的数据
	// 	data:{
	// 		a:1,
	// 		b:2,
	// 		c:{
	// 			userName:"zhangsan"
	// 		},
	// 		d:[1,2,3]
	// 	},
	// 	// 定义方法
	// 	methods:{
	// 		fn(){
	//
	// 		}
	// 	}
	// });
	// console.log(vm);


	// 关于data的特点：
	// 1- data中的属性会作为Vue实例中的属性
	// 2- data的属性值发生改变，那么Vue实例中对应的属性值也会发生改变
	// 3- Vue实例中的属性值发生改变，那么data中的属性值也会发生改变。
	const data = {
		a:1
	}
	const vm = new Vue({
		data
	});
	data.a = 100;
	vm.a = 200;
	console.log(vm.a,data.a);
</script>
</html>

2.Vue挂载

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script src="lib/vue.js"></script>
</head>
<body>
	<div class="root" id="root">
		<h1>{{str}}</h1>
		<h1>{{this.str}}</h1>
		<h1>{{vm.str}}</h1>
	</div>
</body>
<script>
	// 注意重点：在Vue模板中可以直接使用Vue实例中的属性或方法（不需要使用this,不需要使用this)
	// 注意重点：模块中可以使用this(不建议），说明模块所处的环境上下文中的this指向的是Vue实例。
	// 挂载（Vue实例挂载）：指定Vue实例应用的范围（元素）
	const vm = new Vue({
		// 将ID为root的元素作为Vue实例挂载的元素（挂载的元素自此可以称为Vue模板）
		// el:document.querySelector("#root"),
	
		// 将ID为root的元素作为Vue实例挂载的元素（挂载的元素自此可以称为Vue模板）
		// el:"#root",
	
		// 将class为root的元素作为Vue实例挂载的元素（ 不建议）
		// el:".root",
	
		// 将标签名字为div的元素作为Vue实例挂载的元素（ 不建议）
		// el:"div",
	
		// el:"body",// 不允许
		// el:"html",// 不允许
		data:{
			str:"我现在开始学习Vue,第一步要进行挂载",
			vm:{
				str:"vm"
			}
		}
	})
</script>
</html>

2.1相同Vue实例挂载到不同元素

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script src="lib/vue.js"></script>
</head>
<body>
<div id="one">
	<h1>{{str}}</h1>
</div>
<div id="two">
	<h1>{{str}}</h1>
</div>
</body>
<script>
	// 同一个页面，支持多个实例挂载至不同元素中。
	new Vue({
		el:"#one",
		data:{
			str:"one"
		}
	})
	new Vue({
		el:"#two",
		data:{
			str:"two"
		}
	})
</script>
</html>

3.插值表达式

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script src="lib/vue.js"></script>
</head>
<body>
	<div id="root">
		<!--将Vue实例下的属性num进行渲染-->
		<p>{{num}}</p>
		<!--将Vue实例下的属性str进行渲染-->
		<p>{{str}}</p>
		<!--将字符串进行渲染-->
		<p>{{"str"}}</p>
		<!--将数字进行渲染-->
		<p>{{1}}</p>
		<!--将Vue实例下的属性bol进行渲染-->
		<p>{{bol}}</p>
		<!--将布尔值进行渲染-->
		<p>{{false}}</p>
		<!--将Vue实例下的属性fn进行渲染-->
		<p>{{fn}}</p>
		<!--将Vue实例下的fn函数运行的结果进行渲染-->
		<p>{{fn()}}</p>
		<!--将Vue实例下的属性arr进行渲染-->
		<p>{{arr}}</p>
		<!--将Vue实例下的属性obj进行渲染-->
		<p>{{obj}}</p>
		<p>{{null}}</p>
		<p>{{undefined}}</p>
		<p>{{sex===1?"男":"女"}}</p>
		<p>{{str.split("").reverse().join("")}}</p>
		<template></template>
	</div>
</body>
<script>
	// 总结1：插值表达式支持字符串，数字，布尔，对象，数组，方法
	// 总结2：undefined,null不会进行任何输出（与React相同）
	// 总结3：数组不支持直接展开（React支持）
	// 总结4：支持输出对象（React不支持）
	// 总结5：Vue中包裹标签为<template></template>

	new Vue({
		el:"#root",
		data:{
			num:1,
			str:"师法魔级超",
			bol:true,
			arr:[1,2,3,4],
			sex:1,
			obj:{
				userName:"zhangsan"
			}
		},
		methods:{
			fn(){
				return this.str.split("").reverse().join("");
			}
		}
	})
</script>
</html>

4.vue中的指令

4.1v-html与v-text

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script src="lib/vue.js"></script>
</head>
<body>
	<div id="root">
		<h3>v-text</h3>
		<p v-text="userName">{{str}}</p>
		<p v-text='userName'>{{str}}</p>
		<p v-text=userName>{{str}}</p>
		<p v-text=`userName`>{{str}}</p>
		<hr/>
		<h3>v-html</h3>
		<p v-html="userName">{{str}}</p>
		<p v-html='userName'>{{str}}</p>
		<p v-html=userName>{{str}}</p>
		<p v-html=`userName`>{{str}}</p>
		<template v-html="userName">123</template>
	</div>
</body>
<script>
	// 响应式：视图是通过数据进行驱动的（当数据发生改变，视图会根据所使用的数据的变化而变化）
	// 响应式即是视图会响应最新的数据。
	// v-text与v-html的共同特点：
	// 1- 值是一个字符串
	// 2- 该字符串会作为Vue实例的属性名，将对应的属性值在指令所在的标签中进行输出。
	// 3- 会覆盖原有数据。
	// 4- 属性值可以使用双引号，单引号
	// 5- 属性值也可以省略双引号，单引号
	// 6- 如果使用的是反引号会将包裹的值在标签中直接输出
	// 7- 无法与template结合使用。
	// v-text与v-html的区别:
	// v-text不支持HTML标签而v-html支持。
	new Vue({
		el:"#root",
		data:{
			str:"我是一个字符串",
			userName:"zhangsan"
		}
	})

</script>
</html>

4.2v-if v-else-if v-else(条件渲染)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script src="lib/vue.js"></script>
</head>
<body>
<div id="root">
	<p>{{isShow}}</p>
	<p>{{isShow && "你好&&"}}</p>
	<p>{{isShow || "你好||"}}</p>
	<!-- 三元表达式	-->
	<p>{{sex===1?"男":"女"}}</p>
	<p>{{fn()}}</p>
	<!--多条件1-->
	<p>{{getAgeStr()}}</p>
	<!--多条件2-使用指令-->
	<p v-if="age>80">老年</p>
	<p v-else-if="age>40">中年</p>
	<p v-else-if="age>28">壮年</p>
	<p v-else-if="age>18">青年</p>
	<p v-else-if="age>12">少年</p>
	<p v-else-if="age>6">儿童</p>
	<p v-else>婴儿</p>
	<hr/>
	<template v-if="isLogin">您好，欢迎您的到来！</template>
	<template v-else>
		<input type="text" placeholder="请输入管理员账号">
		<input type="text" placeholder="请输入管理员密码">
	</template>
</div>
</body>
<script>
	// 注意1：v-if以及v-else-if的值是一个布尔值，如果成立则渲染指令所在的元素，不成立则不渲染
	// 注意2：v-else-if需要与v-if结合使用
	// 注意3：v-else=需要与v-if或v-else结合使用
	// 注意4：v-if,v-else-if,v-else指令所在的元素之间不要出现其它元素。

	new Vue({
		el:"#root",
		data:{
			isShow:true,
			sex:1,
			age:100,
			isLogin:true
		},
		methods:{
			fn(){
				return this.sex===1?"男":"女"
			},
			getAgeStr(){
				if(this.age>80) return "老年";
				if(this.age>40) return "中年"
				if(this.age>28) return "壮年"
				if(this.age>18) return "青年"
				if(this.age>12) return "少年"
				if(this.age>6) return "儿童"
				return "婴儿"
			}
		}
	})
</script>
</html>

4.3v-show

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script src="lib/vue.js"></script>
</head>
<body>
<div id="root">
<!--	<p v-if="isShow">v-if</p>-->
<!--	<p v-show="isShow">v-show</p>-->
<!--	<p v-show='isShow'>1</p>-->
<!--	<p v-show=isShow>2</p>-->
	<p v-show="'isShow'">3</p>
	<p v-show="''">4</p>
	<p v-show="1">5</p>
	<p v-show="0">6</p>
	<p v-show="true">7</p>
	<p v-show="false">8</p>
	<p v-show="null">9</p>
	<p v-show="undefined">10</p>
</div>
</body>
<script>
	// v-if与v-show的值都是布尔值。
	// v-if为true表示渲染元素，false表示不渲染元素
	// v-show为true表示显示元素，false表示隐藏元素（通过display:none）
	// 注意1：空字符串，0，undefined,null作为判断条件相当于false
	// 注意2：非空字符串，1作为判断条件相当于true
	new Vue({
		el:"#root",
		data:{
			// isShow:true
		}
	})
</script>
</html>

4.4v-bind(属性渲染)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script src="lib/vue.js"></script>
</head>
<body>
<div id="root">
	<!--未使用v-bind,直接设置属性值，而不需要使用Vue的实例属性	-->
	<img width="50" src="https://img12.360buyimg.com/pop/s590x470_jfs/t1/169453/32/37700/50662/64ae6e63Fffd824d7/f6409309d91610b1.jpg.avif" alt="">
	<hr/>
	<!-- 将Vue实例属性imgSrc的值作为src的属性值。	-->
	<img v-bind:width="imgW" v-bind:src="imgSrc" alt=""/>
	<hr/>
	<!-- 使用v-bind,直接设置属性值，而不需要使用Vue的实例属性	-->
	<img v-bind:width="300" v-bind:src="'https://img12.360buyimg.com/pop/s590x470_jfs/t1/169453/32/37700/50662/64ae6e63Fffd824d7/f6409309d91610b1.jpg.avif'" alt="">
	<hr/>
	<a href="http://www.baidu.com">百度</a>
	<hr/>
	<!-- 将字符串作为href的属性值-->
	<a v-bind:href='"http://www.baidu.com"'>{{siteName}}</a>
	<hr/>
	<!-- 将实例属性siteHref作为href的属性值	-->
	<a v-bind:href="siteHref">{{"百度3"}}</a>
	<hr/>
	<!-- 将实例属性w的值作为img的属性的名字。	-->
	<img v-bind:[w]="imgW" v-bind:[h]="imgH" v-bind:[s]="imgSrc" alt=""/>

	<hr/>
	<a :href="siteHref">{{"百度3"}}</a>
	<img :width="imgW" :src="imgSrc" alt="">
	<img :[w]="imgW" :[s]="imgSrc" alt="">
</div>
</body>
<script>
	// v-bind:属性名 有一个简写形式：冒号
	new Vue({
		el:"#root",
		data:{
			imgSrc:"https://img12.360buyimg.com/pop/s590x470_jfs/t1/169453/32/37700/50662/64ae6e63Fffd824d7/f6409309d91610b1.jpg.avif",
			imgW:200,
			imgH:400,
			siteName:"百度2",
			siteHref:"http://www.baidu.com",
			w:"width",
			h:"height",
			s:"src"
		}
	})
</script>
</html>

4.5style特殊

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script src="lib/vue.js"></script>
</head>
<body>
<div id="root">
	<!-- 字符串	-->
	<p style="background:yellow;color:red;">1</p>
	<p :style="'background:yellow;color:red;'">2</p>
	<p :style='"background:yellow;color:red;"'>3</p>
	<p :style ="one">4</p>
	<!-- 对象	-->
	<p :style="{background:'green',color:'pink'}">5</p>
	<p :style="two">6</p>
	<!-- 数组	-->
	<p :style="[{background:'yellow'},{color:'red'}]">7</p>
	<p :style="[bg,cl]">8</p>
</div>
</body>
<script>
	new Vue({
		el:"#root",
		data:{
			one:"background:yellow;color:red;",
			two:{background:'green',color:'pink'},
			bg:{
				background:"yellow"
			},
			cl:{
				color:"red"
			}
		}
	})
</script>
</html>

4.6class特殊

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style>
		.bg{
			background:yellow;
		}
		.cl{
			color:red;
		}
	</style>
	<script src="lib/vue.js"></script>
</head>
<body>
<div id="root">
	<!-- 字符串	-->
	<p class="bg">1</p>
	<p class="cl">2</p>
	<p class="bg cl">3</p>
	<p :class="'bg cl'">4</p>
	<p :class="one">5</p>
	<!-- 对象：常用	-->
	<!-- class绑定的值可以是对象，对象的属性名即是样式类的名字，值是布尔。如果为true类生效，否则无效	-->
	<p :class="{bg:false,cl:true}">6</p>
	<!-- 数组	-->
	<p :class="['bg','cl']">7</p>


</div>
</body>
<script>
	new Vue({
		el:"#root",
		data:{
			one:'bg cl'
		}
	})

</script>
</html>

 4.7v-on 事件

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script src="lib/vue.js"></script>
</head>
<body>
<div id="root">
	<h3>{{num}}</h3>
<!--	未简写：-->
	<!-- 1-语句	-->
<!--	<button v-on:click="num++">加1</button>-->
	<!-- 2-函数:当点击按钮会调用Vue实例中的函数changeNum	-->
<!--	<button v-on:click="changeNum">加2</button>-->
	<!-- 3-调用函数:函数名后加括号不会被立即调用	-->
<!--	<button v-on:click="changeNum2(3,$event)">加3</button>-->

	<!-- 1-语句	-->
	<button @click="num++">加1</button>
	<!-- 2-函数:当点击按钮会调用Vue实例中的函数changeNum	-->
	<button @click="changeNum">加2</button>
	<!-- 3-调用函数:函数名后加括号不会被立即调用	-->
	<button @click="changeNum2(3,$event)">加3</button>
</div>
</body>
<script>
	// 语句：如果操作语句比较简单，建议直接写语句
	// 函数：如果操作比较复杂或要在多个不同的地方调用且不需要传递参数使用函数
	// 调用函数：如果操作比较复杂或要在多个不同的地方调用且需要传递参数使用调用函数
	//         如果要传递事件对象可以通过$event
	// v-on可以简写：@
	new Vue({
		el:"#root",
		data:{
			num:0
		},
		methods:{
			changeNum(e){
				this.num+=2;
				// console.log("changeNum",this)
				// console.log(e.target.innerText)
			},
			changeNum2(num,e){
				this.num+=num;
				// console.log("changeNum2",num)
				console.log(e.target.innerText)
			}
		}
	})
</script>
</html>

4.8v-model

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script src="lib/vue.js"></script>
</head>
<body>
<div id="root">
	<!-- 单向绑定：视图不会更新数据，但数据发生改变视图会改变	-->
<!--	<input v-bind:value="str" type="text">-->
<!--	<input :value="str" type="text">-->

	<!-- 双向绑定：视图发生改变数据会变，数据改变视图也会改变	-->
<!--	<input @input="changeStr" :value="str" type="text">-->
<!--	<input @input="str=$event.target.value" :value="str" type="text">-->
<!--	<input @input="changeStr2($event)" :value="str" type="text">-->

	<!-- 可以通过v-model指令实现双向绑定	-->
	<input v-model="str" type="text">
	<!-- 注意：v-model只可以与表单元素结合使用-->
<!--	<div v-model="str"></div>-->
	<h3>{{str}}</h3>
</div>
</body>
<script>
	new Vue({
		el:"#root",
		data:{
			str:"大家好！我叫刘德华！"
		},
		methods:{
			changeStr(e){
				this.str = e.target.value;
				// console.log(e.target.value)
			},
			changeStr2(e){
				this.str = e.target.value;
			}
		}
	})
</script>
</html>

4.8.1修饰符

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script src="lib/vue.js"></script>
</head>
<body>
<div id="root">
	<!-- 修饰符trim:去除左右空格	-->
<!--	<input v-model.trim="str" type="text">-->
<!--	<h3>青龙{{str}}白虎</h3>-->

<!-- 修饰符number:类型保持为number	-->
<!--	<input type="text" v-model.number="a">+<input type="text" v-model.number="b"> <button @click="sum=a+b">=</button>-->
<!--	<input v-model="sum" type="text">-->

<!-- 修饰符lazy:当失去焦点之后数据才会进行改变。-->
	<input v-model.lazy="str" type="text">
	<h3>{{str}}</h3>
	<h3>{{str}}</h3>
	<h3>{{str}}</h3>
	<h3>{{str}}</h3>
	<h3>{{str}}</h3>
	<h3>{{str}}</h3>
</div>
</body>
<script>
	new Vue({
		el:"#root",
		data:{
			str:"蔡徐坤",
			a:1,
			b:2,
			sum:3
		}
	})
</script>
</html>

4.9v-for(重点)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script src="lib/vue.js"></script>
</head>
<body>
<div id="root">
	<!-- 1- 数组-->
<!--	<div v-for="item in arr">{{item}}</div>-->
<!--	<div v-for="(value,index) in arr">{{index}}：{{value}}</div>-->

	<!-- 2- 对象-->
<!--	<div v-for="item in obj">{{item}}</div>-->
<!--	<div v-for="(value,key) in obj">{{key}}:{{value}}</div>-->


	<!-- 3- 数字-->
<!--	<div v-for="item in num">{{item}}</div>-->
<!--	<div v-for="(n,i) in num">{{i}}:{{n}}</div>-->
	<!-- 4- 字符串-->
<!--	<div v-for="item in str">{{item}}</div>-->
<!--	<div v-for="(s,i) in str">{{i}}:{{s}}</div>-->
</div>
</body>
<script>
	new Vue({
		el:"#root",
		data:{
			arr:["zhangsan","wangwu","zhaoliu","yanqi","shenba","qianjiu"],
			obj:{
				userName:"zhangsan",
				age:12
			},
			num:10,// [1,2,3,4,5,6,7,8,9,10]
			str:"我爱你中国，我亲爱的母亲，我为你流泪也为你自豪！"
		}
	})
</script>
</html>

4.9.1key

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script src="lib/vue.js"></script>
</head>
<body>
<div id="root">
<!-- 使用ID-->
<!--	<div :key="item.id" v-for="item in arr">-->
<!--		<h3>《{{item.bookName}}》</h3>-->
<!--		<p>作者：{{item.author}}</p>-->
<!--		<hr/>-->
<!--	</div>-->

<!-- 使用下标 -->
	<div :key="index" v-for="(item,index) in arr">
		<h3>《{{item.bookName}}》</h3>
		<p>作者：{{item.author}}</p>
		<hr/>
	</div>
</div>
</body>
<script>
	new Vue({
		el:"#root",
		data:{
			arr:[
				{
					id:1,
					bookName:"天龙八部",
					author:"金庸"
				},{
					id:2,
					bookName: "一念永恒",
					author:"耳根"
				}
			]
		}
	})
</script>
</html>

5.适用案例

5.1js实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #root button{
            padding: 5px;
            margin: 5px;
        }
        #root button.active{
            background: red;
        }
        #root div {
			width: 500px;
			height: 300px;
			border: 1px solid green;
		}
    </style>
</head>

<body>
    <div id="root">
        <button>体育</button>
        <button>娱乐</button>
        <button>财经</button>
        <div>体育新闻列表</div>
        <div>娱乐新闻列表</div>
        <div>财经新闻列表</div> 
    </div>
</body>
<script>
    const btns = document.querySelectorAll("#root button");
    const divs = document.querySelectorAll("#root div");
    let index = 0;

    btns.forEach(function(item,i){
        //不让div显示
        divs[i].style.display = "none";
        item.onclick = function(){
            //点击的和显示的div一致的话就不用管了
            if(i === index) return; 
            //不一致的话要先将元素置空
            btns[index].className = null;
            divs[index].style.display = "none";

            //将当前点击的赋值给index
            index = i;
            //将点击的显示按钮要高亮
            btns[index].className = "active";
            divs[index].style.display = "block";

        }
    });
    //默认的，开头第一个按钮
    btns[index].className = "active";
    divs[index].style.display = "block";
</script>
</html>

5.2vue实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #root button {
        padding: 5px;
        margin: 5px;
    }
    
    #root button.active {
        background: red;
    }
    
    #root div {
        width: 500px;
        height: 300px;
        border: 1px solid green;
    }
    
</style>
<script src="lib/vue.min.js"></script>
<body>
    <div id="root">
        //点击的时候给index赋值 v-bind 拿到index 判断是否是对应的div
        <button @click="index=0" :class="{active:index === 0}">体育</button>
        <button @click="index=1" :class="{active:index === 1}">娱乐</button>
        <button @click="index=2" :class="{active:index === 2}">财经</button>
        //判断 index的值
        <div v-show="index === 0">体育新闻列表</div>
        <div v-show="index === 1">娱乐新闻列表</div>
        <div v-show="index === 2">财经新闻列表</div>
    </div>
</body>
<script>
    new Vue({
        el:"#root",
        data:{
            index:0
        }
    })
</script>
</html>

5.3vue高级实现 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #root button {
        padding: 5px;
        margin: 5px;
    }
    
    #root button.active {
        background: red;
    }
    
    #root div {
        width: 600px;
        height: 300px;
        border: 1px solid green;
    }
</style>
<script src="lib/vue.js"></script>
<body>
    <div id="root">
        <button @click="index=i" :class="{active:index===i}" :key="item.id" v-for="(item,i) in newList">{{item.typeName}}</button>
        <div v-show="index ===i" v-for="(data,i) in newList">
            <p v-for="info in data.items">
                <a href="info.newsHref" target="_blank">{{info.newsTitle}}</a>
            </p>
        </div>
    </div>
    
</body>
<script>
    new Vue({
        el:"#root",
        data:{
            index:0,
            newList:[
            {
					id:1,
					typeName:"体育",
					items:[
						{
							id:11,
							newsTitle:"CBA选秀大会：陈国豪当选状元 邹阳意外跌至第五",
							newsHref:"https://fans.sports.qq.com/post.htm?id=1771451668139868317&mid=63#1_allWithElite"
						},
						{
							id:12,
							newsTitle:"从大山里的孩子到CBA职业球员，云南滑翔机矣进宏的故事有多励志？",
							newsHref:"https://new.qq.com/rain/a/20230715V03AI700"
						}
					]
				},
				{
					id:2,
					typeName:"娱乐",
					items:[
						{
							id:21,
							newsTitle:"《奔跑吧》后期团队回应！坦言压力很大，曝最后一期能播且很精彩",
							newsHref:"https://new.qq.com/rain/a/20230715V04IB500"
						},
						{
							id:22,
							newsTitle:"朱珠一边拍戏一边带娃，抱着女儿候场好心酸，两岁珠宝颜值复刻妈妈",
							newsHref:"https://new.qq.com/rain/a/20230715V041EZ00"
						}
					]
				},
				{
					id:3,
					typeName:"财经",
					items:[
						{
							id:31,
							newsTitle:"经济学家姚余栋：房地产是“黄金坑”，能熬出来，还有实实在在的需求",
							newsHref:"https://new.qq.com/rain/a/20230713V09O3D00"
						},
						{
							id:32,
							newsTitle:"国常会：我国正处于经济恢复的关键期 要做好能源电力保供工作",
							newsHref:"https://new.qq.com/rain/a/20230714A08E8400"
						}
					]
				}
            ]
        }
    })
</script>
</html>

 

欧冶渃
关注
专栏目录
vue模板语法
yzq102873的博客
09-02 889
vue模板语法
Vue.js的模板语法详解
10-15
Vue.js 是一款流行的前端JavaScript框架，它通过使用简洁的模板语法，使得开发者能够声明式地将数据渲染进DOM中，实现数据和视图之间的动态同步。Vue.js模板语法的设计借鉴了Angular.js和Knockout.js等框架，并简化...
Vue基本用法、Vue模板语法
tkrj7_的博客
01-28 367
Vue概述 vue：渐进式JavaScript框架 渐进式：声明式渲染 --> 组件系统 --> 客户端路由 --> 集中式状态管理 --> 项目构建 vue官网 优点：（官方） 易用：熟悉HTML、CSS、JavaScript知识后，可快速上手vue 灵活：在一个库和一套完整框架之间自如伸缩 高效：20kB运行大小，超快虚拟DOM Vue基本使用 实例参数分析 el：元素的挂载位置（值可以是CSS选择器或者DOM元素） data：模型数据（值是一个对象） methods:
vue中的模板语法
无远弗届
06-17 1363
Vue.js，简称Vue，是一个用于构建用户界面的渐进式JavaScript框架。自从2014年首次发布以来，Vue因其简洁、易学和高效而迅速赢得了开发者的青睐。Vue的核心库只关注视图层，易于与其他库或现有项目整合，同时也可以支持通过各种插件和库构建复杂的单页应用（SPA）。Vue模板语法是一种声明式的标记语言，用于将组件的数据渲染进DOM。它允许开发者使用HTML作为模板，并通过Vue的指令来增强HTML的功能，实现数据和视图的动态绑定。Vue允许开发者创建自己的指令，以封装复杂的DOM操作逻辑。
Vue3 模板语法及指令
qq_39194983的博客
07-08 1095
跳过这个元素和它的所有子元素的编译过程，用于显示原始 Mustache 标签，防止 Vue 编译，该指令可用于优化大量静态内容的渲染性能。修饰符 (modifier) 是以半角句号.指明的特殊后缀，用于指出一个指令应该以特殊方式绑定，用于修改指令的默认行为。“Mustache”语法仅支持单一的表达式，必须是能够计算出结果的JavaScript 代码，而不是任意的JavaScript 代码。Vue 指令是以 v- 为前缀的特殊属性，Vue 提供了许多内置指令，下面列举一些比较常用的指令。
Vue 3 组件基础与模板语法详解
05-24 936
1. Vue 3 的新特性Vue 3引入了许多新的特性，以提高框架的性能和可维护性。：这是Vue 3中最大的变化之一，它提供了一种更灵活的方式来组织和重用组件的逻辑。Teleport：这是一个新的API，允许我们在组件树中将元素“传送”到其他位置。Suspense：这是一个新的API，允许我们在组件树中等待异步数据加载。Fragment：这是一个新的内置组件，允许我们在组件中渲染多个根节点。v-memo：这是一个新的指令，允许我们在渲染过程中缓存组件的输出。更快的渲染速度。
Vue2-模板语法
yulingpan123的博客
04-24 680
template三种写法，Vue.js模板语法，指令与修饰符
Vue：模板语法-插值
ChinaDragon10的博客
05-30 874
Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。 在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。
初学VUE.js及模板语法
XiaoSen207的博客
09-15 281
Vue模板语法有2大类： 1.插值语法： 功能：用于解析标签体内容。 写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。 2.指令语法： 功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…）。 举例：v-bind:href=“xxx” 或 简写为 :href=“xxx”，xxx同样要写js表达式， 且可以直接读取到data中的所有属性。 备注：Vue中有很多的指令，且形式都是：v-???，此处只是拿v-bind举个例子。 ...
Vue基础之模板语法介绍
m0_73647713的博客
09-18 1048
上篇我分享了关于Vue的入门，简单的入了个门。本篇文章将要分享的内容为Vue的模板语法。
Vue的模板语法及案例
2401_84093248的博客
05-07 295
上面明明我们写的是 HTML 标签，为什么没渲染出来，那就是因为双大括号表达式会将数据解释为普通文本。有的读者会问，有的需求就是要把标签渲染出来，那么我们就需要认识另外一个指令。但实际上，对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持，感受强大的模板语法力量吧！效果一样，可以阻止事件默认行为，在表单中点击提交按钮，就会发生页面跳转，但是使用了。上面属性或者事件我们都是写死的，其实在 Vue 它也可以是动态的。，那我们点击按钮时就会触发事件回调，运行结果和上面一样。
Vue预习课03：模板语法实践购物车
05-08
Vue.js 是一款流行的前端框架，它的核心特性之一是基于HTML的模板语法，使得开发者能够方便地将DOM元素与Vue实例的数据进行绑定。在Vue预习课中，我们重点关注以下几个知识点： 1. **模板语法**：Vue.js 的模板语法...
Vue.js学习笔记之常用模板语法详解
10-19
在实际开发中，Vue的模板语法不仅限于这些基础用法，还包括组件、指令、事件监听器、条件渲染、列表渲染等多种高级特性。不过，本文介绍的文本渲染、表达式、过滤器等基础知识是Vue.js开发中使用频率最高的模板语法...
vue3 实现文本内容超过N行折叠并显示“...展开”组件
Angel_Tears_的博客
09-28 1244
> 组件内文字样式取决与外侧定义 > 组件大小发生变化时,文本仍可以省略到指定行数 > 文本不超过时, 无展开,收起按钮 > 传入文本发生改变后, 组件展示新的文本
knowLedge-Vue I18n 是 Vue.js 的国际化插件
2301_76671906的博客
09-30 930
Vue 2 中使用 Vue I18n 插件实现中英文切换
Vue 技术进阶 day2 数据监视的原理、其他内置指令、自定义指令、生命周期、组件化、VueComponent构造函数
2301_77358195的博客
09-30 975
自定义指令
vue-live2d看板娘集成方案设计使用教程
最新发布
每个人都是独一无二的，把握好自己的节奏，跟着自己的心走。
10-05 1063
vue-live2d看板娘集成方案设计使用教程
Vue.js组件开发教程
q903249871的博客
09-29 1301
组件是 Vue.js 应用程序的基本构建块。它们是独立且可复用的代码块，可以包含模板、逻辑和样式。提高代码的可维护性实现代码复用使应用结构更加清晰子组件可以通过$emit方法向父组件发送事件。组件是构建 Vue.js 应用程序的基石。通过本教程，您应该对如何创建和使用组件有了基本的了解。继续探索 Vue.js 的组件系统，可以让您的应用更加模块化、可维护和强大。希望这份教程对您有所帮助，祝您在 Vue.js 的学习和开发中取得成功！
Vue实战教程：如何用JS封装一个可复用的Loading组件
Jiaberrr的博客
09-28 638
通过以上步骤，我们成功在Vue项目中封装了一个可复用的Loading组件。在实际开发中，我们可以根据项目需求对Loading组件进行样式和功能的扩展，使其更加完善。封装组件是提高代码复用性和维护性的有效手段，希望本文能对你有所帮助。
Vue.js模板语法深度解析
在Vue.js中，模板语法是实现数据绑定和响应式更新的关键部分。本篇文章将深入讲解Vue.js的常用模板语法。 1. 文本渲染 在Vue.js中，我们可以使用`{{ }}`插值表达式来实时渲染文本内容。当数据模型发生变化时，这些...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

欧冶渃

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值