一文入门Vue(初学者+项目急需)

Vue学习经验分享

---

注:本学习经验为项目急需并且之前未接触过Vue的同学准备,仅分享如何使用,并不深入探究原理

一.Vue常用指令

常用指令	作用	常见使用情况
v-for	遍历元素	下拉框
v-show	控制元素的显示与隐藏	从一个组件跳转到另一个组件
v-if	控制元素的创建与销毁	从一个组件跳转到另一个组件
v-model	双向数据绑定	form表单,输入框,下拉框
v-bind	单向数据绑定	所有的地方
v-on	用于绑定事件	@click=‘select()’,@close=‘Xxx()’,@自定义方法名=‘Xxx()’

1.1 注意点:

1. v-show和v-if的区别–v-show:显示、隐藏 , v-if:创建、销毁
2. v-model和v-bind的区别-- v-model:双向绑定 , v-bind: 单项绑定

二.Vue的生命周期(可直接看下面常用的生命周期方法)

通俗的来讲,就是你点击页面到关闭页面这个过程中,必定会执行的一些生命周期方法

2.1 常用的生命周期方法

常用的生命周期方法	频度
mounted	几乎每个页面都会用到
create	较少
beforeDestroy	较少
其他	几乎不用

三.组件的结构

<template>
    //模板
</template>

<script>
    //方法
</script>

<style>
    //样式
</style>

3.1 template

1. html标签
2. vue指令
3. 自定义的组件
4. js方法

3.2 script

1. 文件的引入*
2. vue生命周期的方法
3. js方法

3.3 style

1. 样式

四.组件间的通信

4.1 父子组件间的通信(常用)

4.1.1 父组件向子组件传值(props)

​ 子组件定义要接收的参数,放在props中,父组件将要传递的值通过数据绑定传递给具体的参数

4.1.2 子组件向父组件传值(Event)

​ 父组件通过v-on来监听,子组件通过this.$emit(方法名,要传递的参数)触发父组件监听的方法

4.2 总线通信(推荐)

import Vue from 'vue'
const Bus = new Vue();
export default Bus;
//通过一个空的vue实例作为中央事件总线(事件中心),用它来触发事件和监听事件,巧妙而轻量地实现了任何组件间的通信,包括了父子,兄弟,跨级.

//在需要通信的两个组件中,引用空的vue实例
import Bus from "bus.js的路径";

//在A组件中定义B组件需要监听的bus事件名
Bus.$emit('refresh', '111')     //两个参数，一个是方法名，一个是要传的参数

//在B组件中监听该方法
created() {
    Bus.$on('refresh',(data)=>{
         console.log(data);  //111
     })
 }

4.3 VueX

之后会另外单独写一篇

五. 路由跳转

5.1 route-link

<router-link :to="{name:'home'}"> 
<router-link :to="{path:'/home'}"> //name,path都行
// 注意：router-link中链接如果是'/'开始就是从根路由开始，如果开始不带'/'，则从当前路由开始。
    
    
<router-link :to="{name:'home', path: "home/:id", params: {id:1}}">
// localhost:8080/home
// 取参  this.$route.params.id
// 不配置path页面刷新id就会消失
    
<router-link :to="{name:'home', query: {id:1}}">
// localhost:8080/home?id=1
// this.$route.query.id

5.2 this.$router.push()

this.$router.push({name:'home'}) 
this.$router.push({path:'/home'})

this.$router.push({name:'home',query: {id:'1'}})
this.$router.push({path:'/home',query: {id:'1'}})

this.$router.push({name:'home',params:{id:1}})
// 使用params传参只能使用name  可配置path

5.3 this.$router.replace()

​ 用法同this.$router.push(),效果相同,对history栈影响不同

5.4 this.$router.go(n)

​ 向前或向后跳转n个页面,n为负整数向后,n为正整数向前