Vue学习笔记

最新推荐文章于 2024-10-20 20:56:38 发布

原创最新推荐文章于 2024-10-20 20:56:38 发布 · 237 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端

前端专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了Vue.js的学习路径，包括使用vue-cli搭建项目，父子组件交互，使用pubsub实现消息订阅，理解slot插槽机制，对比vue-resource和axios的Ajax操作，应用过渡效果和动画，配置vue-router进行路由管理，以及深入Vuex进行状态集中式管理。通过实例讲解，帮助读者全面掌握Vue.js开发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue-cli(vue脚手架)

第一步，安装node.js
node --version 查看node.js版本
npm -v 查看npm版本
第二步，安装vue-cli（可以不指定版本）
npm install -g vue-cli@2.9.6
vue -V 查看vue-cli版本
第三步，新建项目
vue init webpack vue_demo
第四步，启动项目
npm run dev

自定义事件实现父子组件交互

第一种是在标签上绑定事件监听

在父组件中的标签上使用@自定义方法名=“方法名”

<Menu :menus="menus" :webSite="webSite" @addMenu="addMenu"/>

在子组件中使用this.$emit(‘方法名’,形式参数)调用

this.$emit('addMenu',menu)

第二种是用代码动态绑定

在父组件中的标签上使用ref属性获取标签引用

<Menu :menus="menus" :webSite="webSite" ref="menu"/>

并在父组件中定义mounted()方法

mounted () {
  this.$refs.menu.$on('addMenu', this.addMenu)
}

子组件中方法调用方式不变

消息订阅与发布组件pubsub

组件安装命令
npm install --save pubsub-js
引入依赖
import PubSub from 'pubsub-js'
订阅消息(绑定监听)

PubSub.subscribe('add', (msg, data) => {
  this.addMenu(data) // 调用方法实现功能
})

注意：指定回调的时候可以用function，这里推荐使用箭头函数，因为箭头函数的this是当前最上面一层，用function的话this就是PubSub了，两种的作用域是不一样的
发布消息(调用方法)

PubSub.publish('add', menu)

slot插槽

父组件

<slot name="s1">默认插槽内容</slot>

子组件

<div slot="s1">
	版权所有：http://www.xxx.com
</div>

Ajax框架

1.vue-resource

（1）安装命令
npm install vue-resource
（2）全局引入
main.js里
import VueResource from 'vue-resource'
// 声明使用插件底层会给vm和组件对象添加一个属性 $http
Vue.use(VueResource)
（3）使用

this.$http.get(url).then(response => {// 请求成功
	console.log(response.body)
}, response => {// 请求失败
	alert('请求失败')
})

2.axios

（1）安装命令
npm install axios
（2）引入
import axios from 'axios'
哪里使用，哪里引入
（3）使用

axios.get(url).then(response => {
	console.log(response.data)
}).catch(error => {
	alert('请求失败')
}).finally(function () {
		alert('finally')
	}
)

过渡效果

使用<transition></transition>标签和属性name，name随意
样式v-enter-active、v-level-active设置属性transition，样式v-enter、v-level-to设置属性opacity为0，其中v即是name属性值
参考示例

<transition name="fade">
	<p v-if="show">hello</p>
</transition>

.fade-enter-active, .fade-leave-active {
    transition: opacity 1s;
}

.fade-enter, .fade-leave-to {
    opacity: 0; /*opacity透明度，取值范围0-1，0是完全透明，1是完全不透明*/
}

实现过渡效果的6个class切换见下图

以上图片下载自博客http://blog.java1234.com/blog/articles/560.html，仅用于理解vue过渡效果
下图是我对6个class切换的理解

动画

使用<transition></transitiovn>标签和属性name，name随意
样式v-enter-active、v-level-active设置属性animation，定义样式v-in，其中v即name的值
参考示例

<transition name="bounce">
    <div v-if="show" style="width: 216px;height: 74px;">
        <img src="../assets/logo.jpg">
        <div>你好</div>
    </div>
</transition>

.bounce-enter-active {
    animation: bounce-in 1s;
}

.bounce-leave-active {
    animation: bounce-in 2s reverse;
}

@keyframes bounce-in {
    0% {
        transform: scale(0);
    }
    50% {
        transform: scale(1.5);
    }
    100% {
        transform: scale(1);
    }
}

注意：<transition></transition>标签下只能有一个节点

vue路由Router

1.路由使用

