Vue学习记录(Day.2)

最新推荐文章于 2022-10-25 15:42:30 发布

mingmengx

最新推荐文章于 2022-10-25 15:42:30 发布

阅读量409

点赞数 2

本文链接：https://blog.csdn.net/mingmengx/article/details/103510335

版权

插值操作

1.1Mustache语法补充

mustache语法可以写简单的表达式（如下所示）

<div id="app">
	<h2>{{message}}</h2>
	<!--mustache语法可以写简单的表达式-->
	<h2>{{firstName+lastName}}</h2>
	<h2>{{firstName+' '+lastName}}</h2>
	<h2>{{counter*2}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el:'#app',//挂载要管理的元素
        data:{//定义数据
            message:'Hello',
			firstName:"kobe",
			lastName:"bryant",
			counter:"100"
        },
    })
</script>

1.2部分指令的使用

1.2.1v-once

只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能

<div id="app">
	<h2>{{message}}</h2>
	<h2 v-once>{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el:'#app',//挂载要管理的元素
        data:{//定义数据
            message:'Hello'
        }
    })
</script>

1.2.2v-html

如果插入内容为html样式，可以使用v-html指令在页面显示成编译后的样式

<div id="app">
	<h2 >{{url}}</h2>
	<h2 v-html="url"></h2>
</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el:'#app',//挂载要管理的元素
        data:{//定义数据
            message:'Hello',
			url:'<a href="www.baidu.com">百度一下</a>'
        }
    })
</script>

1.2.3v-text

通过v-text指令可以将插入内容通过文本样式展示再页面上

<div id="app">
	<h2>{{message}}</h2>
	<h2 v-text="message"></h2>
</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el:'#app',//挂载要管理的元素
        data:{//定义数据
            message:'Hello',
        }
    })
</script>

1.2.4v-pre

跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。

<div id="app">
	<h2>{{message}}</h2>
	<h2 v-pre>{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el:'#app',//挂载要管理的元素
        data:{//定义数据
            message:'Hello',
        }
    })
</script>

1.2.5v-cloak

这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<style>
			[v-cloak]{
				display: none;
			}
		</style>
	</head>
	<body>

		<div id="app" v-cloak>
			<h2>{{message}}</h2>
		</div>
		
		<script src="../js/vue.js"></script>
		<script>
			/* vue解析之前div中有属性v-cloak */
			/* vue解析之前div中没有属性v-cloak */
			setTimeout(function() {
				const app = new Vue({
					el: '#app', //挂载要管理的元素
					data: { //定义数据
						message: 'Hello',
					},
				})
			}, 1000)
		</script>

	</body>
</html>

1.3v-bind指令

v-bind:作用是动态绑定属性，有一个对应的语法糖 : 。

1.3.1v-bind的基本使用

上文中的指令都是将值直接插入模板内容当中，但是除了内容需要动态来决定之外，有些属性我们也希望动态绑定。

这个时候就可以使用到v-bind指令。

<div id="app">
	<!-- 这里不可以使用mustache方法 -->
	<!-- <img src="{{imgURL}}" alt=""> -->
	<!-- 正确做法 -->
	<img v-bind:src="imgURL" alt="">
	<a v-bind:href="aHref">百度一下</a>
</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el:'#app',//挂载要管理的元素
        data:{//定义数据
            message:'Hello',
			imgURL:'https://cn.vuejs.org/images/logo.png',
			aHref:'www.baidu.com'
        }
    })
</script>

1.3.2v-bind动态绑定class(对象语法)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
	<style>
		.active{
			color: red;
		}
	</style>
</head>
<body>
<div id="app">
	<!-- <h2 class="active">{{message}}</h2>
	<h2 :class="active">{{message}}</h2> -->
	<h2 v-bind:class="{active:isActive,line:isLine}">{{message}}</h2>
	<button v-on:click="btnClick">按钮</button>
	
</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el:'#app',//挂载要管理的元素
        data:{//定义数据
            message:'Hello',
			isActive:true,
			isLine:true
        },
		methods:{
			btnClick:function(){
				this.isActive=!this.isActive
			}
		}
    })
</script>

</body>
</html>

1.3.3v-bind动态绑定class(数组语法)

当类非常多时可以使用数组语法来存放多个类。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
	
<div id="app">
	<!-- //字符串 -->
	<!-- <h2 :class="['active',''line']">{{message}}</h2> -->
	<!-- //变量 -->
	<h2 :class="[active,line]">{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el:'#app',//挂载要管理的元素
        data:{//定义数据
            message:'Hello',
			active:'aaa',
			line:'bbb'
        }
    })
</script>

</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
	<!-- color:'red'不加''就是变量，加''就是值 -->
	<!-- <h2 v-bind:style="{color:'red',fontSize:'50px'}">{{message}}</h2> -->
	<h2 v-bind:style="{color:finalColor,fontSize:finalSize+'px'}">{{message}}</h2>
	<h2 v-bind:style="getStyles()">{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el:'#app',//挂载要管理的元素
        data:{//定义数据
            message:'Hello',
			/* finalSize:'100px', */
			finalSize:100,
			finalColor:'red',
			
        },
		methods:{
			getStyles:function(){
				return{color: this.finalColor,fontSize: this.finalSize+'px'}
			}
		}
    })
</script>

</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
	<h2 v-bind:style="[baseStyle1,baseStyle2]">{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el:'#app',//挂载要管理的元素
        data:{//定义数据
            message:'Hello',
			baseStyle1:{color:'red'},
			baseStyle2:{fontSize:'50px'}
        },
		methods:{
			getStyles:function(){
				return{color: this.finalColor,fontSize: this.finalSize+'px'}
			}
		}
    })
</script>

</body>
</html>

mingmengx

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Vue学习记录(Day.2)

插值操作1.1Mustache语法补充mustache语法可以写简单的表达式（如下所示）<div id="app"> <h2>{{message}}</h2>  <h2>{{firstName+lastName}}</h2> <h2>{{fi...
复制链接

扫一扫