Vue基础

最新推荐文章于 2024-06-14 10:39:01 发布

YUZHONg_s

最新推荐文章于 2024-06-14 10:39:01 发布

阅读量34

点赞数

分类专栏：前端&&nodejs 文章标签： vue.js javascript 前端 ecmascript 前端框架

本文链接：https://blog.csdn.net/YUZHONg_s/article/details/130764408

版权

前端&&nodejs 专栏收录该内容

53 篇文章 0 订阅

订阅专栏

vue简介：

Vue是我们的前端三大框架之一，Vue是一个渐进式框架。Vue不支持IE浏览器的IE8版本及以下因为Vue里使用了es5的新特性，而IE8不支持es5的新特性。要使用Vue最基础的一件事情就是要去官网上先下载Vue.js。建议在使用Vue进行项目开发时先在谷歌浏览器中安装一个叫：vue devetools的扩展程序。以及在Vs code中下载一个vuter的插件

Vue的基础用法：

设置挂载点，在页面中选择一个标签最为挂载点(最好是div标签)一个页面中只能有一个挂载点，在挂载点中使用Vue提供的方法
然后开始写js代码，首先将Vue实例化：let Vue=new Vue({})
然后在实例化对象里开始Vue的配置：
例：let Vue=new Vue({ el:"选择器(利用class选择器或者id选择器选择到你的挂载点)", data:{ data中是我们的数据 }, methods:{ 在methods中写函数 } })

Vue的指令：

指令是添加在挂载点中的标签上的，指令后的值就是data中的数据

指令配置：v-指令名:配置="值"
指令配置：v-指令名="值"
指令配置：v-指令名.修饰符="值"
修饰符可以添加多个具体看Vue的文档中提供的指令的修饰符

v-text="data中的数据"

这个指令是将data中的数据渲染在拥有该指令的标签上不会解析标签
v-html="data中的数据"

这个指令是将data中的数据渲染在拥有该指令的标签上能解析标签
v-once="data中的数据"

这个指令只会让拥有该指令的标签将data中对应的数据只渲染一次如果再次修改data中的数据那么这里的值不会变
v-prez

这个指令可以让Vue跳过该元素的遍历使Vue的渲染速度更快
v-cloak

这个指令需要配合样式去结合样式去使用，给元素添加v-cloak指令后利用css的属性选择器选择到拥有该指令的标签然后将它的样式设置为display：none,当Vue正常吧把数据渲染出来时V-cloak指令会自动消失
v-show="data中的数据"

这个指令使用这个指令一定是需要在特定的情况下去将元素隐藏或显示来回切换状态，只要给标签加了该指令如果指令后的值为true时则元素显示反之则隐藏
v-if="data中的数据" v-else="data中的数据" v-else-if="data中的数据"

这个指令和js中的if判断一样如果值为false则删除掉拥有该v-if的标签显示v-else的标签
v-for="(num num为(遍历出来的每一项),index(index为每一项的下标)) in 要遍历的data中的数据"

这个指令一般是用来遍历我们的组件中的数据的，当我们在标签中是用v-for时最好在该标签加上一个属性 :key="index" 如果我们遍历的数据中又id的话则用id没有id则用下标
v-on:事件类型="函数名"

这个指令是用来写事件的比如click前边的v-on可以用@代替，后边的函数名是methods中的函数触发该事件时会调用函数，v-on的事件类型后边的函数名要和在触发事件时待用methods中的函数的函数名保持一致。这个指令在组件标签上时不能用的如果要在组件标签上用的话要在事件类型上加修饰符.nactive 。例： @事件类型.nactive
v-bind:属性="data中的数据"

这个指令是用来使用拥有该标签的属性的属性值可以是data中的数据，前边的v-bind可以使用:代替，属性就是该标签的属性比如img标签上的src属性
v-model="data中的数据"

这个指令主要是用来进行数据双向绑定主要是用在表单元素上，当你再表单元素上输入什么那么对应的v-model后边的对应的data中的数据就是什么。

注：指令中还有一个v-slot指令在下面写组件的时候会具体关于v-slot。

vue-cli:

