通俗易懂之Vue

最新推荐文章于 2024-04-17 15:58:24 发布

沉默的龙王

最新推荐文章于 2024-04-17 15:58:24 发布

阅读量1.2k

点赞数 1

分类专栏：知识整理文章标签： vue

本文链接：https://blog.csdn.net/yyj_ZS/article/details/103652401

版权

知识整理专栏收录该内容

15 篇文章 0 订阅

订阅专栏

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>

使用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>
```
使用Npm安装
1.首先下载Nodejs,一路点击下一步安装完成，安装完成后会自带Npm。
```
 	在cmd输入 node -v可以查看node是否安装成功
 	同理 npm -v查看npm安装版本
```
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 测试。

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

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

选择完了就可以一路回车进行搭建了（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  		管理项目依赖

指令

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>

作用域插槽

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

    <template v-slot="{a, b ,c}"> 
    </template>
    </组建名>
</div>

组件之间的传值

父组件向子组件传值

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

}

子组件向父组件传值

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

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

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

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

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

非父子组建传值

可是使用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) { // 监听对象中的某个键值得变化

    }
}

监听路由时:

watch: {
    '$route': function(to, from) {
        // to 是要进入的页面的路由对象
        // from 是要离开的页面的路由对象
    },
    '$route.path': function(to, from) {
        // to 是要进入的页面的路由对象
        // from 是要离开的页面的路由对象
    }
}

computed

computed()

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

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

路由

配置路由对象

在对应的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 期望滚动到哪个的位置
    }
})

动态路由是在路由对象的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>

编程式路由

this.$router.push({
    path: '路由对象的path',
    query: {
        键值对
    }
})
this.$router.push({
    name: '路由对象的name',
    query: {
        键值对
    }
})
this.$router.push({
    name: '路由对象的name',
    params: {
        键值对
    }
})

路由守卫

全局路由守卫

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

})

路由独享守卫

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

    }
}

组件内的守卫

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

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

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

import store from './store'
	
	new Vue({
		el:"#app",
		router,
		store
	})

属性

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.函数直接使用。

沉默的龙王

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
通俗易懂之Vue

什么是Vue?Vue的简单介绍Vue需要掌握的几个重要的知识点项目的搭建指令插槽具名插槽作用域插槽组件之间的传值父组件向子组件传值子组件向父组件传值非父子组建传值生命周期计算属性(computed)和监听(watch)watchcomputed路由配置路由对象声明式路由router-link编程式路由路由守卫全局路由守卫路由独享守卫组件内的守卫VuexVue的简单介绍Vue (读音 /vjuː...
复制链接

扫一扫