vue-cli学习

2023-03-02

组件 vue 路由

vue-cli使用1.在终端下运行如命令创建指定名称的项目vuecreate项目名称*创建一个新的cli项目2.vue项目中的src目录构成:1.|assets文件夹:存放项目中的静态资源文件,例如css,图片资源2.|components文件夹程序员封装的,可以复用的组件,都要放到componen

vue-cli使用

1.在终端下运行如命令创建指定名称的项目

vue create 项目名称          * 创建一个新的cli项目

2.vue项目中的src目录构成:

1.| assets 文件夹:存放项目中的静态资源文件,例如css,图片资源
2.|components 文件夹 程序员封装的,可以复用的组件,都要放到components目录下
3.|main.js 项目的入口文件 整个项目的运行,都要先执行main.js
4.|app.vue 是项目的根组件 写的什么结构就会显示什么结构

esline空格语法报错

'space-before-function-paren': ['error', 'never']

组件

默认导出

 export default{} 定义script标签必须要加  
// 导入需要使用的vue组件 
 export default{}

组件里面的this标识当前组件的实例

如果想启用css预编译器 就在style标签后面加上lang="less"

使用组件的步骤

使用import语法导入需要的组件
```
import 组件 from '@/文件目录'
```

2.使用components节点注册组件

export default{ 
components:{
组件
  }
}

components

如果在声明组件时没有为组件指定name名称,则组建的名称默认就是注册时候的名称

3.以标签的形式使用刚才注册的组件

<div> 
<组件></组件>
</div>

注册全局组件

在vue项目的main.js入扣文件中 通过Vue.component()方法可以注册全局组件

示例代码:

import Count from '@/component/Count.vue'

//参数1:字符串格式 表示组件的注册名称 
//参数2:需要被全局注册的文件
Vue.component('MyCount',Count)

父子间的通信传输

props

props是自定义属性,在封装通用组建的时候,合理的使用props可以极大地提高组件的复用性

props是自定义属性 ,数组形式,允许使用者通过自定义属性为当前组件指定初始值

props:['init']

在调用组件的时候通过下面代码,就可以调用自定义属性props的值

<组件 init='props'><组件>

props中的数据可以直接在模板结构中被使用

props是只读属性的不要直接修改props的值,否则会报错

要想直接修改props的值,可以吧props的值转存到data中,用this(指向当前组件),因为data里return的值是可读可写的

props中的default默认值

在声明定义属性是可以通过default来定义属性的默认值,示例代码:

export default{ 
  props{ 
    自定义属性1:{配置选项1}
    自定义属性2:{配置选项2}
    自定义属性3:{配置选项3}
    init{ 
      *如果使用init自定义属性,没有传递默认值,则使用default默认值*
      default:0
    }
  }
}

props的type值类型

export default{ 
  props{ 
    自定义属性1:{配置选项1}
    自定义属性2:{配置选项2}
    自定义属性3:{配置选项3}
    init{ 
      *如果使用init自定义属性,没有传递默认值,则使用default默认值*
      default:0
      *规定props的值类型为number*
      type:Number
    }
  }
}

props的required属性

required属性设置为必填项,如果没有则报错

组件中的样式冲突问题

在每个组件中的style中加入scoped属性,及vue自动帮助在当前组件下所有的标签加入data-v-不同的属性
<style lang="less" scoped><style>

当有使用第三方组件库,并且想修改默认样式的需求,就可以用到/deep/

如果想给引用组件中的样式单独设置属性需要在属性前面加入/deep/ 属性

表示父元素子代选择

<style lang="less" scoped>
.zs {
  padding: 0 20px 20px;
  background-color: lightskyblue;
  min-height: 250px;
  flex: 1;
}
/deep/ h4 {
  color: tomato;
}
</style>

生命周期

实例创建完成,挂载beforeCreate函数

加载的第二个阶段,基本的porps,methods,data都已经加载完成,可以调用created函数

created生命周期函数,经常在他的里面调用methods中的方法,请求服务器的数据,并且把请求中的数据转存到data中,供template使用

注意在created生命周期函数阶段,不能操作dom

基于数据和模板,在内存中编译生成html结构

beforeMount()将要吧内存中编译好的html结构渲染到浏览器中,此时浏览器中还没有当前组件的Dom结构,(几乎没什么意义)

mounted()生命周期函数已经把内存中的html结构渲染到浏览器之中,此时浏览器已经包含当前组件的DOM结构,是最早可以操作DOM的函数

当数据改变的时候,会调用beforeUpdate函数,将要根据数据变化过后,最新的数据,重新渲染到组件的模板结构,但是还没有渲染到页面上
updated()函数阶段,渲染已经得到的数据,完成渲染