vue-cli简称之为脚手架，它可以帮我们去快速的搭建我们的项目。vue-cli需要配合nodejs去使用

首先我们先新建一个文件夹，然后在该文件夹内打开命令行窗口，使用npm或者cnpm去下载vue-cli:·cnpm install --save-dev @vue-cli

下载完成之后我们就有了vue的命令也可以直接再命令行里输入 Vue -V 去查看我们下载的版本注意最好下载以数字3开头的版本的

然后在命令行中输入vue create 项目名去创建我们的项目，

创建完项目之后会自动给我们生成出来以下几个文件和文件夹。这些文件和文件夹分别有以下作用：

main.js文件相当于入口文件
src文件夹：

src文件夹下又有components文件夹我们就在compownwnts文件夹下写我们的组件

根据个人平常习惯也为了后期维护时比较容易我们一般在componetns文件夹下再新建一个文件夹用来存储我们的静态资源比如图片，css文件，js文件等。
App.vue文件

相当于我们平时的new Vue的挂载点

在完成以上流程后我们就可以在src文件夹下的components文件夹下写写我们的组件文件，我们的组件文件以.vue为后缀然后在该.vue文件后就能生成对应的模板前提是你的Vs code要安装vuetur插件。

在创建完成项目之后我们需要进入到我们的项目的文件夹下打开命令行输入:npm run serve就能运行我们的项目然后我们就可以在我们自己的电脑上打开浏览器输入localhost:8080就能访问到我们的项目，有时候也可能是localhost:8081，这个主要看我们执行完运行项目的命令时命令行窗口提供给我们的网址。

vue组件：

组件时vue中一个很重要的东西

设置组件需要先创建组件配置对象

例:let 组件配置对象名={ template: 这里边是写模板的就是html标签等 };

然后注册组件:

例： Vue.component("组件名",组件配置对象名)

组件配置对象里可以写像在new vue里写上data以及methods等。

但是组件组件配置对象里的data时这样写的:

data(){

return{数据}

}

当我们注册完组件之后就会产生一个组件标签 < 组件配置对象名> < / 组件配置对象名> 然后我们把组件标签放在我们的挂载点里那么挂载点里就会出现我们组件的模板里的内容。

路由组件：vue-router

在写路由组件前就必须先提到一个spa应用

sap应用也就是单页面应用，也就是页面加载时只加载单个页面。在之前当我们的页面的url改变时我们的页面会从一个页面跳转到另一个页面。而我们的spa应用就是当我们页面的url改变时之切换DOM结构而不切换页面。如果觉得我解释的spa应用过于粗糙，简单，请参考：spa应用解释

spa应用是纯前端渲染应用，依赖的架构是MVVM架构就是直接请求数据然后渲染到页面上，还有一种架构是MVC架构是后端渲染应用。

使用前端渲染的优势就是能够是我们的渲染快，开发快，更简单。但是它也有缺点：就是不利于SEO优化，但是SSR可以解决这个问题。

spa应用的路由其实是一个假路由，所谓的假是指相对于后台实现路由来看的，利用页面的url中#后面的值所访问的页面不变内容变的原理。

我们的路由表示的就是一个链接，定义了一个链接应该访问到的页面内容。

上面介绍的那个组件是普通组件在vue中还有以一种组件叫做路由组件,这个路由组件主要是利用页面的hash值来进行页面跳转的，这个hash值就是我们的页面的url湖面的#后面的内容。

路由组件的创建方法就和普通组件一样但是路由组件不需要注册只需写在路由配置里即可，但是我们只能使用< router-view>来渲染路由组件的组件模板，使用< router-link>来表示路由的链接。

如果我们只在html页面中使用vue-router那么我们需要使用< script src="vue-router.js">去进行引入。要是再vue-cli中使用vue-router

下面先写一下在html页面中如何使用vue-router：

先创建路由组件
例:const 变量名={
```
`依旧是在这里写组件模板`
```
}

创建路由配置

例: const routes=[

//不管我们有多个路由组件对象它们所有的配置对象都写在这个数组里即可。

{

path:"/", //这里的/就是主也=页面当我们去做一个项目时是不会只有一个我们还可以写成/xxx那么当我们去切换到/xxx的时候我们的页面不会改变变的只是dom结构
cmponent:相对应的组件的组件名
}

]

