新建一个vue页面
第一步,新建一个文件夹/tmp/learn
第二步,进入该文件夹 cd /tmp/learn/
第三步,在此处新建一个js文件夹
第四步,去vue官网下载一个vue.js完整版本,放在该文件夹下。vue.js下载地址
第五步,在/tmp/learn/文件夹下新建一个index.html
index.html的内容如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 引用vue.js --> <script src="./js/vue.js"></script> </head> <body> <div id="app"> <input type="button" value="button1" v-on:click="show()"/> <input type="button" value="button1" @click="show2(33)"/> <h3>{{word}}</h3> </div> <script> //Module var m = { word: 'Hello,World! I am a Vue' } //ViewModel var vm = new Vue({ el:'#app',//挂载点 data: m,//数据 //方法 methods:{ show(){ console.log("hello,world"); this.word='test'; }, show2(x){ console.log("test"+x); } } }) </script> </body> </html>
这里推荐VS code作为日常开发工具,推荐安装open with live server。在vs code中搜索live server即可下载安装。