<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> [v-cloak]{ display: none; } </style> </head> <body> <div id="app"> <!-- 插值语法 react {} angular{{}} {% %} <%= %> --> <!-- 使用 v-cloak 可以解决 插值表达式闪烁的问题--> <p v-cloak>{{msg}}</p> <div v-cloak> {{msg}} <!-- {{aaaaaa}} --> {{2222}} {{2+8}} {{1>2?"真的":"假的"}} </div> <div v-if='show'>这是用来测试v-if 命令</div> <button v-on:click="clickHandler">切换1</button> <button v-on:click="clickHandler2">切换2</button> </div> <script type="text/javascript" src="./vue.js"></script> <script type="text/javascript"> //vue的实例化对象 var app=new Vue({ el:"#app", data:{ msg:"今天开始学习Vue", show:true, }, methods:{ clickHandler(){ alert("111") }, clickHandler2:function(){ //alert("222") //console.log(this) this.show=!this.show; } } }) //console.log(app.$el); //console.log(app.$data); //console.log(app.$data.msg); //console.log(app.msg) </script> </body> </html>