Vue——学习笔记

Vue起步

每个 Vue 应用都需要通过实例化 Vue 来实现。
语法格式如下

var vm = new Vue({
// 选项
})

认识Vue的基本内置组件

data
定义数据

data() {
    return {
    };
  }

methods
放入自定义函数

methods: {
}

components
最常被使用为注册组件
组件可以扩展 HTML 元素，封装可重用的代码

 components: {
 }

mounted
发起后端请求，拿回数据

 mounted() {
}

数据绑定

数据绑定最常见的形式就是使用 {{…}}（双大括号）的文本插值：

<div id="app">
  <p>{{ message }}</p>
</div>

v-bind 指令

HTML 属性中的值应使用 v-bind 指令

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

v-on 指令

v-on 用于监听 DOM 事件

<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>

v-for和v-if

v-for 可以绑定数据到数组来渲染一个列表
条件判断使用 v-if 指令,可以在在 元素 和 template 中使用

//list:[{name:'测试1',done:false},{name:'测试2',done:true}]
<div v-for="(item,index) in list "  :key="index" v-if="!item.done" >
	//index是list数组中的下标，从0开始
	//v-if通过判断item中done的值来决定是否显示数据
	{{item.name}}
</div>

router-view组件

比如，在一个导航组件中写了两个导航链接

//该页面为Menu.vue
<div>
      <router-link to="/home/college">学院管理</router-link>
    </div>
    <div>
      <router-link to="/home/major">专业管理</router-link>
</div>

点击每个导航链接都会跳转到不同的组件
这个时候将使用 router-view

//该页面为Home.vue
<template>
  <div>
    <v-header></v-header>
    <div>
        <div>
        	<v-menu></v-menu>
        </div>
        <div>
            <router-view></router-view>
        </div>
    </div>
  </div>
</template>

<script>
import Menu from './Menu.vue'
export default {
  props: {},
  data() {return {};},
  methods: {},
  components: {"v-menu": Menu},
  mounted() {}
};
</script>

<style scoped lang="scss">
</style>

Vue难点：路由

什么是路由呢

路由，其实就是指向的意思，当我点击页面上的home按钮时，页面中就要显示home的内容，如果点击页面上的about 按钮，页面中就要显示about 的内容。Home按钮 => home 内容， about按钮 => about 内容，也可以说是一种映射. 所以在页面上有两个部分，一个是点击部分，一个是点击之后，显示内容的部分。点击之后，怎么做到正确的对应，比如，我点击home 按钮，页面中怎么就正好能显示home的内容。这就要在js 文件中配置路由。

路由中三个基本概念

route

route，它是一条路由，由这个英文单词也可以看出来，它是单数， home按钮 => home内容， 这是一条route, goods按钮 => goods内容， 这是另一条路由。

routes

routes 是一组路由，把上面的每一条路由组合起来，形成一个数组。[{home按钮 =>home内容 }， { goods按钮 => goods内容}]

router

router 是一个机制，相当于一个管理者，它来管理路由。因为routes 只是定义了一组路由，它放在哪里是静止的，当真正来了请求，怎么办？ 就是当用户点击home按钮的时候，怎么办？这时router 就起作用了，它到routes 中去查找，去找到对应的home内容，所以页面中就显示了home内容

配置路由实例

首先要定义router, 一条路由的实现。它是一个对象，由两个部分组成： path和component. path 指路径，component 指的是组件。

src

main.js

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import Home from './compomons/Home.vue'
import Goods from './compomons/Goods.vue'
import Order from './compomons/Order.vue'
Vue.use(VueRouter)
const routes = [
  {
    path: '/home',component: Home,
    //这是父路由
    children: //children中包含的是子路由
    [
      {path: 'goods',component: Goods,},
      {path: 'order',component: Order,}
    ]
  }
]

const router = new VueRouter({
  mode: 'history',
  routes
})

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

Home.vue

<template>
  <div>
      <div class="meun">
        <v-menu></v-menu>
      </div>
      <div class="content">
        <router-view></router-view>
      </div>
  </div>
</template>

<script>
import Menu from "./Menu.vue";
export default {
  props: {},
  data() {return {};},
  methods: {},
  components: {"v-menu": Menu},
  mounted() {}
};
</script>

<style scoped lang="scss">
.meun {
  float: left;
  height: 150px;
  width: 300px;
  border: 1px solid red;
}
.content {
  float: left;
  height: 500px;
  width: 600px;
  border: 1px solid royalblue;
}
</style>

Menu.vue

<template>
  <div>
    <div>
      <router-link to="/home/goods">商品管理</router-link>
    </div>
    <div>
      <router-link to="/home/order">订单管理</router-link>
    </div>
  </div>
</template>

<script>
export default {
  props: {},
  data() {return {};},
  methods: {},
  components: {},
  mounted() {}
};
</script>
<style scoped lang="scss">
</style>

Goods.vue

<template>
  <div>这是goods</div>
</template>
<script>
export default {
  props: {},
  data() {return {};},
  methods: {},
  components: {},
  mounted() {}
};
</script>
<style scoped lang="scss">
</style>

Order.vue

<template>
  <div>这是order</div>
</template>
<script>
export default {
  props: {},
  data() {return {};},
  methods: {},
  components: {},
  mounted() {}
};
</script>
<style scoped lang="scss">
</style>

home页面图例

这时点击页面上的商品管理和订单管理右侧蓝色框内的内容会变换。但是有一个问题，当首次进入页面的时候，右侧页面中并没有显示任何内容。这是因为首次进入页面时，它的路径是 ‘/’，我们并没有给这个路径做相应的配置。一般，页面一加载进来都会显示home页面，我们也要把这个路径指向home组件。但是如果我们写{ path: ‘/’, component: Home },vue 会报错，因为两条路径却指向同一个方向。这怎么办？这需要重定向，所谓重定向，就是重新给它指定一个方向，它本来是访问 / 路径，我们重新指向‘/home’, 它就相当于访问 ‘/home’, 相应地, home组件就会显示到页面上。vueRouter中用 redirect 来定义重定向

home页面点击后图例

1.点击商品管理时

2.点击订单管理时

可以看到，上方的url也随着点击而改变