vue入门例子

vue入门例子

1、声明示渲染      　　　　　　　  {{message}}

2、绑定事件　　　　　　　　　　 v-bind

3、控制切换一个程序是否显示        v-if

4、渲染循环                                   v-for

5、点击事件                                   v-on

6、双向数据绑定    　　　　　　    v-model

一、声明示渲染   {{message}}     例：

 1 
 8 
 9 
19 
20 

　　效果如下：

二、绑定事件      v-bind       例：

　　显示效果如下：

　　请把鼠标悬停几秒，会有提示信息。

三、控制切换一个程序是否显示   v- for      例：

 1 
 8 
 9 
19 
20 

　　效果如下：

 

 

四、渲染循环        v-for       例：

 1 
10 
11 
25 
26 

　　效果如下：

五、点击事件　　 v-on:      例：

 1 
 9 
10 
25 
26 

　　点击按钮之后，字母可以反转，变为

 

 

 

六、双向数据绑定       v-model    例：

 1 
 7 
 8 
18 
19 

　　效果如下：

 

 　　尝试在input框里输入一些东西，查看效果，例：