创建路由对象
例：const router=new VueRouter({
```
reouts
```
})
把路由组件写在new Vue中

例:new Vue({ el:"", router })
使用router-view将路由组件渲染在页面上

声明式导航：< router-link>< /router-link>:

声明式导航里有一个to属性它的值就是路由配置对象里的path的值，我们可以使用router-link来进行页面的Dom结构切换。如果我们有多个router-link只需写一个router-view即可。

router-link和router-view都属于组件标签如果我们想要在组件标签上使用事件需要加修饰符.native 例:< router-link @事件类型.native="事件函数">

嵌套路由:

嵌套路由就是嵌套在路由组件中的路由组件，首先我们要在父路由组件中的组件模板中写上router-view和router-link用来显示子路由

然后我们在父路由组件的路由配置对象里中这样写添加一个children属性

例：

const router=[

{

path:"/",
component:对应的父路由组件,
children:[//这里边就是子路由的组件配置对象
{
    path:"自定义",
    component:对应的子路由组件
}
]

 }
 ]

这样当我们去访问父路由时子路由不会出现，但是当我们去访问子路由时父路由会出现。另外当子路由的组件配置对象里的path为空时那么我们去访问父亲路由时子路由会渲染到父路由里边。

在vue-cli中使用vue-router：

我们要在vue-cli中使用vue-router时要先使用cnpm去下载vue-router

然后我们可以再main.js文件中去引入vue-router或者新建一个js文件去引入vue-router。最后只要想办法将我们的new Vue-router写在new vue里就好。

注意：在模块化开发中我们只要使用vue的插件时(vue-router就属于vue的插件)都需要vue.use(这里边写你引入的vue的插件)

动态路由：

我们在路由配置里可能会有这种写法：

例:

{
    path:"/index/:自定义属性名",
    component:对应组件的模板
}

这样写无论哪个自定义属性是什么都可以访问该组件。当页面的url改变时对应url渲染的组件不变时，组件里的created不会重新执行所以我们要给router-view加上一个:key属性它的属性值是$route.fullpath，例:

<router-view :key="$route.fullpath"></router-view>

路由对象：$route

路由对象是当前激活路由的状态，我们可以console.log($route)看一下在任何一个组件中都可以获取到$route不区分路由组件和普通组件。vue-router会给我们的每个组件都添加一个$route

$route.query就是我们页面url的#后边的值，

$route.path就是我们页面url的?后边的值。

想要获取到页面上url的?后边的值就使用$route.path

注意同意个组件可能会有不同的$route.path值

我们经常会有这种写法:
 /user?id=1  //这里表示的是用户id为1的个人中心
 /user?id=2 //这里表示的是用户id为2的个人中心

两个都是user所以说这两个地址用的都是同一个组件，同一个组件中可能样式相同但数据不同那么我们就会用$route.path.query来获取参数请求不同的数据。

组件通信：

组件通信时主要用在组件之间互传数据的

在使用组件通信时要先清楚组件之间的关系，如果a组件的组件标签出现b组件的组件模板里(组件配置对象里的template就是组件模板)那么我们称a是b的子组件

下面是三种组件之间的通信方法：

父子通信：

父子通信就是父组件将数据传递给子组件的过程

要使用父子通信需要现在父组件的组件模板中找到子组件标签在子组件标签上添加自定义属性属性值就是你要传递的数据,
例:<子组件标签 :自定义属性名="父组件的data中的数据">< /子组件标签> 然后再子组件的组件配置对象里添加props["刚刚自定义的属性名"]这个props相当于接受了父组件传递过来的数据直接把props里的东西当成data中的数据用即可
子父通信：

子父通信就是最组件将数据传递给父组件的过程

要使用子父通信需要现在子组件的组件模板里选一个html元素然后给该元素绑定事件然后再该事件的事件函数里这样写this.$emit,然后找到父组件的组件模板中的子组件标签在子组件标签上绑定自定义事件<子组件标签 @自定义事件名="事件函数">< /子组件标签>然后在父组件的methods中写上该自定义事件的事件函数这个事件函数里有一个参数就是传递过来的数据
非父子通信:

