vue程序-基础
【第一个vue程序】
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app">{{message}}</div> <script src="../js/vue.js"></script> <script> //es6语法:定义变量(let),定义常量(const) const app = new Vue({ el:'#app',//用于挂载需要管理的元素 data:{ //定义数据 message:'hello!' } }) </script> </body> </html>
【列表展示v-for】
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <ul> <li v-for="item in movies">{{item}}</li> </ul> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el:"#app", data:{ movies:['星际穿越','大话西游','少年派'] } }) </script> </body> </html>
【方法v-on】
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <h2>当前计数:{{counter}}</h2> <!--<button v-on:click="counter++">+</button> <button v-on:click="counter--">-</button>--> <button @click="add">+</button> <button @click="sub">-</button> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el:'#app', data:{ counter:'0' }, methods:{ add: function (){ this.counter++; }, sub:function () { this.counter--; } } }) </script> </body> </html>