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

╰+哭是因爲堅強的太久メ 2022-06-08 13:23 131阅读 0赞

其实，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 heading="Likes" color="green"></counter>
    			<counter heading="Dislikes" color="red"></counter>
    		</div>
    		
    		<template id="counter-template">
    			
    			<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>

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