我的第一个vue.js实例

切版专注于移动端的web前端外包，这当中怎么能少了vue这样的经典前端框架的研究？当我们在尝试创建一个vue程序的时候，发现很多网上的教程都会跟你讲到node.js，webpack甚至还有foundation等各种框架，打包技术，以至于我们想研究vue的时候无从下手，于是我们抛开了多余的干扰，直奔要害，不用node.js等，只需加载vue.js和axios.js 做出了我们的第一个vue实例。

它是我们的第一个hello world级别的前端程序，针对vue的研究我们还特意通过php写了一个简单的api程序，来供vue调取。

下面讲述我创建一个简单的vue程序方法和通过axios调取api的写法：

js文件

// ./app.js
const vm = new Vue({
 el: '#app',
 data: {
 results: [
 {title: "the very first post", abstract: "lorem ipsum some test dimpsum"},
 {title: "and then there was the second", abstract: "lorem ipsum some test dimsum"},
 {title: "third time's a charm", abstract: "lorem ipsum some test dimsum"},
 {title: "four the last time", abstract: "lorem ipsum some test dimsum"}
 ]
 }
});

html文件

<!-- ./index.html -->
<div v-for="result in results"> 
 <div> 
 <div>
 {{ result.title }}
 </div> 
 <div> 
 <p>{{ result.abstract }}.</p> 
 </div> 
 </div>
</div>

通过axios从api获取数据

<!-- ./index.html -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
// ./app.js
const vm = new Vue({
 el: '#app',
 data: {
 results: []
 },
 mounted() {
 axios.get("https://api.qieban.cn/api.php?pagesize=5&page=1")
 .then(response => {this.results = response.data.results})
 }
});

经过切版的小伙伴们的一些研究，我们总算摸清了一点的思路，所谓的nodejs等以及各种打包技术都是为了更方便开发，但是实际上vue只需要你懂一点js 和后端的知识就能做，nodejs并不是核心需要，只是辅助，如果理解有误，欢迎指正。