当数据发生变化之后,为了能够得到最新的DOM结构,必须将代码写到updated生命周期函数中

beforeDestory()生命周期函数是将要销毁组件,此时尚未销毁,组件还处在正常工作中的状态
destory()组件已经完全销毁!!!

组件之间的数据共享

父组件向子组件共享数据

父组件向子组件共享数据需要使用自定义属性

在父组件中引用子组件子组件添加属性并把需要传入的值赋值到属性上,并在子组件中使用props接收,就可以在子组件中使用父组件的数据

    <Left :mess="message":users="userinfo"></Left>

  props: ['mess', 'users'],

    <p>父组件的message值是{{mess}}</p>
    <p>父组件的userinfo中的name值是{{users.name}}</p>

子组件向父组件共享数据

在父组件中调用子组件

      <Right @numChange="getNewNum"></Right>

在子组件中通过$emit方法让父组件监听到元素
```
      this.$emit('numChange', this.number)
```

在父组件中renturn{数据}然后通过函数方法调用子组件的数据

  return{numFromSon}
  methods: {
    getNewNum(val) {
      this.nunFromSon = val
    },
  },

兄弟组件中的共享数据

EventBus使用步骤

创建enentBus.js模块,并向外共享一个vue的实例对象
在数据发送方,调用bus.$emit('事件名称',要发送的数据)方法触发自定义事件
在数据接收方,调用bus.$on('事件名称','事件处理函数')方法注册一个自定义事件

注意

在接收数据的时候,应该绑定在created()生命周期钩子上

import Vue from 'vue'
export default new Vue()

methods: {
   绑定的事件() {
     bus.$emit('share', this.需要传出的值)
   },
 },

created(val) {
  bus.$on('share', (val) => {
    this.mesFormList = val
  })
},

ref引用

什么是ref引用?

ref用来辅助开发者在不依赖与jquery的情况下,获取DOM元素或者组件的引用

每个vue的组件实力上都包含一个'$'refs对象,里面存储着对应的DOM元素或者组件的引用,默认情况下,组件的$refs指向一个空对象

使用ref

在元素上绑定属性如:

<h1 ref="myh1"></h1>

然后通过vm实例来操作$refs

this.$refs.myh1.style.color="red"

使用ref引用组件实例

使用ref属性为对应的组件添加引用名称

      <Left ref="comLeft"></Left>

然后在父组件中操作this调用refs

    changeLeft() {
      this.$refs.comLeft.num = 0
    },

动态组件

实现动态组件渲染

vue中提供了一个内置的组件,专门用来实现动态组件的渲染

      <component :is="Left"></component>

也可以通过data来定义要渲染的组件

      <component :is="comName"></component>
data(){
return{
//吧left组件动态渲染
comName:'Left'
}
}

标签是vue内置的组件作用是占位符

is属性的是是标识要渲染的组件名字

is属性的值应该是在组件components节点下注册名称

keep-alive的使用">keep-alive的使用

<keep-alive>
        <component :is="conName"></component>
</keep-alive>

keep-alive防止component切换组件被销毁

keep-alive对应的生命周期函数">keep-alive对应的生命周期函数

当组件被缓存时,会自动触发组建的deactivated声明周期函数
当组件被激活时,会自动触发组建的activated声明周期函数

当组件第一次被创建的时候,既会执行created生命周期函数,也会执行activated生命周期函数

当组件被激活时,只会触发activated生命周期不会触发created生命周期函数,因为组件没有重新被创建

include

在keep-alive中include属性可以说明哪些不被展示语法格式如下

      <keep-alive include="Left">
多个组件用逗号隔开

exclude

表示谁不被缓存,不可以和include同时使用

name

当一个组件使用name属性的时候.组建的名称就是name属性的值

对比

组件的注册名称主要应用场景是: 以标签的形式,把注册好的组件渲染和使用到页面结构中去
组件声明的时候name名称主要应用场景是:结合keep-alive标签实现组件缓存功能.以及在调试工具中看到组件的name名称

插槽语法

 <slot></slot>

官方规定每一个slot插槽都有一个name名称

如果省略了slot的name属性,则有一个默认名称叫做default

使用组件的时候,在中间插入标签,都会在slot插槽之中

v-slot命令

v-solt命令只能使用在component组件中或者template标签中

自定义指令

在directives节点下声明私有自定义指令

v-bind

在指令第一次绑定到元素上的时候会立即触发bind函数

update()

在DOM更新的时候会触发update函数

全局自定义指定

全局共享的自定义指令需要通过‘‘value.directive()’'进行声明

路由

