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"

使用组件的步骤

1. 使用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>

生命周期

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

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

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

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

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

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

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

5. 当数据改变的时候,会调用beforeUpdate函数,将要根据数据变化过后,最新的数据,重新渲染到组件的模板结构,但是还没有渲染到页面上

6. updated()函数阶段,渲染已经得到的数据,完成渲染

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

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

组件之间的数据共享

父组件向子组件共享数据

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

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

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

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

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

子组件向父组件共享数据

1. 在父组件中调用子组件

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

2. 在子组件中通过$emit方法让父组件监听到元素

         this.$emit('numChange', this.number)
   

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

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

兄弟组件中的共享数据

EventBus使用步骤

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

注意

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

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

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

3. 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>
        <component :is="conName"></component>
</keep-alive>

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

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

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

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

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

include

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

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

exclude

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

name

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

对比

1. 组件的注册名称主要应用场景是: 以标签的形式,把注册好的组件渲染和使用到页面结构中去
2. 组件声明的时候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地址与组件之间的对应关系

前端路由的工作方式

1. 用户点击了页面上的路由连接
2. 导致了url地址栏中hash值发生变化
3. 前端路由监听了hash地址的变化
4. 前端路由把当前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 中点击都属于是声明式导航

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

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

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

  if (token) {

   next()

  } else {

   next('/login')

  }

 } else {

  next()

 }

})

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