vue学习笔记

安装nodejs

• 官网：https://nodejs.org/en/download/
• 安装cnpm：npm install -g cnpm --registry=https://registry.npm.taobao.org

安装webpack

• cnpm install webpack -g

安装vue-cli

• 安装：cnpm install --global vue-cli
• 升级到3.0：cnpm i -g @vue/cli

创建elementUI工程

https://element.eleme.cn/#/zh-CN/component/quickstart

1. vue create my-app
2. cd my-app
3. vue add element

完整引入element

在main.js中写入：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

Vue-router的配置

1. router.js文件的配置

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
    routes: [
        //配置 根路由，还可以使用redirect
        {path: '/',redirect:'/home'},
        // 配置 首页 路由
        {path: '/home',name: 'home', component: () => import('./views/Home.vue')},
        //配置 关于我们 路由
        {path: '/about',/* name: 'about', */ component: () => import('./views/About.vue')}
    ]
})

2. 路由的使用
   在template标签中加入

    首页
    关于我们
   

3. 我把路由出口配置在了App.vue中

component组件的使用

1. 在components文件夹下面，新增写组件的vue文件
2. 在使用的时候引入import TopNav from '@/components/TopNav.vue'
   这里的@是/src的写法
3. 在export default中注册组件components: {TopNav}
4. 在template标签中放入组件的标签

vue-axios基本用法

https://www.cnblogs.com/silent007/p/8603367.html

1. 安装vue-axios：npm install vue-axios --save
2. 安装qs.js：npm install qs.js --save 能把json格式的直接转成data所需的格式（还没用到）
3. 引入

import Vue from 'vue'
import axios from 'axios'
import qs from 'qs'

Vue.prototype.$axios = axios    //全局注册，使用方法为:this.$axios
Vue.prototype.qs = qs           //全局注册，使用方法为:this.qs

4. 开始使用

v-for的使用

https://www.cnblogs.com/wangyfax/p/10073159.html

用到的方法：

      {{ index + "-" +book.bid + "-" + book.bookname }}