Vue教程及总结

最新推荐文章于 2022-01-18 17:42:17 发布

原创最新推荐文章于 2022-01-18 17:42:17 发布 · 969 阅读

33 ·

CC 4.0 BY-SA版权

文章标签：

#Vue

Vue 专栏收录该内容

3 篇文章

订阅专栏

准备工作

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

数据绑定、渲染

（1）所有的内容要被一个根节点包起来。

<template>
  <div>
    
  </div>
</template>

（2）data中定义数据（变量）

data() {
    return {
         list: []
    };
  },

（3）渲染单个变量、数组和数据的绑定

绑定属性v-bind:属性名="变量名"，v-bind可以省略掉。
双向数据绑定属性v-model配合input控件使用。
绑定时间v-on:click可以简写成@click.
$event:事件对象可以获取键盘的属性

<template>
    <div>{{name}}</div>//用两个大括号包起来渲染单个变量
    <div>
      <ul>
        <li v-for="(item,index) in list" :key="index">//运用v-for方法来渲染数组
          {{item}}
        </li>
      </ul>
    </div>
</template>
<script>
export default {
    props: {},
    data() {
        return {
		name='xxx'
		list=['张三','李四']
        };
    },
    methods: {},
    components: {},
    mounted() {}
};
</script>
<style scoped lang="scss">
</style>

(4) localstorage本地存储实例

js文件

var storage = {
    set(key, value) {
        localStorage.setItem(key, JSON.stringify(value))//根据key值添加数据
    },
    get(key) {
        return JSON.parse(localStorage.getItem(key))//根据key值获取数据
    },
    del(key) {
        localStorage.removeItem(key)//根据key值删除数据
    }
}
export { storage }

vue文件

<template>
  <div>
    <div>未完成列表</div>
    <input type="text" v-model="name" @keyup="addName($event)">
    <ul>
      <li v-for="(item,index) in nameList" :key="index" v-if="!item.done">
        <input type="checkbox" v-model="item.done" @change="doneTask()">
        {{item.name}}
        <button @click="deleteName(index)">删除</button>
      </li>
    </ul>
    <div>已完成列表</div>
    <ul>
      <li v-for="(item,index) in nameList" :key="index" v-if="item.done">
        <input type="checkbox" v-model="item.done" @change="doneTask()">
        {{item.name}}
      </li>
    </ul>
  </div>
</template>

<script>
import { storage } from "./common/storage";
export default {
  data() {
    return {
      name: "",
      nameList: []
    };
  },
  methods: {
    addName(e) {
      if (e.keyCode == "13") {
        this.nameList.push({ name: this.name, done: false });
        storage.set("nameList", this.nameList);
      }
    },
    deleteName(index) {
      this.nameList.splice(index, 1);
      storage.set("nameList", this.nameList);
    },
    doneTask() {
      storage.set("nameList", this.nameList);
    }
  },
  mounted() {
    if (storage.get("nameList") != null) {
      this.nameList = storage.get("nameList");
    }
  }
};
</script>
<style>
</style>

组件

作用：封装成可重用的代码，相同的功能封装成组件。App.vue是根组件，一般不对跟组件做操作。
一个vue页面是由各种组件构成的，组件之间呈树状结构，又称组件树，如下图所示：
组件三要素：模板、脚本（业务逻辑）、样式。
组件的三步走：引用（import），注册（compoments），使用。
组件声明周期函数，当组件挂载、更新、销毁时触发的函数。
参考：https://cn.vuejs.org/v2/guide/instance.html

路由

作用：动态挂载组件。参考官网：https://router.vuejs.org/zh/

安装 cnpm install vue-router --save
在main.js·文件中引入并使用

import VueRouter from 'vue-router'
Vue.use(VueRouter)

定义路由

const routes={
	{path:'/foo',component:Foo},
	{path:'/bar',component:Bar},
}

创建router实例，然后给roytes配置

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

创建和挂载根实例

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

请求数据

npm install axios --save
使用axios请求数据，参考：https://github.com/axios/axios,哪里使用哪里引用。

动态传值

两种传值方式：
（1）url传参：直接在地址后加？，通过this.$route.query获取。
（2）路由传参：修改路由，例如：xxx/id,通过this.$route.params获取。
两种跳转方式：
（1）标签跳转：<router-link :to="'/home/major?collegeId='+item.id">{{item.name}}</router-link>
（2）js跳转：this.$router.push(``/home/major?collegeId=${id}``)

实例

router.js文件

import VueRouter from 'vue-router'
import Vue from 'vue'
import Home from '../compomons/Home'
import College from '../compomons/College'
import Major from '../compomons/Major'
Vue.use(VueRouter)
const routes = [
  {
    path: '/',
    redirect: '/home/college'
  },
  {
    path: '/home',
    component: Home,
    children: [
      {
        path: 'college',
        component: College,
      },
      {
        path: 'major',
        component: Major,
      }
    ]
  }
]
const router = new VueRouter({
  mode: 'history',
  routes
})
export {router}

