如今的前端大战三分天下 react vue angular ,要说天朝谁与争锋,vue可谓是热火朝天。weex直接使用vue做数据层的传递,双向绑定。。。。具体知识点请各位看官老爷前往官网一探究竟。
作为一个iOS狗来看看vue.js .
构建项目
-- 本人喜欢使用vue init webpack 构建。
-- npm install vue-cli global
-- vue init webpack
-- npm install
-- npm run dev
如此 🐔构建成功。文件组成 (只关心自己需要的)
-src
-- components 组件
-- router
--. main.js
--.app.vue
main.js是入口函数
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 并且注入了网络请求类
这里不用 vue-resouce vue作者也做过申明 vue-resource不作为官方请求类。
使用axios
axios 安装
npm install axios --save
好消息是 webstorm爽快的支持vue了,写起代码也是飞起。但还是有些坑 注意下好了
Vue.prototype.axios = axios
这里就是申明使用的网络请求是啥子
以后直接 this.axios.get().then(res=>{success},res=>{error})
即可以做请求
- 写代码了
app.vue 是你做逻辑的部分。那你所有的组件 应该写在component中。
** 我们写一个组件万万 这个组件有网络请求 有数据绑定
<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({})
创建一个vue对象。
这里绑定了个movie,当请求的时候 movie被改为fuck。观众老爷们可以体会体会。
.
还有vue store这些我还没接触不写了 。困了睡觉了