Vue的学习与使用

Main.js和App.vue
1.main.js是我们的入口文件，主要作用是初始化vue实例并使用需要的插件。

import App from './App.vue'
 import VueRouter from 'vue-router'
 import routeConfig from './pages/router-config'

 Vue.use(ElementUI)
 Vue.use(VueRouter)

 //定义路由
 const router = new VueRouter({
     routes: routeConfig
 })

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

2 . App.vue是我们的主组件，所有页面都是在App.vue下进行切换的。其实你也可以理解为所有的路由也是App.vue。

组件的使用
定义组件的模板的方法
1.字符串
默认情况下，在JS文件里模板会被定义为一个字符串。但是我觉得大家都会同意这种写法很难看懂，它除了有广泛的浏览器支持之外，并没有什么优势

2.模板字符串（Template literals）
通过ES6的模板字符串（反引号）语法，你在定义模板时可以直接换行，这是通过常规的JavaScript字符串没法做到的。这种写法更容易阅读，并且这种模板字符串语法得到了许多新版本浏览器的支持。当然，为了安全起见，你仍然应该把它转译为ES5的语法形式。

3.X-Templates
使用这种方法，你需要在index.html文件里的script标签中定义你的模板。script标签需要添加text/x-template类型作为标记，并且在定义组件时，通过id来引用。

4.Inline Templates
通过给组件添加 inline-template 属性来告诉Vue，在其里面的内容就是模板，而不是把它当作是分发内容(见 slots )。它的缺点和x-templates一样，但是有一个优点就是，这种写法是在HTML模板对应的位置，所以它在页面一加载就渲染，而不用等到JavaScript执行。

5 Render functions
渲染函数需要你把模板当作一个JavaScript对象来进行定义，它们是一些复杂并且抽象的模板选项。然而，它的优点是你定义的模板更接近编译器，你可以使用所有JavaScript方法，而不是指令提供的那些功能。

6.JSX
Vue中最有争议性的模板选项就是JSX，一些开发者认为JSX语法太丑，不直观，而且和Vue的简洁特性相违背。JSX首先需要编译，因为浏览器并不支持JSX。但是如果你需要使用渲染函数，那么JSX语法绝对是一种更简洁的定义模板的方法。

7.Single File Components（推荐使用）
只要在你的配置中使用的是合适的构建工具，那么单文件组件绝对是这些方法中的首选。它们有两个最好的优点：允许你使用标记，同时把所有组件定义都写在一个文件中。

通过路由使用组件模板
1.首先我们可以先创建一个路由配置文件，将组件模板导入进来，然后设置对应的路由。

import activePublic from './activePublic/indexabc.vue'
import tableVue from  './test/table'
export default [
    {
        // 配置路由，当路径为'/activePublic',使用组件activePublic
        path:'/activePublic',
        component:activePublic,
    },
    {
        path:'/activeManage',
        component:tableVue,
    }
]

在APP.vue中将路由添加进去，之后点击相应的图标就可以在router-view 标签中显示相应的组件了。

<main>
  <!-- 左侧导航 -->
  <div class="main-left">
    <el-menu default-active="/activePublic" class="el-menu-vertical-demo" :router="true">
      <el-menu-item index="/activePublic" :class="{'isActive': active}">活动发布</el-menu-item>
      <el-menu-item index="/activeManage" :class="{'isActive': !active}">活动管理</el-menu-item>
    </el-menu>
  </div>

  <!-- 右侧主内容区 -->
  <div  class="main-right" >
        <router-view></router-view>
  </div>

</main>

使用路由还需要在main.js中导入vue-router,安装步骤省略，导入路由也可以在APP.vue中导入。

import App from './App.vue'
import VueRouter from 'vue-router'
import routeConfig from './pages/router-config'
Vue.use(VueRouter)

//定义路由

const router = new VueRouter({
    routes: routeConfig
})

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

前后端交互
1.aixos
1-1.axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征：
从浏览器中创建 XMLHttpRequest
从 node.js 发出 http 请求
支持 Promise API
拦截请求和响应
转换请求和响应数据
取消请求
自动转换JSON数据
客户端支持防止 CSRF/XSRF
1-2.具体语法请参考http://blog.lee-cloud.xyz/post/1/Axios-zhong-wen-wen-dang。本文仅以一个简单的post为例：

axios.post("http://127.0.0.1:8080/gethello",{"name":"a "}
    ).then(function (response) {
    console.log(response);
}).catch(function (error) {
    console.log(error);
});

1-3.后台提供对应的接口即可进行访问，跨域问题如何解决？
如果是spring boot项目可以通过CrossOrigin注解来快速解决或者将vue打包到后台项目中。（还可以使用nginx解决）。

2.Eelement ui 与后台交互
Table.vue组件中，设置数据由tableData2绑定

<template>
    <el-table
            :data="tableData2"
            style="width: 100%"
            :row-class-name="tableRowClassName">
        <el-table-column
                prop="date"
                label="日期"
                width="180">
        </el-table-column>
        <el-table-column
                prop="name"
                label="姓名"
                width="180">
        </el-table-column>
        <el-table-column
                prop="address"
                label="地址">
        </el-table-column>
    </el-table>
</template>

在JS代码块中设置好data函数，注意data()不能为空。

data() {
    return {
        tableData2:[]
}

将后台返回的数据赋值给tableData2.

mounted: function () {
    var _this = this   //很重要！！
    axios.get('http://127.0.0.1:8080/getdata')
        .then(function (res) {
            console.log(res);
           _this.tableData2 = res.data
        })
        .catch(function (error) {
            console.log(error);
        });
}