Colloge.vue

<template>
  <div>
    <div>学校列表</div>
    <div>
      <ul>
        <li v-for="(item,index) in list" :key="index">
          <router-link :to="'/home/major?collegeId='+item.id">{{item.name}}</router-link>
          <button @click="toMajor(item.id)">{{item.name}}</button>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  props: {},
  data() {
    return {
      list: []
    };
  },
  methods: {
    toMajor(id){
      this.$router.push(`/home/major?collegeId=${id}`)
    }
  },
  components: {},
  mounted() {
    const url = "http://39.98.205.17:9000/api-task/college/findAll";
    axios.get(url).then((response) => {
      this.list = response.data.data
    });
  }
};
</script>
<style scoped lang="scss">
</style>

Header.vue

<template>
    <div class="head">
        学生后台管理系统
    </div>
</template>
<script>
export default {
    props: {},
    data() {
        return {};
    },
    methods: {},
    components: {},
    mounted() {}
};
</script>
<style scoped lang="scss">
.head{
    background-color: bisque;
    height: 40px;
    line-height: 40px;
    padding-left: 20px;
}
</style>

Home.vue

<template>
    <div>
        <v-header></v-header>
        <div>
            <div class="menu">
                <v-menu></v-menu>
            </div>
            <div class="content">
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>
<script>
import Header from './Header'
import Menu from './Menu'
export default {
    props: {
    },
    data() {
        return {
        };
    },
    methods: {
    },
    components: {
        'v-header':Header,
        'v-menu':Menu
    },
    mounted() {
    }
};
</script>
<style scoped lang="scss">
.menu{
    float: left;
    height: 700px;
    widows: 150px;
    border: 1px solid brown;
}
.content{
     float: left;
    height: 750px;
    border: 1px solid cornflowerblue;
}
</style>

Major.vue

<template>
  <div>
    <div>
      <ul>
        <li v-for="(item,index) in list" :key="index">
          {{item.name}}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  props: {},
  data() {
    return {
         list: []
    };
  },
  methods: {},
  components: {},
  mounted() {
      const collegeId=this.$route.query.collegeId
       const url = `http://39.98.205.17:9000/api-task/major/findByCollegeId?collegeId=${collegeId}`;
        axios.get(url).then((response) => {
      this.list = response.data.data
    });
  }
};
</script>
<style scoped lang="scss">
</style>

Menu.vue

<template>
    <div>
        <div>
            <router-link to="/home/college">大学管理</router-link>
            </div>
        <div>
            <router-link to="/home/major">专业管理</router-link>
            </div>
    </div>
</template>
<script>
export default {
    props: {},
    data() {
        return {};
    },
    methods: {},
    components: {},
    mounted() {}
};
</script>
<style scoped lang="scss">
</style>

根组件放置：<router-view></router-view>

父子组件传值

1.父组件指定属性值，子组件使用props属性来接收。
（1）父组件中：

<v-header title="我是标题"></v-header>

（2）子组件中：

<template>
    <div>
        {{title}}
    </div>
</template>

 props: ['title']

2.子组件主动获取父组件的数据和方法：
this.$parent.数据
this.$parent.方法
3.父组件主动获取子组件数据和方法
（1）调用子组件的时候定义一个ref

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

（2）在父组件里面通过
this.$refs.header.属性
this.$refs.header.方法

实例

子组件中：

<template>
    <div class="head">
        {{this.$parent.title}}
        <!-- {{title}} -->
        <button @click="this.$parent.run">调用父组件方法</button>
    </div>
</template>
<script>
export default {
    props: ['title'],
    data() {
        return {
            msg:'这是组件的数据'
        };
    },
    methods: {
        fun(){
            alert('这是父组件的方法')
        }
    },
    components: {
    },
    mounted() {}
};
</script>

<style scoped lang="scss">
.head{
    background-color: bisque;
    height: 40px;
    line-height: 40px;
    padding-left: 20px;
}
</style>

父组件中：

<template>
    <div>
        <button @click="run()">调用子组件的数据和方法</button>
        <v-header ref="header"></v-header>
        <!-- <v-header title="电商管理系统V1.0"></v-header> -->
        <div>
            <div class="menu">
                <v-menu></v-menu>
            </div>
            <div class="content">
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>
<script>
import Header from './Header'
import Menu from './Menu'
export default {
    props: {
    },
    data() {
        return {
            title:'电商管理系统V1.0'
        };
    },
    methods: {
        run(){
            alert(this.$refs.header.msg)
            this.$refs.header.fun()
        }
    },
    components: {
        'v-header':Header,
        'v-menu':Menu
    },
    mounted() {}
};
</script>
<style scoped lang="scss">
.menu{
    float: left;
    height: 700px;
    widows: 150px;
    border: 1px solid brown;
}
.content{
     float: left;
    height: 750px;
    border: 1px solid cornflowerblue;
}
</style>