Vue学习笔记

一.准备工作

1. 安装node.js
2. 安装cnpm: npm install -g cnpm --registry=https://registry.npm.taobao.org
3. 安装vue的命令行工具：npm install --global vue-cli
4. 创建项目：vue init webpack-simple v1
5. 用vscode打开项目，打开命令窗口
6. 安装项目依赖：cnpm install
7. 运行项目：npm run dev

二.数据绑定、渲染

1. 所有的内容都要被一个根节点包起来
2. data中定义数据（变量）

data(){
    return{
      taskName:'',
      taskList:[]
    }
  },

3. 根据上面数据渲染单个变量方法：

{{taskName}}

4. 根据上面数据渲染数组方法：

<ul>
     <li v-for="(item,index) in taskList" :key="index">
          <input type="checkbox" v-model="item.done">{{item.name}}<button @click="delTask(index)">删除</button>
     </li>
</ul>

5. 绑定属性 v-bind:属性名=“变量名”，v-bind可以省略掉，直接":"。
6. 双向数据绑定 ：v-model
7. localstorage 本地存储

三.请求数据

1. cnpm install vue-resource --save
2. 全局配置，在main.js 文件中加入：

import VueResource from 'vue-resource'
Vue.use(VueResource)

3. 使用参考：参考网址
4. 使用axios请求数据，参考网址，了解在哪里使用 哪里引入（推荐使用axios）

四.数据传递

1. 通过id传递数据,通过 this.$route.query.collageId方法接收到id，具体如下：

mounted() {
    const url = "http://39.98.205.17:9000/api-task/college/findAll";
    axios.get(url).then(response => {
      this.list = response.data.data;
    });
  }

2. a标签请求id获取数据，具体如下：

<ul>
      <li v-for="(item,index) in taskList" :key="index">
        <div>
          <router-link :to="'/home/major?collageId='+item.id">{{item.name}}</router-link>
        </div>
      </li>
</ul>

3. 效果如下：
   点击“地质大学”
   获取到“地质大学”下面“专业管理”专业名称

五、父子组件传值

一. 子组件获取父组件的值（有三种方法）

第一种.
首先，在子组件中添加title属性，如图所示：

<v-header title="XXX管理系统"></v-header>

然后，在子组件的props方法里面调用title，如图所示：

props: ['title'],

最后，在子组件显示title，如图所示：

<template>
  <div class="header">
      {{title}}
  </div>
</template>

第二种
首先，在父组件的data方法中添加title属性，如图所示：

data() {
        return {
            title:'XXX管理系统'
        };
    },

然后，在子组件中添加title属性，如图所示：

<v-header :title='title'></v-header>

然后，在子组件的props方法里面调用title，如图所示：

props: ['title'],

最后，在子组件显示title，如图所示：

<template>
  <div class="header">
      {{title}}
  </div>
</template>

效果图：
左上角显示“电商管理系统V3.0”

第三种（推荐使用）
首先，在父组件的data方法中添加title属性，如图所示：

data() {
        return {
            title:'XXX管理系统'
        };
    },

然后，在子组件显示title，如图所示：

<template>
  <div class="header">
      {{this.$parent.title}}
  </div>
</template>

二. 子组件调用父组件的方法

首先在父组件的methods方法中添加一个方法，如图所示：

methods: {
        fun(){
            alert('这是个父组件的方法')
        }
    },

然后在子组件中，定义一个按钮调用此方法，如图所示：

<template>
  <div class="header">
      <button @click="this.$parent.fun">访问父组件方法</button>
  </div>
</template>

效果图：

点击“访问父组件方法”弹出子组件方法里数据

三. 父组件调用子组件的数据与方法

1. 在子组件定义属性和方法

data() {
    return {
        msg:'这是来自子组件的一条数据'
    };
  },
  methods: {
      run(){
          alert('这是来自子组件一个属性')
      }
  },

2. 在父组件中定义一个ref属性，如图所示：

<v-header ref="header"></v-header>

3. 在父组件中引用子组件数据与方法，如图所示：

methods: {
        fun(){
            alert(this.$refs.header.msg)
            alert(this.$refs.header.run())
        }
    },

4. 在父组件，定义一个按钮调用此方法，如图所示：

<button @click="fun()">调用子组件数据与方法</button>

效果图：


点击“调用子组件数据与方法” 弹出“这是来自子组件的一条数据”和“这是来自子组件的一个属性”