新建一个vue页面
新建一个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即可下载安装。
