A1.6 急速入门总结

1. vue 和其他前端框架一样，可定义复用组件，每个文件包含 html、JavaScript、css 三部分可以渲染网页中相应的位置。

2. 单页面下直接引入 vue：<script src="/localhost path/vue/dist/vue.js"></script>

3. vue 的应用可以简单分为两个重要组成部分：一个是视图 (html)，一个是脚本(script)。

4. 声明变量创建一个新的 Vue 对象，使用 vue 常见的文本插值方式插入一个 message 变量。使用 ID 选择器标签赋给 Vue 的选项的 el 属性，绑定视图。

5. 使用 axios 与后端交互，单页面下使用 <script> 引入：<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

6. axios 中 method 属性指定请求方式； url 属性指定请求地址，data属性向后端传输数据。

7. vue 中使用 axios 会涉及到跨域问题，需在前端配置 proxyTable 或在后端做跨域支持。

8. vue 路由的引入：<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

9. vue 路由步骤：

• 定义组件：

const Component_1 = {
    template: '<div>this is component <b>1</b></div>'
}

• 或通过 template 的 id 来 定义组件：

<template id="component_1">
    <div>this is component <b>1</b></div>
</template>

<script>const Component_1 = { template: '#component_1' }</script>

• 定义路由，映射组件：

const router = new VueRouter({
    routes: [
        { path: '/component_1', component: Component_1 }
    ]
});

• 创建 Vue 实例，注入路由并挂载实例：

 var vm = new Vue({
     router
 }).$mount('#app');

• 在视图中使用 router-link 组件来导航，通过传入 to 属性指定链接：

<router-link to="/component_1">component_1</router-link>

• 在视图中使用 router-view 组件定义路由出口，匹配到的组件将渲染在这里：

<router-view></router-view>