Vue学习笔记(二) P13~P21

最新推荐文章于 2024-07-26 11:33:19 发布

运妙心藏

最新推荐文章于 2024-07-26 11:33:19 发布

阅读量207

点赞数 1

分类专栏： Vue 文章标签： Vue Vue.js

本文链接：https://blog.csdn.net/u010921682/article/details/102619902

版权

Vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

文章目录

P.13.1 v-once 只渲染元素和组件一次

<body>
	<div id="app">
		<h2>{{message}}</h2>
		<h2 v-once>{{message}}</h2>
	</div>
	
	<script src="js/vue.js"></script>
	<script>
		const vm = new Vue({
			el: "#app",
			data: {
				message: "Hello Vue.js!"
			}
		})
	</script>
</body>

第一次接收数据时
在这里插入图片描述
修改数据

P.13.2 v-html 解析显示带有html标签的文本

<div id="app">
	<h2>{{message}}</h2>
	<h2>{{url}}</h2>
	<h2 v-html>{{url}}</h2>
	<h2 v-html="url"></h2>
</div>
	
<script>
	const vm = new Vue({
		el: "#app",
		data: {
			message: "Hello Vue.js!",
			url:'<a href="https://www.baidu.com/">百度一下</a>'
		}
	})
</script>

在这里插入图片描述

P.13.3 v-text 更新元素的 textContent

<div id="app">
	<h2>{{message}}</h2>
	<h2 v-text="content"></h2>
	<h2 v-text="content">{{message}}</h2>
</div>
	
<script>
	const vm = new Vue({
		el: "#app",
		data: {
			message: "我是原来的内容",
			content: "你完了,我要替换更新你"
		}
	})
</script>

在这里插入图片描述

P.13.4 v-pre 原样显示文本

<body>
	<div id="app">
		<h2>{{message}}</h2>
		<h2 v-pre>{{message}}</h2>
	</div>
		
	<script>
		const vm = new Vue({
			el: "#app",
			data: {
				message: "Hello Vue.js!"
			}
		})
	</script>

在这里插入图片描述

P.13.5 v-cloak 保持在元素上直到关联实例结束编译

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Title</title>
		<script src="js/vue.js"></script>
		
		<style>
			[v-cloak]{
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<h2>{{message}}</h2>
			<h2 v-cloak>{{message}}</h2>
		</div>
			
		<script>
			setTimeout(function(){
				const vm = new Vue({
					el: "#app",
					data: {
						message: "Hello Vue.js!"
					}
				})
			}, 1000)
		</script>
	</body>
</html>

在这里插入图片描述

P.14 v-bind 动态绑定基本使用

<div id="app">
	<br>
	<img src="url" />
	<br>
	<br>
	<img src="{{url}}" />
	<br>
	<img v-bind:src="url" />
	<br>
	<a href="aHref">百度一下</a>
	<br>
	<a href="{{aHref}}">百度一下</a>
	<br>
	<a v-bind:href="aHref">百度一下</a>
	<a :href="aHref">百度一下</a>
</div>
	
<script>
	const vm = new Vue({
		el: "#app",
		data: {
			message: "Hello Vue.js!",
			url: "https://img20.360buyimg.com/mobilecms/s140x140_jfs/t1/19261/7/9299/160202/5c7de36eE68c6b708/ca2762256ec6f931.jpg.webp",
			aHref: "https://www.baidu.com/"
		}
	})
</script>

在这里插入图片描述
v-bind
缩写可以直接用 :(冒号)
动态地绑定一个或多个特性，或一个组件 prop 到表达式。
从源码中可以看出只有红框指向的写法的才是有效的

P.15 v-bind 动态绑定class(对象语法)

P.16 v-bind 动态绑定class(数组语法)

P.17 作业 v-bind和v-for结合使用

P.18 v-bind 动态绑定style(对象语法)

<div id="app">
	<!-- 100px如果没有引号，则会被认为是Vue变量 -->
	<!-- <h2 :style="{fontSize: 100px}">{{message}}</h2> -->
	<h2 :style="{fontSize: '100px'}">{{message}}</h2>
	<h2 :style="{fontSize: finalSize+'px', backgroundColor:finalColor}">{{message}}</h2>
	<h2 :style="getStyles()">{{message}}</h2>
</div>
	
<script>
	const vm = new Vue({
		el: '#app',
		data:{
			message: '你好啊',
			finalSize: 100,
			finalColor: 'red'
		},
		methods:{
			getStyles: function(){
				return {fontSize: this.finalSize+'px', backgroundColor: this.finalColor}
			}
		}
	})
</script>

在这里插入图片描述

P.19 v-bind 动态绑定style(数组语法)

<div id="app">
	<h2 :style="[baseStyle, baseStyle2]">{{message}}</h2>
</div>
	
<script>
	const vm = new Vue({
		el: '#app',
		data:{
			message: '你好啊',
			baseStyle: {backgroundColor: 'red'},
			baseStyle2: {fontSize: '100px'}
		}
	})
</script>

在这里插入图片描述

P.20 computed 计算属性的基本使用

P.21 computed 计算属性的复杂使用

运妙心藏

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue学习笔记(二) P13~P21

文章目录13_1 ==v-once== 只渲染元素和组件一次13_2 ==v-html== 解析显示带有html标签的文本13_3 ==v-text== 更新元素的 textContent13_4 ==v-pre== 原样显示文本13_5 ==v-cloak== 保持在元素上直到关联实例结束编译14 ==v-bind== 动态绑定基本使用15 ==v-bind== 动态绑定class13_...
复制链接

扫一扫