1、打开WebStorm开发工具，新建‘test.html’，将vue.js文件放在同个目录，引入vue.js文件
2、在页面添加一个div标签，使用vue对象设置内容，代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src = "vue.js"> </script></head><body> <div id = "app"> <div> {{msg}} </div> </div> <script> var app = new Vue({ el : "#app", data : { msg:"hello", } }) </script></body></html>
3、在浏览器查看效果，页面打印出hello
4、使用v-if，隐藏上面的hello，代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src = "vue.js"> </script></head><body> <div id = "app"> 外层div <div v-if = show> {{msg}} </div> </div> <script> var app = new Vue({ el : "#app", data : { msg:"hello", show:false, } }) </script></body></html>
5、在浏览器中打开，只显示处 外层div ，hello并隐藏了。
6、添加一个Button使点击按钮时，hello能显示出来，代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src = "vue.js"> </script></head><body> <div id = "app"> 外层div <div v-if = "show"> {{msg}} </div> <div> <button v-on:click = "clickHandler">点我切换显示</button> </div> </div> <script> var app = new Vue({ el : "#app", data : { msg:"hello", show:false, }, methods:{ clickHandler:function(){ this.show = true; } } }) </script></body></html>
7、在查看，点击按钮，hello又显示出来了