非父子通信就是两个毫无关系的组件通信的过程

下面这个拿a组件b组件传递数据举例，a组件跟b组件是非父子关系

要使用非父子通信先创建一个公共的new vue实例化
例:let 变量名=new Vue();

然后在a组件中绑定原生事件在事件函数中触发自定义事件

例:刚刚创建公共实例化的变量名.$emit("自定义事件名",传递的数据) 然后再b组件的credted中监听事件

例:刚刚创建公共实例化的变量名.on("自定义事件名",da=>{
```
da就是传递过来的数据
```
})

组件的生命周期：

在vue中我们的组件是有声明周期的大体可分为四个阶段：

创建(create)
更新(uptate)
挂载(mount)
销毁(destory)

这四个时期又被分为八个函数:

创建前

beforeCreate()
创建后

created()
挂载前

beforemount()
挂载后

mounted()
更新前

beforedate()
更新后

updated()
销毁前

beforeDestory()
创建前

destoryed()

这几个都是函数我们可以像之前用created之前那样用，最常用的就是在created中请求数据了，如果我们有计数器这种在全局中存在的东西我们在销毁组件时也要把计时器销毁掉，如果要阻止组件销毁我们可以在beforeDestory中进行操作。

编程式导航：

在我们的router-link中有一个to属性它代表的是将要跳转的组件。然后使用router-view去渲染该组件

像上边这种就是声明式导航，声明式导航只能做跳转不会先执行代码然后进行跳转。而编程式导航能先执行代码再进行跳转下面介绍几个编程式导航的方法：

router.pash()

这个是用来做跳转页面的括号里写"你要跳转的地址"
router.replace()

这个的用法也是用来跳转页面的
router.go()

访问历史记录括号里写数字
router.foward()

前进到下一页

go和foward的括号里都是写数字的如果写的数字过大那么我们的页面将崩溃。

这个编程式导航实际上是在标签里边写点击事件然后通过事件的事件函数去调用上边哪几个方法，如果我们要在vue-cli中使用编程式导航那么我们调用上边那几个方法时则是this.$router.path()

编程式导航最大的优点就是能够在我们进行页面跳转之前先执行代码再进行跳转。

路由拦截：

路由拦截又叫做路由的导航守卫。在Vue的官方文档中给我们提供了很多个路由的导航守卫的方法在这我们就只写一个全局前置守卫：(全局前置守卫也就是当我们去访问任何路由组件时都会被拦截)

全局前置守卫的写法是这样的：

例：

router.beforeEach((to,from,next)=>{
     
 })

我们可以在上面的例子中看到router.beforeEach的括号里边是一个箭头函数，我们也可以写成普通的函数不过为了方便我们还是用箭头函数。箭头函数里边有三个参数，to参数是一个对象表示即将要跳转的路由组件，from也是一个对象表示即将要离开的路由组件

next参数是一个函数我们要在router.beforeEach的箭头函数里边去调用第三个参数如果我们写了next()那么当我们去访问所有的路由组件时都不会被拦截，如果我们这样写next("要跳转的路由组件")那么我们去访问任何路由组件时都会跳转到next里边写的路由组件。这个拦截要结合if判断去使用才会达到我们想要的效果比如：用户未登录就不可以访问个人中心组件。

to参数里的meta和matched：

meta是在to对象里的然后我们可以在路由配置对象里写一个meta属性它的属性值是{}我们可以在对象里去写任意的属性和属性值。然后我们可以通过to.meta去访问。

matchedd这matched是to对象里边的数组我们可以通过to.matched去访问它里边包含了当前组件以及它的父组件和祖先组件的组件信息。

这个meta和matched我们是根据需求才去访问的。

element-ui

element-ui是一个组件库它跟bootstarp很相似，有它写好的样式和组件供我们使用这个主要是用在vue-cli创建的项目中的首先我们需要先使用cnpm下载，下载完成之后我们在main.js中写如下代码:

例：

import elemment-ui from "elemment-ui"
   import "element-ui/lib/theme-chack/index.css"
   vue.use(element-ui)

