Vue

vue-cli

vue init webpack fileName

npm run dev

后端api交互

真的弄了好长时间

1
2
npm install axios
npm install --save axios vue-axios
1
2
3
4
5
/*在main.js中应用*/
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)
1
2
3
4
5
6
7
8
9
10
11
12
/*GET*/
data() {
    return {
    	info: null
    }
},
mounted() {
    this.axios
    .get("api接口url")
    .then(response=>(this.info = response))
    .catch(function(error){console.log(error)})
}

前端路由

What

How

1
2
安装
npm install vue-router
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/*配置*/
import VueRouter from 'vue-router'
import Hitokoto from './components/hitokoto'

Vue.use(VueRouter)


const router = new VueRouter({
  routes:[
    {path:'/', component: Hitokoto}  //组件英文不要加s噢，手滑卡了一天
  ]
})


new Vue({
  el: '#app',
  components: { App },
  template: '<App/>',
  router 			/*加入前端路由*/
})

/*根vue中*/
/*使用<router-view></router-view>来应用前端路由*/

常用v-

v-on：略写@

v-bind:略写: 绑定各种属性

v-for：

v-html：输出html

v-if和v-show:if

v-model:双向绑定