<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue1</title> <script src="vue.js"></script> <link rel="stylesheet" type="text/css" href="vue.css"> </head> <body> <div id="app"> <!-- 插值表达式 --> <div>{{msg}}</div> <!-- model与元素双向绑定 --> <input type="text" v-model="msg"/> <!--将变量的值渲染到元素中 --> <h1 v-text="msg"></h1> <!-- 输出原生的html --> <div v-html="html"></div> <!-- 绑定元素的属性 --> <a v-bind:href="url">百度</a> <!--v-if和v-show都可以控制渲染或隐藏，v-show为false只是(加了属性display:none)不显示但是DOM节点是存在的，而v-if为falseDOM节点是不存在的 --> <div v-if="flag"> 我是if </div> <div v-else> 我是else </div> <div v-show="flag">我是v-show</div> <!-- 循环渲染 --> <ul> <li v-for="item of list">{{item}}</li> </ul> <!-- "v-on：时间类型"监视事件，简化为 "@事件类型" --> <button @click="click">按钮</button> </div> <script> var app=new Vue({ el:"#app", data:{ flag:true, msg:'jinweichang', html:`<h1>v-html</h1>`, url:"http://www.baidu.com", list:["list111","list222","list333"] }, methods:{ click:function(){ console.log("按钮被点击了") } } }) </script> </body> </html>