什么是前端路由

路由就是hash地址与组件之间的对应关系

前端路由的工作方式

用户点击了页面上的路由连接
导致了url地址栏中hash值发生变化
前端路由监听了hash地址的变化
前端路由把当前hash地址对应的组件渲染到浏览器中

监听hash值的变化

window.onhashchange=()=>{ 
console.log('监听hash地址的变化',location.hash)
}

vue-router插件的使用

npm i vue-router@3.5.2 -S
在src目录下新建router文件夹里面创建index.js路由模块
初始化代码

// 1. 导入Vue和VueRouter 的包 
import Vue from 'vue'
import VueRouter from 'vue-router'

//调用Vue.use()函数 吧VueRouter安装为Vue的插件 

Vue.use(VueRouter)

//创建路由的实例对象 
const router = new VueRouter()

//向外共享路由实例对象 
export default router

在main.js中导入路由模块,然后通过实例对象,进行挂载

//导入路由模块
import router from '@/router/index.js'

new Vue({
  render: h => h(App),
  // router 路由实例对象
  router
}).$mount('#app')

在路由模块(index.js)中导入需要的组件,然后在实例对象中通过routes来定义hash地址与组件之间的对应关系

// 导入需要的组件
import About from '@/components/About.vue'
import Home from '@/components/Home.vue'
import Movie from '@/components/Movie.vue'


//创建路由的实例对象 
const router = new VueRouter({
  // routes是一个数组, 作用是定义hash地址与组件之间的对应关系
  routes: [
    { path: '/home', component: Home },
    { path: '/movie', component: Movie },
    { path: '/about', component: About }
  ]
})

router路由的基本用法

作用就是占位符,只要安装配置了vue-router就可以使用这个组件标签了

 <router-view></router-view>

    <!-- 当配置和安装vue-router了就可以用router-link来替代普通的a链接 -->
    <router-link to="/home">首页</router-link>
    <router-link to="/movie">电影</router-link>
    <router-link to="/about">关于</router-link>

路由的重定向

路由重定向是指用户在访问地址A的时候,强制跳转到地址C,从而展示特定的组件页面,通过路由规则的redirect属性,指定一个新的路由

    { path: '/', redirect: '/home' }

子级路由重定向

  ]
    {
      path: '/about', component: About, redirect: '/about/tab1', children: [
        { path: '/about/tab2', component: Tab2 },
        { path: '/about/tab1', component: Tab1 },
      ]
    },

子级路由默认子路由

如果children数组中,某个路由规则的path值为空,则这条路由规则,就叫做默认子路由

嵌套路由

通过children属性嵌套声明的子级路由规则

router-link声明子级路由时带上父级的路由地址

<router-link to="/about/tab1">tab1</router-link>
    <router-link to="/about/tab2">tab2</router-link>


{
      path: '/about',
      component: About,
      //通过children属性 嵌套声明的子级路由规则
      children: [
        { path: '/about/tab2', component: Tab1 },
        { path: '/about/tab1', component: Tab2 },
      ]
    }

动态路由

动态路由是指吧Hash地址中可变的参数定义为参数项,从而提高路由规则的复用性,在vue-router中使用英文的冒号,来定义陆游的参数项

要想在路由模块中接收到porps传参,需要在配置中加入props:true 开启props传参

    { path: '/movie/:id', component: Movie, props: true },
     组件中加入props数据
     props:['id' ]

this.$route 式路由的参数对象

this.$router 是路由的导航对象

声明式导航和编程式导航

点击链接实现的导航方式叫做声明式导航

普通网页中点击链接 vue 中点击都属于是声明式导航

在浏览器中调用api实现的导航方式,叫做编程师导航

普通网页中调用location.herf跳转到新页面的方式,属于编程式导航

vue-router中的编程式导航

vue-router中的导航方式:

this.$router.push(‘hash地址’)
- 跳转到指定的hash地址,并增加一条历史记录
this.$router.replace(‘hash地址’)
- 跳转到指定的hash地址,并替换掉当前的历史记录
this.$router.go(数值n)
- 在浏览地址中前进或者后退一个页面
- 如果只要前进或者后退一层可以用$router.back()和 $router.forward()

路由守卫

router.beforeEach(function (to, from, next) {

 if (to.path === '/home') {

  *const* token = localStorage.getItem('token')

  if (token) {

   next()

  } else {

   next('/login')

  }

 } else {

  next()

 }

})

vant的使用方法

在cmd中引用插件

然后在index.js中加入

按需引入

import { Button } from 'vant'

Vue.use(Button)

引入样式

import ``'vant/lib/index.css'

深圳幻海软件技术有限公司