小蓝xlanll

这个屌丝很懒，什么也没留下！

热门标签

通俗易懂之Vue_vue通俗易懂

作者：小蓝xlanll | 2024-03-20 00:33:10

踩

vue通俗易懂

Vue的简单介绍

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。（以上是Vue官方文档介绍,如果看着懵逼,可以看下方我自己整理的介绍）

Vue，是现在主流的三大框架之一(Vue/React/Angular),Vue是基于MVVM模式的一种相对轻量级的框架，其核心是通过view-model来实现双向数据绑定来达到驱动页面的效果，大部分程序员在学习框架时都会从vue开始。

Vue需要掌握的几个重要的知识点

VUE安装

VUE有三种安装方法

直接在官网下载vue.js引入使用
需要注意开发环境不要使用最小压缩的版本，不然会没有错误提示和警告

 <!DOCTYPE html>
 <html>
 
 <head>
 	<meta charset="utf-8">
 	<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
 	<script src="./vue.js"></script>
 </head>

 <body>
 		<div id="app">
    	 <p>{{ message }}</p>   //打印 Hello  Vue.js!
 </div>

 <script>
     new Vue({
         el: '#app',
         data: {
             message: 'Hello  Vue.js!'
         }
     })
 </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

使用CDN引入
BootCDN（国内） : https://cdn.bootcss.com/vue/2.2.2/vue.min.js ，（国内不稳定）

unpkg：https://unpkg.com/vue/dist/vue.js, 会保持和 npm 发布的最新的版本一致。（推荐使用）

cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js
```
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
1
```
使用Npm安装
1.首先下载Nodejs,一路点击下一步安装完成，安装完成后会自带Npm。
```
 	在cmd输入 node -v可以查看node是否安装成功
 	同理 npm -v查看npm安装版本
1
2
```
2.npm有时下载会很慢,我们可以在cmd输入 npm i -g cnpm全局安装cnpm

项目的搭建

在学习一个框架时,我们首先要了解的就是如何使用这个框架去搭建一个项目,在Vue中，可以选择vue-cli来搭建项目:
使用vue-cli脚手架 ，vue-cli是vue中基于webpack的快速搭建项目的工具。
要使用vue-cli，首先我们需要配置好它的使用环境：

下载node.js安装到本地然后使用npm或者cnpm全局安装vue-cli (npm install -g @vue/cli)
需要一提的是,@vue/cli是3安装的命令,之前vue-cli2安装的命令是(npm install vue-cli -g) ，创建项目的命令是(vue init webpack 项目名称)
在cmd中使用命令 vue create 项目名称(最好不要起中文) 来自动搭建项目
使用命令后会询问是否切换cnpm（淘宝镜像源）来搭建项目,这个推荐切换。
然后会询问是使用默认生成还是自定义配置，这里推荐选第二个,可以选择自己想要的功能来搭建项目。

然后是详细配置
在这里插入图片描述

  一般我们只需要关掉Linter/Formatter即可 其他的几项配置 在我们熟悉vue之后可选择是否开启
  TypeScript 支持使用 TypeScript 编写程序
  Progressive Web App (PWA) Support PWA 支持，一般PC端是用不到。
  Router 支持 vue-router 。
  Vuex 支持 vuex 。
  CSS Pre-processors 支持 CSS 预处理器。
  Linter / Formatter 支持代码风格检查和格式化。
  Unit Testing 支持单元测试。
  E2E Testing 支持 E2E 测试。
1
2
3
4
5
6
7
8
9

再回车是询问是否保存刚才的配置，一般选第一个就好
再回车是询问是否保存刚才的预设为以后的项目使用，输入y即可
给保存的预设起名字,之后在创建项目可以直接使用这个预设，就不需要在进行上边的操作了
关于history模式,这个模式需要后台配合,所以大部分情况我们选择No 不使用这个模式

Use history mode for router?*******history模式 这个看项目需要，history模式需后端支持，自行考虑
1

选择完了就可以一路回车进行搭建了（so easy!），创建完成如下图

cd my_app 跳转项目文件夹
npm run serve 启动vue项目
启动成功后，在页面输入下边的地址，就可以看到vue首页了

项目目录结构

进入我们创建的项目目录，文件是这样的
在这里插入图片描述

node_modules		npm加载的项目依赖模块
public				静态资源文件夹，这里的东西不会被打包影响
src					我们要开发的目录，里边包含了一些目录和文件夹
						assets: 放置一些图片，如logo等。
						components: 目录里面放了一个组件文件，可以不用。
						App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。
						main.js: 项目的核心文件。
