<!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>