Vue.js——v-指令详解，component组件

最新推荐文章于 2023-09-23 09:52:48 发布

置顶 pdsu_zhao

最新推荐文章于 2023-09-23 09:52:48 发布

阅读量1.5k

点赞数 1

分类专栏： Vue Vue学习之旅文章标签： vue.js v-指令 mvvm message component组件化

本文链接：https://blog.csdn.net/zxy9602/article/details/78109045

版权

Vue 同时被 2 个专栏收录

19 篇文章 2 订阅

订阅专栏

Vue学习之旅

17 篇文章 9 订阅

订阅专栏

其实，2016年至今，Vue发展逐渐占据主体，其“vue”为法语名，实则中文名为“view”，它主要是基于“MVVM”进行设计并开发的。

M——Model 模型，用于数据保存

V——View 视图，用于用户界面设置

VM——ViewModel 视图模型，用于实现双向绑定

即view的变化，自动反映在了viewModel上边，反之亦然。

1、文本

（1）数据插值{{ message }}

<div id="app">
    <p>{{ message }}</p>
</div>

（2）html v-html用于输出html代码

<div id="app">
    <div v-html="message"></div>
</div>
    
<script>
new Vue({
  el: '#app',			//el用于绑定某一数据，即id为“app”的元素
  data: {
    message: '<h1>菜鸟教程</h1>'
  }
})
</script>

注意，若设置html属性中的值应使用v-bind指令。

<div id="app">
    <label for="r1">修改颜色</label><input type="checkbox" v-model="class1" id="r1">
<br><br>
<div v-bind:class="{'class1':class1}">
    directiva v-bind:class
</div>
</div>

<script>
     new Vue({
       el:'#app',
       data:{
            class1:true
      }
});
</script>

（3）指令

对于指令，多采用“v-”作为前缀进行设置，用于设置当表达式值改变时，将某些行为应用到DOM上。

<div id="app">
    <p v-if="seen">现在你看到我了</p>
</div>

<script>
  new Vue({
      el:'#app',
      data:{
         seeb:true
     }
});
</script>

上述代码中，v-if指令将表达式seen的值true或false来判断是否插入p元素。

由于v-show可以实现与v-if相同的效果，即以下面的一个案例进行显示。

      <div id="app">
		<form>
			<div class="error" v-show="!message">
				You must enter a message to submit
			</div>
			
			<textarea v-model="message"></textarea>
			
			<button v-show="message">send message</button>
		</form>
		
		<pre>{{ $data|json }}</pre>
	</div>
		
	<script type="text/javascript" src="js/vue.min.js" ></script>
	<script>
		new Vue({
			el:'#app',
			data:{
				message:''
			}
		});
	</script>

当前代码若在控制台console中，点击F12键审查元素，会发现，

（1）若是“v-show”指令，当我们在“textarea”中进行输入元素，其相邻元素div会出现“<div style="display:none">”，即表示相邻元素div依然存在。

（2）若改为“v-if”指令，相对应的“div style="display:none">”会随即消失。

2、事件处理event

注意：“v-on:”等价于“@”

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>事件处理event</title>
	</head>
	<style>
	    ....		
	</style>
	<body>
		<div id="app">
			<button type="button" @click="updateCount">Submit {{ count }} </button>
		</div>
		
		<script type="text/javascript" src="js/vue.min.js" ></script>
		<script>
			new Vue({
				el:'#app',       //绑定元素对象；
				data:{           //渲染数据；
					count:0
				},
				methods:{         //绑定的方法；
					updateCount:function(){
						this.count ++;
					}
				}
			});
		</script>
	</body>
</html>

上述代码运行后，初始化为“submit0”，每当点击一下按钮，submit0都会++，

在该实例中，用的“@”代替了“v-on:”，在该实例中，显示的event事件为“onClick()”，由于代替了“v-on:”，所以直接写为“@Click”。

3、组件化component

结合template模板，实现代码重用功能，

Vue.component('compoonent',template:{'<h1>Hello world!</h1>'});

</script>

等价于“<counter>

<h1>Hello world！</h1>

</counter>”

为什么采用组件化component呢，目的是为了实现代码重用操作。

案例：点赞喜欢Links or 不喜欢Dislikes

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Vuejs</title>	
	</head>
	<body>
		<div id="app">
			<!---自定义一个组件counter-->
			<counter heading="Likes" color="green"></counter>
			<counter heading="Dislikes" color="red"></counter>
		</div>
		
		<template id="counter-template">
			<!--heading属性(props)用于设置counter属性绑定一个值-->
			<h1>{{ heading }}</h1>
			<button type="button" @click="count +=1">{{ count }}</button>
		</template>
		
		<script type="text/javascript" src="js/vue.min.js" ></script>
	
		<script>
			Vue.component('counter',{
				template:'#counter-template',
				//属性heading
				props:['heading','color'],
				/*不能写为*/
				/*
				data:{
					：count:0
				}
				*/
				data:function(){
					return{count:0};
				}
			});
			
			new Vue({
				el:'#app'
			})
		</script>
	</body>
</html>

代码不知道哪里有错误，一直显示不出来内容，求解？？？？

pdsu_zhao

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Vue.js——v-指令详解，component组件

其实，2016年至今，Vue发展逐渐占据主体，其“vue”为法语名，实则中文名为“view”，它主要是基于“MVVM”进行设计并开发的。M——Model 模型，用于数据保存V——View 视图，用于用户界面设置VM——ViewModel 视图模型，用于实现双向绑定即view的变化，自动反映在了viewModel上边，反之亦然。1、
复制链接

扫一扫