Vue基础学习（二）

最新推荐文章于 2024-07-24 23:00:08 发布

@~_~

最新推荐文章于 2024-07-24 23:00:08 发布

阅读量81

点赞数 1

分类专栏：前端Vue 文章标签： Vue 前端基础

本文链接：https://blog.csdn.net/helloworldjlw/article/details/99205574

版权

前端Vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Vue有很多他的渲染组件，例如v-if,v-bind,v-show,v-on等等，不难发现，这和angular的指令其实如出一辙（angular使用ng-xxx）,所以在Vue的刚开始设计时，还是参考了很多angular的东西，有兴趣的小伙伴可以去了解一下angular。angular中文官网
下面就开始简单介绍Vue的几个内置组件。
一. Vue组件介绍

v-bind

v-bind对于学习Vue的人来说应该说是最常用的，v-bind其实就是一个简单的js表达式，用于响应更新HTML属性。下面通过简单的例子了解它。

<body>    
<div id="app">       
 <p v-bind:class="class1">这是一个bind测试</p>   
  </div>    
  <script>      
    var vm = new Vue({            
    	el:"#app",           
    	 data:()=>{               
    	  return{                   
    	   class1:['prop','prop1']              
    	     }           
    	   }       
     })    
  </script>
  <style scoped>
           .prop{
                color:#fff;
                }       
            .prop1{
                background-color: #000;       
                  }    
  </style>
 </body>

通过这一段代码我们可以看到其实v-bind是可以将一个数组绑定到相应的dom节点的，绑定在class上后会将相应的style属性绑定上去。既然我们能绑定class自然我们也能去绑定style，所以我们也可以通过绑定style去给元素加样式。

<body>    
<div id="app">       
 <p v-bind:style="[prop1,prop2]">这是一个bind测试</p>   
  </div>    
  <script>      
    var vm = new Vue({            
    	el:"#app",           
    	 data:()=>{               
    	  return{                   
    	  	prop1:{
		   color:'#ccc'
		},
		prop2:{
		   backgroundColor:'green'
		}
    	     }           
    	   }       
     })    
  </script>
</body>

上面有两个需要注意的点：第一，如需多个样式采用数组语法进行样式的绑定，第二，遇到类似于background-color这样的属性，在Vue中需要采用驼峰法。如果我们使用了一些CSS3的样式需要添加前缀呢？Vue在这一方面也做了优化机制，如果我们使用相应属性（例如：transform）Vue会自动在其前面加上相应前缀。

v-model

v-model在Vue中的地位丝毫不比v-bind低，在Vue中它对于数据的双向绑定以及一些表单的操作是很重要的，也有很多的修饰符可以进行不同的操作，下面就通过代码去讲解一下。

<body>   
   <div id="app">       
	 <input type="text" v-model="msg">        
         <p>{{msg}}</p>        
	 <hr>        
 	<textarea v-model="text"></textarea>       
  	<p>{{text}}</p>        
 	 <hr>       
   <!-- 获取单选框或者多选框的单值代码 -->        
 	 <input type="checkbox" name="football" id="1" value="1" v-model="checkValues">足球        
  	 <input type="checkbox" name="basketball" id="2" value="2" v-model="checkValues">篮球
  	 <input type="checkbox" name="Badminton" id="3" value="3" v-model="checkValues">羽毛球        	
  	 <p>{{checkValues}}</p> 
	<hr>        
   <!-- 选择框（多选需要添加multiple） -->        
  	 <select name="test" id="test" v-model="optionValues" multiple>            
	  	 <option value="1">test1</option>            
	   	 <option value="2">test2</option>           
	   	 <option value="3">test3</option>        
   	</select>       
    	<p>{{optionValues}}</p>    
    </div>       
   <script>       
      var vm = new Vue({            
      el:"#app",           
       data:()=>{               
	        return{                   
	        msg:'',                   
	        text:'',                   
	        checkValues:[],                   
	        optionValues:[]                
        }           
       }       
    })    
</script>

上面列举了几种常用的表单元素在使用v-model时候时的效果，那么通过一些修饰符我们还可以做到更多，下面便进行列举。

<body>   
   <div id="app">       
  	<input type="text" v-model.lazy="msg">        
         <p>{{msg}}</p>    
   <div>
   <script>       
      var vm = new Vue({            
      el:"#app",           
       data:()=>{               
         return{                   
         msg:''            
        }           
       }       
    })    
