如今的前端大戰(zhàn)三分天下 react vue angular 窖式，要說天朝誰與爭鋒，vue可謂是熱火朝天动壤。weex直接使用vue做數(shù)據(jù)層的傳遞萝喘，雙向綁定。琼懊。阁簸。。具體知識點請各位看官老爺前往官網(wǎng)一探究竟哼丈。
作為一個iOS狗來看看vue.js .
構(gòu)建項目
-- 本人喜歡使用vue init webpack 構(gòu)建启妹。
-- npm install vue-cli global
-- vue init webpack
-- npm install
-- npm run dev
如此 ??構(gòu)建成功。文件組成 (只關(guān)心自己需要的)
-src
-- components 組件
-- router
--. main.js
--.app.vue
main.js是入口函數(shù)
import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'
Vue.config.productionTip = false
Vue.prototype.axios = axios
// Vue.use(axios)
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})
這里看到 初始化了一個Vue 并且注入了網(wǎng)絡(luò)請求類
這里不用 vue-resouce vue作者也做過申明 vue-resource不作為官方請求類醉旦。
使用axios
axios 安裝
npm install axios --save
好消息是 webstorm爽快的支持vue了翅溺，寫起代碼也是飛起。但還是有些坑 注意下好了
Vue.prototype.axios = axios
這里就是申明使用的網(wǎng)絡(luò)請求是啥子
以后直接 this.axios.get().then(res=>{success},res=>{error})即可以做請求
- 寫代碼了
app.vue 是你做邏輯的部分髓抑。那你所有的組件 應(yīng)該寫在component中。
** 我們寫一個組件萬萬 這個組件有網(wǎng)絡(luò)請求 有數(shù)據(jù)綁定
<div class="moviee">
<h1>{{movie}}</h1>
<button @click="hi">{{movie}}</button>
</div>
</template>
<script>
export default {
name: 'moviee',
data () {
return {
movie: 'Welcome to Your Vue.js App'
}
},
methods: {
hi: function () {
// alert('sda')
let instance = this
this.movie = 'fuck'
instance.axios.get('https://foxforever.cn:3003/movies').then(function (response) {
})
}
}
}
</script>
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
export default這個是vue的組件固定形式优幸。 可以 let vm = new Vue({})創(chuàng)建一個vue對象吨拍。
這里綁定了個movie，當(dāng)請求的時候 movie被改為fuck网杆。觀眾老爺們可以體會體會羹饰。
.
還有vue store這些我還沒接觸不寫了 。困了睡覺了