browserslistrc		该文件是对浏览器做限制的,当es6转es5时，选择什么样的浏览器需要进行转换
babel.config.js 	该文件是babel的配置文件，一般用的不多，只是一般，也有可能会用到。
package.json  		管理项目依赖
1
2
3
4
5
6
7
8
9
10

指令

v-show和v-if
v-if是删除和新增dom控制的显示隐藏,v-show是使用css样式控制的显示隐藏。
v-html v-text
v-text 会把变量中的标签当成字符串渲染 v-html 会解析标签，页面上不显示。
v-model
作用:数据双向绑定原理是用到了Object.defineProperty上的set,get方法
v-for
作用:循环循环变量时有两个变量,第一个是数组项,第二个是索引值。
循环对象的时候,有三个变量,第一个是value，第二个key，第三个是索引值。
v-bind
作用:绑定数据可以简写成 :
v-on
作用:绑定事件可以缩写成@ 还可以添加修饰符:
v-on:click.stop v-on:submit.prevent 还可以混用 v-on:submit.stop.prevent
v-once
作用:只渲染一次
v-pre
作用：跳过该元素和他的子元素编译过程,可以用来跳过没有指令的节点加快编译
v-cloak
作用:保持在元素上直到关联实例结束时进行编译

插槽

具名插槽

在组件中定义的具有name属性的插槽,例如：

<!--  组件中 -->
<div>
	<slot></slot>
	<slot name="a"></slot>
	<slot name="b"></slot>
</div>
<!--  组件模板中 -->
<div>
    <组建名>
    <!--  这个内容会替换没有名字的插槽 -->
    abc
    <template v-slot="a">
    <!-- template中的内容会把a插槽替换掉 -->
        <div>这个是a插槽的内容</div> 
    </template>
    <template v-slot="b">
    <!-- template中的内容会把b插槽替换掉 -->
        <div>这个是b插槽的内容</div> 
    </template>
    </组建名>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

作用域插槽

<!--  组件中 -->
<div>
<slot a="a" b="b" :c="变量"></slot>
</div>
<!--  组件模板中 -->
<div>
    <组建名>
    <!--  利用作用域插槽可以拿到插槽中绑定的值 或者变量 绑定的属性可以是自定属性 -->

    <template v-slot="{a, b ,c}"> 
    </template>
    </组建名>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13

组件之间的传值

父组件向子组件传值

在父组件中通过自定义属性绑定要传递的变量
在子组件文件中通过props接收 props的值
props的值可以是一个数组 props: [‘自定义属性’]
props 的值还可以是一个对象 props: {
自定义属性： {
type: 数据类型
required: ‘是否必传’,
default: 默认值
}

}

子组件向父组件传值

在子组件中映射一个自定义事件
例如

<button @click="func"></button>
1

methods: {
    func() {
        this.$emit('自定义事件名'，要传递的参数)
    }
}
1
2
3
4
5

在父组件的子组件注册命中直接@自定义的事件名可以触发对应事件的函数，函数上自带的参数就是传递过来的数据

<组件名 @自定义事件名="函数"></组件名>
1

非父子组建传值

