本文共 2165 字，大约阅读时间需要 7 分钟。

条件渲染、列表渲染、事件处理、表单输入绑定基本使用

条件渲染

v-if 基本用法

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。

v-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使用：

   	
   
		
    
     		  A		
    
		
    
     		  B		
    
		
    
     		  C		
    
		
    
     		  Not A/B/C		
    
	
   

v-if还可以与template、v-for结合使用，请参考官网：

v-show 基本用法

另一个用于根据条件展示元素的选项是 v-show 指令。用法大致一样：

   	
   
    hahh
   

注意：v-show 不支持 template 元素，也不支持 v-else。

v-if 与 v-show 使用场景

• v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
• v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
• 相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
• 一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

官网链接：

列表渲染

v-for 渲染数组

   
   
    
	
     	
     
		{{ParentMessage}}--{{index}}--{{products.message}}	
    
   

输出结果为：

v-for渲染对象

   
   
    
	
     	
     
		{{index}}--{{tian}}--{{hashMap}}	
    
   

输出结果为：

注意：建议尽可能在使用 v-for 时提供 key attribute，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。因为它是 Vue 识别节点的一个通用机制，key 并不仅与 v-for 特别关联。后面我们将在指南中看到，它还具有其它用途。

关于数组、对象的列表渲染及维护参考官网：

事件处理

可以用 v-on指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。

以下是监听事件的简单例子，点击按钮实现counter +1 的效果：

   
   
    
	
     
		 
      Add 1		  
      
The button above has been clicked {{ counter }} times.
	
     
    
   

效果如下，每点击以下实现 counter + 1：

事件处理方法

   
   
	 
     please click me
   

效果如下：

目前是初学者，关于事件修饰符及其他更多用法请参考官网链接：

表单输入绑定

你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理

下面是对于单选框、复选框、值绑定以及表单提交的基本写法：

   
   
	
    
		
     		 
     		 
     
Message is: {{ message }}
		 
     		 
     		 
     
messageArea is :{{ messageArea }}
		 
     
		 
     		 
     		 
      单复选框：{{changed}}		 
     
		 
     
		 
     		 
     		 
     Jack		 
     		 
     John		 
     		 
     Mike		 
     
		 
     Checked names: {{ checkedNames }}		 
     
		 
     
		 
     		 
     		 
     One		 
     
		 
     		 
     Two		 
     
		 
     Picked: {{ picked }}		 
     
		 
     
		 		 
     		 
     		   请选择		   A		   B		   C		 		 
     Selected: {{ selected }}		 
     
		 
     
		 		 
     		 
     		   A		   B		   C		 		 
     
		 
     selectList: {{ selectList }}	
    
	
    	 
    submit
   

效果如下：

修饰符以及更多的用法参考官网链接：