1. Vue中选中对象使用

2. Jquery中使用${"#name"}

3. V开头的如v-bind被称为指令

4. 

此类代码中，由于是在一个id=vue的vue主题内，：item（蓝山）=“item”（绿色）表示将绿色的item传递给蓝色的item。蓝色item是通过：绑定的其他组件内容，而绿色的item则是由v-for循环由vue实体中遍历出来的内容。

5. 因为前端vue框架实现了MVVM（model，view，modleAndView），因此在真实的前后端分离的项目中，后端只需要给前端传输json数据，而且是通过axios方式而不是jquery（vue推荐使用的方法，因为jquery方式会大量操作DOM）。我们主要打交道的对象应该是vue实体中的data：，获取到data之后通过data（）：方法中的return对数据进行返回。

6. 

7. 核心：数据驱动，组件化

   优点：借鉴了AngularJS的模块化开发和React的虚拟Dom，虚拟Dom就是把Demo操作放到内存中执行；

   常用的属性：

   v-if v-else-if v-else v-for v-on绑定事件，简写@ v-model数据双向绑定 v-bind给组件绑定参数，简写： 组件化：

   组合组件slot插槽 组件内部绑定事件需要使用到this.$emit("事件名",参数); 计算属性的特色，缓存计算数据 遵循SoC关注度分离原则，Vue是纯粹的视图框架，并不包含，比如Ajax之类的通信功能，为了解决通信问题，我们需要使用Axios框架做异步通信；

   说明 Vue的开发都是要基于NodeJS，实际开发采用Vue-cli脚手架开发，vue-router路由，vuex做状态管理；Vue UI，界面我们一般使用ElementUI（饿了么出品），或者ICE（阿里巴巴出品）来快速搭建前端项目~~

8. Nodejs是一个环境，而且在环境变量中path中会自动配置，而不像Java那样需要我们手动配置。

9. 安装完Nodejs后会自带一个npm，由于速度慢我们会手动安装一个 安装Node.js淘宝镜像加速器（cnpm）   这样的话，下载会快很多~

安装的位置：C:\Users\administrator\AppData\Roaming\npm

虽然安装了cnpm，但是尽量少用！（存在打包不成功的问题）

10. ruoute在当前目录安装

11. 所有元素必须在根节点下

<template>
  <!--  所有的元素必须在根节点下-->
  <div>
    <h1>个人信息</h1>
    {{$route.params.id}}
  </div>
</template>

12. 参数传递：修改路由配置, 主要是router下的index.js中的 path 属性中增加了 :id 这样的占位符

{
    path: '/user/profile/:id', 
    name:'UserProfile', 
    component: UserProfile
}

13. 此时我们在Main.vue中的route-link位置处 to 改为了 :to，是为了将这一属性当成对象使用，注意 router-link 中的 name 属性名称 一定要和 路由中的 name 属性名称 匹配，因为这样 Vue 才能找到对应的路由路径；

    <!--name是组件的名字 params是传的参数 如果要传参数的话就需要用v:bind:来绑定-->
    <router-link :to="{name:'UserProfile',params:{id:1}}">个人信息</router-link>
    ​

14. 在要展示的组件Profile.vue中接收参数 使用 {undefined{$route.params.id}}来接收 Profile.vue 部分代码

<template>
  <!--  所有的元素必须在根节点下-->
  <div>
    <h1>个人信息</h1>
    {{$route.params.id}}
  </div>
</template>
​

 

15. 传递参数的第二种方法：使用props 减少耦合 1、修改路由配置 , 主要在router下的index.js中的路由属性中增加了 props: true 属性

{
    path: '/user/profile/:id', 
    name:'UserProfile', 
    component: UserProfile, 
    props: true
}
​

 

16. 传递参数和之前一样 在Main.vue中修改route-link地址

<!--name是组件的名字 params是传的参数 如果要传参数的话就需要用v:bind:来绑定-->
<router-link :to="{name:'UserProfile',params:{id:1}}">个人信息</router-link>

 

17. 、在Profile.vue接收参数为目标组件增加 props 属性 Profile.vue

    <template>
      <div>
        个人信息
        {{ id }}
      </div>
    </template>
    <script>
        export default {
          props: ['id'],
          name: "UserProfile"
        }
    </script>
    <style scoped>
    </style>

     

 

18. 组件重定向

在路由配置中多增加一条path配置

​
{
  path: '/main',
  name: 'Main',
  component: Main
},
{
  path: '/goHome',
  redirect: '/main'
}

 

19. 使用的话，只需要在Main.vue设置对应路径即可；

<el-menu-item index="1-3">
    <router-link to="/goHome">回到首页</router-link>
</el-menu-item>

 

 

20. 路由模式有两种

    • hash：路径带 # 符号，如 http://localhost/#/login

    • history：路径不带 # 符号，如 http://localhost/login

    修改路由配置，代码如下：

export default new Router({
  mode: 'history',
  routes: [
  ]
});

 

21. 404 demo 1.创建一个NotFound.vue视图组件 NotFound.vue

<template>
    <div>
      <h1>404,你的页面走丢了</h1>
    </div>
</template>
<script>
    export default {
        name: "NotFound"
    }
</script>
<style scoped>
</style>
​

 

22. import NotFound from '../views/NotFound'
    {
       path: '*',
       component: NotFound
    }

 

23. 路由钩子与异步请求

    beforeRouteEnter：在进入路由前执行 beforeRouteLeave：在离开路由前执行

    在Profile.vue中写

     export default {
        name: "UserProfile",
        beforeRouteEnter: (to, from, next) => {
          console.log("准备进入个人信息页");
          next();
        },
        beforeRouteLeave: (to, from, next) => {
          console.log("准备离开个人信息页");
          next();
        }
      }

    参数说明： to：路由将要跳转的路径信息 from：路径跳转前的路径信息 next：路由的控制参数 next() 跳入下一个页面 next(’/path’) 改变路由的跳转方向，使其跳到另一个路由 next(false) 返回原来的页面 next((vm)=>{}) 仅在 beforeRouteEnter 中可用，vm 是组件实例

24. 在钩子函数中使用异步请求

• 、安装 Axios

cnpm install --save vue-axios

• main.js引用 Axios

import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)

• 准备数据 ： 只有我们的 static 目录下的文件是可以被访问到的，所以我们就把静态文件放入该目录下。 数据和之前用的json数据一样 需要的去上述axios例子里

static/mock/data.json

• 在 beforeRouteEnter 中进行异步请求 Profile.vue

 export default {
    //第二种取值方式
    // props:['id'],
    name: "UserProfile",
    //钩子函数 过滤器
    beforeRouteEnter: (to, from, next) => {
      //加载数据
      console.log("进入路由之前")
      next(vm => {
        //进入路由之前执行getData方法
        vm.getData()
      });
    },
    beforeRouteLeave: (to, from, next) => {
      console.log("离开路由之前")
      next();
    },
    //axios
    methods: {
      getData: function () {
        this.axios({
          method: 'get',
          url: 'http://localhost:8080/static/mock/data.json'
        }).then(function (response) {
          console.log(response)
        })
      }
    }
  }