1.入门Vue前的准备工作
想做出牛逼前端？不只是技术好就行，得看设备。学学ES6，这是JavaScript更新后的版本，多了些实用的新功能，像箭头函数啥的。再装个Node.js，服务器端也能用JavaScript写代码了。还有，别忘了npm，这是个包管理工具，帮你搞定各种库。最后说下Webpack，虽然名字吓人，但其实是个好用的打包神器，能把JavaScript文件合并，提升加载速度，还能加插件增强功能，实在太好用！
2.Vue.js简介与安装
怎麼样，听说过Vue.js吗？其实，它就是JavaScript框架，而且超简单易上手。用npm这个神器，1行代码就能装载到项目中。接下来，在HTML文件找个空地方插入Vue.js，然后就能搭建起应用的”大脑”啦——Vue实例。它可不只是保存数据，还能跟页面互动，让你的页面变得炫酷好玩！
npm install vue
3.创建Vue实例
要学做前端开发，Vue太无敌了！就那么加几个关键词在JavaScript里就轻松搞定！哦对了，想做个带消息的Vue实例？别慌，把它放在HTML的div里面，然后多试几次{{message}}，你就会看到消息立即出现在网页上。这种感觉怎么样？是不是觉得Vue很神奇？它能帮你的数据与页面无缝结合，还能实时更新，让你的网站既好看又好用！
4.Vue组件的魔力
Vue Demo
{{ message }}
var app = new Vue({
el: '#app',
data: {
message: 'Hello, Vue!'
}
})
小伙伴们，你们知道吗？Vue组件其实就是个大宝贝！它能将模板、样式和JavaScript都巧妙地整合起来，制作成“my-component”这样的模块，轻轻松松就能使用。只要在Vue模板里导入一下，就可以随心所欲地用了，真的是超方便快捷
5.VueRouter的导航艺术
Vue Demo
Vue.component('my-component', {
template: '{{ message }}',
data: function () {
return {
message: 'Hello, Vue Component!'
}
}
})
var app = new Vue({
el: '#app'
})
知道Vue的这个神奇工具是啥不？它可以搞定SPA全局导航，无论在哪儿刷网页都不怕！你只需搞懂router组件Home和About，然后随意点，看啥都不会错滴！
6.数据交互的秘密武器——axios
说真的，Vue应用里面数据交互真得很重要！你知道吗，有个叫axios的API工具挺好用的，而且人气也很高！那怎么用？就是用它给服务器发HTTP请求，然后服务器就能赶紧把响应数据给你送过来。咱们继续，比如说，如果咱想用axios发出GET请求，把新数据拿到手后，直接绑在Vue实例上，最后往界面一放就搞定了。这么做的话，你的页面就能随时更新，让用户看着舒服才是最重要的！
Vue Demo
var Home = {
template: 'Home'
}
var About = {
template: 'About'
}
var router = new VueRouter({
routes: [
{
path: '/',
component: Home
},
{
path: '/about',
component: About
}
]
})
var app = new Vue({
router: router
}).$mount('#app')
7.Vuex——状态管理的大管家
你听说过Vuex吗？这就是vue家出的高效小助手，能瞬间让APP的状态和操作变得清晰明了。只要学会用Vuex，你就能轻易把app搞得井然有序，非常顺畅地跑起来。举个例子，在Vuex里设个加减计数器的变形（mutation），然后在Vue里通过$store连接状态数据和mutations，你的app马上就能变得有条不紊，顺利运转了！
看完这篇小文，你就能学会怎么用Vue做华丽的网页！首先，要用Vue造出个示例对象，就像是打地基盖房子那样；接着，加入Vue组件来装饰网页；接下来，用VueRouter搞页面切换，axios负责数据传输，不要忘了Vuex可以帮你管理整个程序的状态！到这儿，你的前端应用就应该能飞快又稳定地运行了。是不是有点儿跃跃欲试了？那还等什么，赶紧试试用Vue打造属于自己的独特网页！
Vue Demo
- {{ item }}
var app = new Vue({
el: '#app',
data: {
items: []
},
created: function () {
axios.get('/api/items')
.then(function (response) {
this.items = response.data
}.bind(this))
.catch(function (error) {
console.log(error)
})
}
})
评论0