</script>

通过lazy修饰符可以看到在鼠标未聚焦在文本框时，会动态将元素进行绑定。是不是很像js的onblur事件呢。

<body>   
   <div id="app">       
   <input type="text" v-model.number="msg">        
         <p>{{msg}}</p>    
   <div>
   <script>       
      var vm = new Vue({            
      el:"#app",           
       data:()=>{               
         return{                   
         msg:''            
        }           
       }       
    })    
</script>

通过number我们可以看到，在选中输入框并填写内容时，Vue会自动筛选出数字，也就是说会将框内信息自动转换为数字类型。
还有一个.tirm修饰符可以将输入的字符串的首尾空格自动去除，大家可以自己尝试一次。

v-if/v-else以及v-show

基本大家上网一搜就会搜出来很多v-if以及v-show的区别，在这里只简单地说一句，真的就一句，哈哈。v-if发生在钩子函数执行时，这时候代码会判断条件是否满足随后对此属性或者代码是否进行加载，v-show则是直接对display属性进行操作，所以很多人就会说到两者的最大区别就是渲染方式不同，运行时间不同，但是效果至少不会代码的人看着是相同的。

 <div id="app">        
 <select name="color" id="color" v-model="isShow" >           
  	<option value="0">红色</option>           
  	<option value="1">绿色</option>           	
 	<option value="2">蓝色</option>        
 </select>       
    <p style="color:red;" v-if="isShow == 0">我是红色</p>       
    <p style="color:green;" v-else-if="isShow == 1">我是绿色</p>      
    <p style="color:blue;" v-else>我是绿色</p>    
 </div>    
 <script>       
      var vm = new Vue({            
	    el:"#app",            
	    data:()=>{               
	       return{                  
	         isShow:''               
             }           
          }        
       })    
</script>

上面实现的就是简单的一个v-if的小例子。下面在列举一个v-show的例子，然后我们做一下对比。

 <div id="app">          
 	 <p v-show="isShow">我是v-show</p>       
 </div>        
 <script>           
    var vm = new Vue({               
    	el:"#app",                
  	data:()=>{                   
          return{                   
              isShow:true                   
         }                
       }           
    })        
</script>

通过运行然后打开开发者工具我们可以看到其实v-show操作的就是display属性，在对代码优化时我们可以对v-if以及v-show进行选择。

v-on

v-on指令其实就是对dom进行监听，触发事件后会执行一些js代码。
如果懂得编程的人应该对计算器并不陌生对吧，下面就通过一个简单的计算机案例来描述一下v-on属性。

 <div id="app">
	 <input type="text" v-model="valueOne"><br>
	 <input type="text" v-model="valueTwo"><br>
	 <input type="text" v-model="value" disabled><br>
	 <button @click="plus">+</button>
	 <button @click="reduce">-</button>
	 <button @click="ride">*</button>
	 <button @click="except">/</button>
 </div>
 <script>
 var vm = new Vue({ 
	 el:"#app",
	 data:()=>{
		 return{
			 valueOne:'',
			 valueTwo:'', 
			 value:''
		 }
	 },
	 methods:{
		 plus(){
			 this.value = parseInt(this.valueOne)+parseInt(this.valueTwo);
		 },
		 reduce(){
			 if(parseInt(this.valueOne)>=parseInt(this.valueTwo)){
				 this.value = parseInt(this.valueOne)-parseInt(this.valueTwo);
			  }else{
				  alert("对不起，第一个值应该小于第二个值");
			  } 
		  },
		  ride(){
			  this.value = parseInt(this.valueOne)*parseInt(this.valueTwo);
		  },
		  except(){
			  this.value = parseInt(this.valueOne)/parseInt(this.valueTwo); 
		  }
	     }
	 })
	</script>
	```
	
上面介绍了基本的指令使用方法，如有不对的地方还望大家能够指正，谢谢！

@~_~

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue基础学习（二）

Vue有很多他的渲染组件，例如v-if,v-bind,v-show,v-on等等，不难发现，这和angular的指令其实如出一辙（angular使用ng-xxx）,所以在Vue的刚开始设计时，还是参考了很多angular的东西，有兴趣的小伙伴可以去了解一下angular。angular中文官网下面就开始简单介绍Vue的几个内置组件。一. Vue组件介绍v-bindv-bind对于学习V...
复制链接

扫一扫

专栏目录