第一步，路由组件安装
npm install vue-router --save
初始化项目时已安装则不必
第二步，在目录router下新建index.js，作为路由器配置，内容如下
引入vue
import Vue from 'vue'
引入路由
import Router from 'vue-router'
引入使用到的组件
import Index from '../pages/Index'
import Menu1 from '../pages/Menu1'
因为作为插件使用，所以
Vue.use(Router)
导出Router对象

export default new Router({
    // 配置多个路由
    routes: [
        {
            path: '/index',
            name: 'index',
            component: Index
        },
        {
            path: '/menu1',
            name: 'menu1',
            component: Menu1
        },
        //默认重定向
        {
            path: '/',
            redirect: '/index'
        }
    ]
})

第三步，main.js配置如下

import Vue from 'vue'
import App from './App'
import router from './router'

new Vue({
    el: '#app',
    router: router,
    components: {App},
    template: '<App/>'
})

第四步，使用
设置链接
<router-link to="/index">首页</router-link>
<router-link to="/menu1">菜单1</router-link>
设置展示
<router-view></router-view>

2.路由嵌套

在路由属性children中添加嵌套路由，嵌套路由属性与路由类似
参考示例

···
{
    path: '/menu1',
    name: 'menu1',
    component: Menu1,
    children: [
        {
            path: '/menu1/subMenu1',
            name: 'subMenu1',
            component: SubMenu1
        },
        {
            path: 'subMenu2', // 简化写法，相当于/menu1/subMenu2
            name: 'subMenu2',
            component: SubMenu2
        },
        {
            path: '',
            redirect: '/menu1/subMenu1'
        }
    ]
},
···

嵌套路由的设置链接和设置展示与普通路由类似

3.路由缓存

用<keep-alive></keep-alive>标签包含<router-view></router-view>标签

<keep-alive>
    <router-view></router-view>
</keep-alive>

4.路由组件传参

第一种，param方式
路由配置文件index.js中子组件配置接收参数
path: 'subMenu3/:id'
主组件链接配置传入参数

<router-link :to="`/menu2/subMenu3/${student.id}`">{{student.name}}</router-link>

子组件接收参数的使用
$route.params.id
第二种，query方式
路由配置文件index.js中子组件配置接收参数
path: 'subMenu3'
主组件链接配置传入参数

<router-link :to="`/menu2/subMenu3?id=${student.id}`">{{student.name}}</router-link>

子组件接收参数的使用
$route.query.id

5.编程式路由导航

三种方法使用
push

$router.push(`/menu2/subMenu3?id=${id}`)

replace

$router.replace(`/menu2/subMenu3?id=${id}`)

back

$router.back()

Vuex状态集中式管理

第一步，安装Vuex插件

npm install --save vuex

第二步，新建store.js，参考示例

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const state={
    number: 0
}

const actions={
    increase({commit}){
        commit('increase')
    },
    decrease({commit,state}){
        if (state.number>0){
            commit('decrease')
        }
    },
}

const mutations={
    increase(state){
        state.number++
    },
    decrease(state){
        state.number--
    }
}

const getters={
    oddEven (state) {
        return state.number % 2 === 0 ? '偶数' : '奇数'
    }
}

export default new Vuex.Store({
    state,
    actions,
    mutations,
    getters
})

第三步，main.js引入store.js，参考示例

import Vue from 'vue'
import App from './App'
import store from './store'

new Vue({
    el: '#app',
    components: {App},
    template: '<App/>',
    store
})

第四步，使用，有两种方式
第一种，普通使用

<p>Current number {{$store.state.number}} is {{$store.getters.oddEven}}</p>
<button @click="increase()">+</button>
<button @click="decrease()">-</button>

methods: {
    increase () {
        this.$store.dispatch('increase')
    },
    decrease () {
        this.$store.dispatch('decrease')
    }
}

第二种，简写使用

<p>Current number {{number}} is {{oddEven}}</p>
<button @click="increase">+</button>
<button @click="decrease">-</button>

import {mapState, mapGetters, mapActions} from 'vuex'
computed: {
    ...mapState(['number']),
    ...mapGetters(['oddEven'])
},
methods: {
    ...mapActions(['increase', 'decrease'])
}

需要注意，
对于mapGetter，如果计算属性使用时的名字和store.js中计算属性定义时的名字不一致时，可以写成

...mapGetters({'oddEven':'oddEven2'})

如果有多个计算属性时，名字不一致的需要单独写，参考示例

...mapGetters({'oddEven':'oddEven2'}),
...mapGetters(["newName"])

对于mapState和mapActions同理，变量或方法名字不一致时，需要单独写成map格