这样我们就能在vue的项目中根据文档去直接使用element-ui了。

我们可以记住这样一个网站它里边记录了前端开发中常用的框架

Vuex:

Vuex最大的好处就是能够帮助我们去进行组件间复杂的通信，我们在任何组件里都能获取到vuex里的数据。不必要再去进行深层的组件间的通信。

当我们的组件过多时，我们的通信也会越来越复杂这个时候我们就需要用到vuex了。

什么是Vuex？

vuex是vue的一种状态管理，vuex的核心就是store。store就相当于一个容器或者仓库。

当我们在普通的html中使用vuex时我们只需将vuex.js引入即可，如果在vue-cli中使用vuex那么我们就需要使用npm下载下载完成后在main.js中引入然后vue.use以下才能进行使用。

在我们下载和引入完成过后我们需要new一个store对象。然后将store对象放到new vue里边。

例 :

const store=new Vuex.Store({
      state:{
          msg:"数据"    //我们在挂载点中通过$store.state可以获取到这个数据
      }
  })
  const vue=new Vue({
      el:".app",
      store,
      data: {
          mag:"这里是数据"
         }
      }
  })

这个state里边也是数据，我们如果在挂载点里直接通过$store.state就能获取到如果在js中通过this.$store.state就能获取到。

这个store里的state就是一个仓库它里边存储了一些公共的数据，谁想要用到那里边的数据都可以通过$store.state或者$store.state去获取到。

我们可以通过件函数去修改公共仓库里边的内容但是不建议去直接修改仓库里的内容，因为这种改法是不符合规范的。

例：

methods:{
       事件函数(){
           this.$store.state.数据名称="新的内容"   //这种改法是不符合规范的也不建议去使用这种改法
       }
   }

像上面那种直接修改state里边的数据是不符合规范的我们可以通过mutataions去进行修改,也就是下面这种操作：

例：

const store =new Vuex.store({
  
      state:{
          mag:"数据"
      },
     mutations:{
         自定义函数(state,传递过来的参数){
            // state里边包含了就是我们的仓库里的数据我们在这里对state里的数据进行修改
         }
     } 
  }),
  const app=new Vue({
  
      el:".app",
      store,
      methods：{
          事件函数(){
          //我们需要给某个标签绑定原生事件才能通过去触发原生事件去触发自定义函数
              this.$store.commit("上边mumations的自定义函数名",如传递数据则多写一个参数不传则不写)
          }
      }
  })

注意：我们在mutation中是不能直接去请求数据的我们需要通过action去进行请求数据，并将数据处理。

action的用法是这样的：

例：

const store=new Vue.Store({
      state:{
          topics:[]
      },
      mutations:{
          settopics(state,{topic_s}){
                  state.topics=topic_s
          }
      },
      actions:{
          gettopiccs(store){
             //这个store就相当于下边的this.$store
             //这个请求前的return我们可以选择加或者不加如果加了我们就可以在下方的creatde里的 this.$store.dispatch("gettopics")的后边使用.then的操作了也就是请求成功后
            return axios.get("请求数据的地址").then(num=>{
                  store.commit("settopics",{topics:传递的数据})
              })
          }
      }
  })

 const app=new Vue({
 el:".app",
 store,
 created(){
      this.$store.dispatch("gettopics")
 }
 })

这段代码的意思呢就是我们在组件中的任意函数里去调用执行actions里的函数然后通过actions里的函数去请求数据请求数据完成后我们通过事件委托的方式去调用执行mutations的函数将请求到的数据设置给state

注：该文章后续会持续更新

YUZHONg_s

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue基础

vue简介：Vue是我们的前端三大框架之一，Vue是一个渐进式框架。Vue不支持IE浏览器的IE8版本及以下因为Vue里使用了es5的新特性，而IE8不支持es5的新特性。要使用Vue最基础的一件事情就是要去官网上先下载Vue.js。建议在使用Vue进行项目开发时先在谷歌浏览器中安装一个叫：vue devetools的扩展程序。以及在Vs code中下载一个vuter的插件Vue的基础用法：...
复制链接

扫一扫