可是使用bus总线
bus总线其实是一个vue的实例化对象
1）可以在main.js 中写 var bus = new Vue() 可以放在根组件的data中
使用传递事件时 this. $r o o t . b u s .$ emit(‘自定义事件’, 传递的参数)
使用监听事件时 this. $r o o t . b u s .$ on(‘自定义事件’, function(传递过来的数据)
2）创建一个 bus.js 文件在文件中 var bus = new Vue() export default bus
在main.js中引入 import bus from ‘bus.js’
vue.propotype.bus = bus
使用 this.bus.$emit(‘自定义事件’, 传递的参数)
使用监听事件时 this.bus.$on(‘自定义事件’, function(传递过来的数据)

生命周期

berforeCreate => created => beforeMounte => mounted => beforeUpdate => updated => activated => deactivated => beforeDestory => destoryed

计算属性(computed)和监听(watch)

watch

监听可以用来监听数据或路由
监听数据时:

data() {
    return {
        count: 0,
        obj: {
            age: 0,
            name: ''
        }
    }
},
watch: {
    count(newVal, oldVal) { // 监听数据变化

    },
    'obj.age': function(newVal, oldVal) { // 监听对象中的某个键值得变化

    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

监听路由时:

watch: {
    '$route': function(to, from) {
        // to 是要进入的页面的路由对象
        // from 是要离开的页面的路由对象
    },
    '$route.path': function(to, from) {
        // to 是要进入的页面的路由对象
        // from 是要离开的页面的路由对象
    }
}
1
2
3
4
5
6
7
8
9
10

computed

computed()

<div>{{num}}</div>
1

 num: function() { // 计算属性开始时只计算一次 只有当里面的依赖数据发生变化的时候才会再次执行
//  比如该函数中的count发生变化的时候才会触发 
     this.count++
     var numVal = this.count
     return numVal
 }
 
1
2
3
4
5
6
7

路由

配置路由对象

在对应的js文件中引入vue-router

import vueRouter from 'vue-router'
import component1 from '组件文件地址'
const routes = [
    {
        path: '',
        name: '',
        component: component1
    }
    {
        path: '',
        name: '',
        component: import (要懒加载的组件文件地址)
    }
]
var router = new vueRouter({
    routes,
    scrollBehavior (to, from, savedPosition) {
        // return 期望滚动到哪个的位置
    }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

动态路由是在路由对象的path的地址中拼接一个 /index/:参数名称
获取动态路由的参数 this.$route.params 可以找到动态路由的参数

声明式路由

直接在页面里面使用

router-link

必传属性 to属性 to属性的值可以是一个地址(字符串) 也就是路由对象配置的path
to的值还可以是一个对象
params 参数只有使用路由对象的name属性跳转时才能使用

<router-link :to="{path: '组件路由地址', query:{键值对}}"></router-link>
<router-link :to="{name: '组件路由对象的name', query:{键值对}}"></router-link>
<router-link :to="{name: '组件路由对象的name', params:{键值对}}"></router-link>
1
2
3

编程式路由

this.$router.push({
    path: '路由对象的path',
    query: {
        键值对
    }
})
this.$router.push({
    name: '路由对象的name',
    query: {
        键值对
    }
})
this.$router.push({
    name: '路由对象的name',
    params: {
        键值对
    }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

路由守卫

全局路由守卫

//  全局前置守卫
beforeEach(function(to, from, next){ // 每次路由跳转之前都会触发
    // to 是要进入的页面的路由对象
    // from 是要离开的页面的路由对象
    // 只有执行了next()函数 路由拦截才会继续往下走
    //  next的参数可以是一个路由对象 也可以是一个地址如果给next传了地址参数 他会跳转到对应的地址页面
    next()
})
//  全局的后置守卫
afterEach(function(to,from) { // 这时候页面已经进入 所以不用next()

})
1
2
3
4
5
6
7
8
9
10
11
12

路由独享守卫

{
    path: '/',
    component: component,
    beforeEnter(to, from, next) { // 进入地址为path 的值得路由的时候才会触发的守卫

    }
}
1
2
3
4
5
6
7

组件内的守卫

//  组件内的前置守卫
beforeRouteEnter(to, from, next) {
    // 注意在该路由守卫中 this的指向不是当前的vue实例化对象
    next(arg => {
        // 这个参数就是vue的实例化对象
    })
}
beforeRouteUpdate(to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 可以访问组件实例 `this`
}
beforeRouteLeave(to, from, next) {
    // 路由离开前触发的守卫
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

Vuex

介绍
vuex是一个专为vue.js应用程序开发的状态管理模式。vuex解决了组件之间同一状态的共享问题。也可以把它当成一个专门存放数据的容器。
使用

首先需要进行安装(使用命令 npm install vuex --save)
在src文件目录新建一个store文件夹,方便引入并在store里新建index.js
然后在index.js里引入,并导出store

	import Vue from 'vue'
	import Vuex from 'vuex'
	Vue.use(Vuex)  在vue中标明使用vuex
	const store =new Vuex.State()
	export  default  store
1
2
3
4
5

在main.js引入store 然后全局注入一下就可以在任何组件中使用this.$store了

import store from './store'
	
	new Vue({
		el:"#app",
		router,
		store
	})
1
2
3
4
5
6
7

属性

state 存放数据
使用方式
1. 可以通过this.$store.state获取属性
2. 在script引入,在computed里使用扩展运算符把数据扩展成计算属性。然后就可以直接使用了。
getters 获取数据的函数集
使用方式
1. 可以通过this.$store.getters.函数名来获取对应的数据
2. 在script引入,在computed里使用扩展运算符把数据扩展成计算属性。然后就可以直接使用
mutations 用来修改数据的函数集
使用方式
1. 可以通过this.$store.commit（‘函数名’,参数）来设置数据
2. 在script引入,在methods里使用扩展运算符把函数扩展出来。然后就可以直接通过this.函数直接使用
actions 用来修改数据的函数集(函数里可以进行异步操作)
和mutation不同的是,actions可以接受一个和this.store一样的参数 context 上边有store上的state，getters，commit
使用方式
1. 可以通过this.$store.dispatch（‘函数’,参数）来设置数据
2. 在script引入,在methods里使用扩展运算符把函数扩展出来。然后就可以直接通过this.函数直接使用。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小蓝xlanll/article/detail/269365