前端vue 教程(详细版)

Vue

1. 什么是Vue

Vue是一款渐进式JavaScript框架
  • Vue是一款渐进式JavaScript框架,可以用于构建用户界面。
  • Vue具有简单易学、轻量级、高效、灵活等特点。
  • Vue采用了MVVM模式,通过数据驱动视图的方式实现了组件化开发。
  • Vue具有丰富的生态系统,如Vue Router、Vuex、Vue CLI等。
  • Vue支持服务端渲染、TypeScript等特性,可以满足不同的开发需求。
Vue可以用于构建用户界面
  • Vue是一套用于构建用户界面的渐进式框架,它采用MVVM模式,通过数据驱动视图,并且提供了响应式和组件化的思想,使得开发者可以更加轻松地构建交互式的应用程序。

  • Vue可以用于构建用户界面,它提供了一系列的指令和组件,包括v-bind、v-model、v-if、v-for等等,同时也支持自定义指令和组件。通过这些指令和组件,开发者可以快速地搭建各种类型的用户界面,例如表单、列表、导航等等。

Vue的核心库只关注视图层- Vue的核心库只关注视图层,因此它易于学习和集成到其他项目中。

  • Vue使用虚拟DOM来优化性能,并提供了响应式和组件化的开发方式。
  • Vue支持模板语法和JSX语法,可以与其他库和框架无缝集成。

2. Vue的特点

  1. 渐进式框架
  2. 数据驱动视图
  3. 组件化开发
  4. 轻量级
  5. 易上手

3. Vue的基础语法

模板语法

  • 插值表达式:{{ }}
    <div>{{ message }}</div>
    
  • v-bind指令:将数据绑定到HTML元素的属性上
    <img v-bind:src="imageSrc">
    
  • v-if指令:根据表达式的值的真假来有条件地渲染元素
    <div v-if="isShow">显示的内容</div>
    
  • v-for指令:渲染列表
    <ul>
    <li v-for="item in items">{{ item }}</li>
    </ul>
    
  • v-on指令:绑定事件
    <button v-on:click="handleClick">点击</button>
    
  • 计算属性:computed
    <div>{{ reversedMessage }}</div>
    ...
    computed: {
      reversedMessage: function () {
        return this.message.split('').reverse().join('')
      }
    }
    
  • 监听属性:watch
    watch: {
     message: function (newVal, oldVal) {
       console.log('message changed from', oldVal, 'to', newVal)
     }
    }
    
  • 生命周期:created、mounted、updated、destroyed
    created: function () {
    console.log('组件实例创建完成')
    },
    mounted: function () {
    console.log('组件挂载到DOM上')
    },
    updated: function () {
    console.log('组件更新')
    },
    destroyed: function () {
    console.log('组件销毁')
    }
    
指令
  • v-bind指令:用于绑定属性值,例如绑定src、href等
  • v-model指令:用于实现表单数据的双向绑定
  • v-if指令:用于根据条件判断是否渲染元素
  • v-for指令:用于循环渲染元素
  • v-on指令:用于绑定事件监听,例如@click、@keyup等
  • v-show指令:用于根据条件判断是否显示元素
  • v-text指令:用于将元素的文本内容设置为指定的值
  • v-html指令:用于将元素的HTML内容设置为指定的值
  • v-pre指令:用于跳过指定元素和它的子元素的编译过程,可以用于优化性能
  • v-cloak指令:用于防止页面闪动,可以和CSS配合使用
  • v-once指令:用于只渲染元素一次,不会随着数据的变化而重新渲染
表格语法:
指令名称 描述
v-bind 用于绑定属性值
v-model 用于实现表单数据的双向绑定
v-if 用于根据条件判断是否渲染元素
v-for 用于循环渲染元素
v-on 用于绑定事件监听
v-show 用于根据条件判断是否显示元素
v-text 用于将元素的文本内容设置为指定的值
v-html 用于将元素的HTML内容设置为指定的值
v-pre 用于跳过指定元素和它的子元素的编译过程
v-cloak 用于防止页面闪动
v-once 用于只渲染元素一次
组件
  • 组件

    • 示例1:

      <template>
      <div>
        <h1>{{title}}</h1>
        <p>{{content}}</p>
      </div>
      </template>
      
      <script>
      export default {
      data() {
        return {
          title: '这是标题',
          content: '这是内容'
        }
      }
      }
      </script>
      
    • 示例2:

      <template>
       <div>
         <input v-model="message">
         <p>{{message}}</p>
       </div>
      </template>
      
      <script>
      export default {
       data() {
         return {
           message: ''
         }
       }
      }
      </script>
      
生命周期
  • 生命周期

    Vue实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染、更新、卸载等一系列过程,我们称这是Vue的生命周期。常用的生命周期有以下几种:

    1. beforeCreate:在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用。

    2. created:实例已经创建完成之后被调用。在这一步,实例已完成以下的配置:数据观测(data observer),属性和方法的运算,watch/event事件回调。然而,挂载阶段还没开始,$el属性目前不可见。

    3. beforeMount:在挂载开始之前被调用:相关的render函数首次被调用。

    4. mounted:el被新创建的vm.$el替换,并挂载到实例上去之后调用该钩子。

    5. beforeUpdate:数据更新时调用,发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态,不会触发附加的重渲染过程。

    6. updated:由于数据更改导致的虚拟DOM重新渲染和打补丁,在这之后会调用该钩子。

    7. beforeDestroy:实例销毁之前调用。在这一步,实例仍然完全可用。

    8. destroyed:实例销毁之后调用。此时,所有的指令都已经解绑,所有的事件监听器都已经移除,所有的子实例也已经被销毁。

计算属性
  • 计算属性

    <template>
      <div>
        <p>{{ message }}</p>
        <p>{{ reversedMessage }}</p>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          message: 'Hello World'
        }
      },
      computed: {
        reversedMessage() {
          return this.message.split('').reverse().join('')
        }
      }
    }
    </script>
    

    这里我们定义了一个计算属性reversedMessage,它返回的是message的反转字符串。在模板中,我们可以直接使用reversedMessage,而不需要在模板中写逻辑代码来实现反转字符串的功能。计算属性的值会被缓存,只有在相关依赖发生改变时才会重新求值。

监听器- 监听器的基本用法:
var vm = new Vue({
  data: {
    message: 'Hello'
  },
  watch: {
    message: function (newVal, oldVal) {
      console.log('newVal: ', newVal, ' oldVal: ', oldVal)
    }
  }
})
  • 深度监听:

    var vm = new Vue({
      data: {
        obj: {
          a: 1
        }
      },
      watch: {
        'obj.a': function (newVal, oldVal) {
          console.log('newVal: ', newVal, ' oldVal: ', oldVal)
        }
      }
    })
    
  • 立即执行监听器:
    var vm = new Vue({
      data: {
        message: 'Hello'
      },
      watch: {
        message: {
          handler: function (newVal, oldVal) {
            console.log('newVal: ', newVal, ' oldVal: ', oldVal)
          },
          immediate: true
        }
      }
    })
    

4. Vue的进阶用法

自定义指令
  • 自定义指令

    // 注册一个全局自定义指令 `v-focus`
    Vue.directive('focus', {
    // 当绑定元素插入到 DOM 中。
    inserted: function (el) {
      // 聚焦元素
      el.focus()
    }
    })
    
    // 局部注册一个自定义指令
    directives: {
    focus: {
      // 指令的定义
      inserted: function (el) {
        el.focus()
      }
    }
    }
    
插件
  • 插件:
    • Vue Router:Vue.js官方的路由管理器,用于构建单页应用程序。
    • Vuex:Vue.js官方的状态管理库,用于集中管理应用程序的所有组件的状态。
    • Vue CLI:Vue.js官方提供的脚手架工具,用于快速构建Vue.js应用程序。
    • Vue Test Utils:Vue.js官方提供的测试工具库,用于编写单元测试和集成测试。
    • Element UI:一套基于Vue.js的组件库,提供了丰富的UI组件和交互效果。
    • Vue-i18n:Vue.js官方提供的国际化插件,用于实现应用程序的多语言支持。
    • Vue-meta:Vue.js官方提供的用于管理页面元信息的插件,可以方便地设置页面的标题、关键字、描述等信息。
    • Vue-lazyload:一款用于实现图片懒加载的插件,可以提高页面的加载速度和用户体验。
    • Vue-axios:Vue.js官方推荐的用于发起HTTP请求的插件,可以方便地与后端API进行交互。
    • Vue-socket.io:一款用于实现WebSocket通信的插件,可以实现实时通信和数据交互。
Mixin混入
  • Mixin混入

    Mixin是一种Vue提供的可重用功能的方式,它允许我们将一组组件选项合并为一个单独的对象,然后将其用作多个组件中的选项。这使得我们可以在多个组件之间共享相同的选项,从而避免了重复代码的出现。

    // 定义一个mixin对象
    const myMixin = {
      created() {
        console.log('mixin created')
      },
      methods: {
        foo() {
          console.log('mixin foo')
        }
      }
    }
    
    // 在组件中使用mixin
    export default {
      mixins: [myMixin],
      created() {
        console.log('component created')
      },
      methods: {
        bar() {
          console.log('component bar')
        }
      }
    }
    

    在上面的例子中,我们定义了一个名为myMixin的mixin对象,它包含了一个created钩子函数和一个名为foo的方法。然后,我们在组件中使用mixins选项将myMixin混入到组件中。最终,组件中包含了myMixin中定义的选项,同时也保留了组件自身的选项。

    当组件和mixin中含有相同的选项时,组件的选项会覆盖mixin中的选项。如果我们希望在组件中调用mixin中的方法,可以使用$emit来触发mixin中的方法。

    export default {
      mixins: [myMixin],
      created() {
        this.$emit('foo')
      }
    }
    
过渡和动画
  • Vue过渡的基本用法
    <transition>
    <p v-if="show">hello</p>
    </transition>
    
  • Vue过渡的CSS类名
    <transition name="fade">
     <p v-if="show">hello</p>
    </transition>
    
  • Vue过渡的JS钩子函数
    <transition
      v-on:before-enter="beforeEnter"
      v-on:enter="enter"
      v-on:after-enter="afterEnter"
      v-on:enter-cancelled="enterCancelled"
    >
      <p v-if="show">hello</p>
    </transition>
    
  • Vue动画的基本用法
    <transition name="fade" mode="out-in">
     <p :key="message">{{ message }}</p>
    </transition>
    
  • Vue动画的JS钩子函数
    <transition
     v-on:before-enter="beforeEnter"
     v-on:enter="enter"
     v-on:after-enter="afterEnter"
     v-on:enter-cancelled="enterCancelled"
    >
     <p :key="message">{{ message }}</p>
    </transition>
    
  • Vue动画的多个元素动画
    <transition-group name="list" tag="ul">
    <li v-for="item in items" :key="item">{{ item }}</li>
    </transition-group>
    
  • Vue动画的自定义CSS类名
    <transition
     name="fade"
     enter-active-class="animated fadeIn"
     leave-active-class="animated fadeOut"
    >
     <p v-if="show">hello</p>
    </transition>
    
  • Vue动画的自定义JS钩子函数
    <transition
      v-on:before-enter="beforeEnter"
      v-on:enter="enter"
      v-on:after-enter="afterEnter"
      v-on:enter-cancelled="enterCancelled"
      v-on:before-leave="beforeLeave"
      v-on:leave="leave"
      v-on:after-leave="afterLeave"
      v-on:leave-cancelled="leaveCancelled"
    >
      <p v-if="show">hello</p>
    </transition>
    

路由

  • 路由基础使用示例:
// 安装路由
npm install vue-router --save

// 引入路由
import VueRouter from 'vue-router'

// 配置路由
const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/about',
      component: About
    }
  ]
})

// 注册路由
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')
  • 路由嵌套使用示例:
// 配置路由
const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Home,
      children: [
        {
          path: 'child',
          component: Child
        }
      ]
    }
  ]
})
  • 动态路由使用示例:
// 配置路由
const router = new VueRouter({
  routes: [
    {
      path: '/user/:id',
      component: User
    }
  ]
})

// 跳转路由
this.$router.push('/user/123')
  • 命名路由使用示例:
// 配置路由
const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Home,
      name: 'home'
    }
  ]
})

// 跳转路由
this.$router.push({ name: 'home' })
  • 路由传参使用示例:
// 配置路由
const router = new VueRouter({
  routes: [
    {
      path: '/user/:id',
      component: User
    }
  ]
})

// 跳转路由
this.$router.push({ path: '/user/123', query: { name: '张三' } })

// 接收参数
this.$route.params.id // 123
this.$route.query.name // 张三
  • 路由懒加载使用示例:
// 配置路由
const router = new VueRouter({
  routes: [
    {
      path: '/user',
      component: () => import('./User.vue')
    }
  ]
})
  • 路由守卫使用示例:
// 全局前置守卫
router.beforeEach((to, from, next) => {
  // 判断是否登录
  if (to.path !== '/login' && !isLogin) {
    next('/login')
  } else {
    next()
  }
})

// 全局后置守卫
router.afterEach((to, from) => {
  // 统计PV
  pv++
})

Vuex状态管理- Vuex状态管理

Vuex是Vue的官方状态管理库,用于管理应用程序的所有组件的状态。它将应用程序的状态集中存储在一个单一的地方,使得状态变化更容易跟踪和调试。以下是一个简单的Vuex状态管理的示例:

// 定义一个Vuex store
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  },
  getters: {
    doubleCount(state) {
      return state.count * 2
    }
  }
})

// 在Vue组件中使用Vuex
<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double count: {{ doubleCount }}</p>
    <button @click="incrementCount">Increment count</button>
  </div>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.state.count
    },
    doubleCount() {
      return this.$store.getters.doubleCount
    }
  },
  methods: {
    incrementCount() {
      this.$store.commit('increment')
    }
  }
}
</script>

在上面的示例中,我们定义了一个简单的Vuex store,包含一个状态count和一个increment的mutation,用于增加count的值。我们还定义了一个incrementAsync的action,用于异步增加count的值。最后,我们定义了一个doubleCount的getter,用于计算count的两倍。在Vue组件中,我们使用computed属性获取状态和getter的值,并使用methods属性触发mutation。

5. Vue的生态系统

Vue CLI

  • Vue CLI是一个官方提供的基于命令行的工具,用于快速搭建Vue.js项目。
  • 它可以帮助我们生成Vue项目的基础结构,包括webpack配置、路由、状态管理等。
  • Vue CLI还提供了丰富的插件和预设选项,可以帮助我们轻松地集成其他工具和库,如Babel、TypeScript、ESLint等。
  • 除了创建新项目,Vue CLI还可以用于管理已有的Vue项目,提供了各种命令和选项,如构建、测试、部署等。
  • 总的来说,Vue CLI是Vue生态系统中必不可少的工具之一,可以大大提高我们的开发效率。

Vue Router

  • Vue Router 是 Vue.js 官方的路由管理器,它和 Vue.js 的核心深度集成,让构建单页应用变得易如反掌。它能快速地帮助你构建一个单页应用,同时基于 Vue.js 官方的 API,让你可以非常方便地进行路由配置。
  • Vue Router 支持路由的嵌套和组件的懒加载,还有多种导航钩子,让你可以更好地控制路由的跳转。

Vuex

  • Vuex状态管理库
    • 官方文档:https://vuex.vuejs.org/
    • Vuex入门教程:https://www.runoob.com/w3cnote/vuex-learn.html
    • Vuex实战:https://juejin.im/post/5c9f5b9e6fb9a05e3c6fdafe
  • Vuex辅助库
    • Vuex-persistedstate:https://www.npmjs.com/package/vuex-persistedstate
    • Vuex-router-sync:https://www.npmjs.com/package/vuex-router-sync
  • Vuex案例
    • Vuex购物车:https://github.com/bailicangdu/vue2-manage
    • Vuex电商平台:https://github.com/one-pupil/Vue-Shop
    • Vuex音乐播放器:https://github.com/uncleLian/vue-music

Vue Test Utils

  • Vue Test Utils是Vue.js官方提供的单元测试实用工具库,它可以帮助我们更轻松地编写和运行测试用例,提高我们代码的质量和稳定性。
  • 通过Vue Test Utils,我们可以模拟用户的交互行为,如点击、输入等,来测试组件的行为和状态。
  • Vue Test Utils还提供了一些辅助函数和工具,如mount、shallowMount等,用于创建和渲染组件实例,方便我们进行测试。
  • 除了Vue Test Utils,还有一些第三方的测试工具库,如Jest、Mocha等,也可以与Vue.js进行集成,提供更全面的测试解决方案。

Element UI

  • Element UI 是一套基于 Vue 2.0 的桌面端组件库,提供了丰富的组件和多样化的主题,可以帮助开发者快速构建出美观、易用的界面。
  • 示例代码:



Vuetify
  • Vuetify是一个基于Vue.js的UI框架,提供了丰富的组件和样式,可以帮助开发者快速构建美观的Web应用。
  • Vuetify完全遵循Material Design规范,提供了大量的Material Design风格的组件,如按钮、卡片、表格、对话框等等。
  • Vuetify还提供了一些高级的组件,如数据表格、时间轴、日历、文件上传等等,可以大大提高开发效率。
  • Vuetify还支持自定义主题,可以根据自己的需求轻松定制应用的外观。
  • Vuetify的文档非常详细,提供了丰富的示例和API文档,方便开发者学习和使用。

Ant Design Vue- Ant Design Vue:Ant Design Vue是蚂蚁金服开发的一套基于Vue.js的UI组件库,它提供了一系列常用的UI组件,如按钮、表单、表格、弹窗等,可以帮助开发者快速构建美观、易用的Web应用。Ant Design Vue还提供了丰富的主题定制功能,可以让开发者根据自己的需求定制出符合自己品牌风格的UI组件。

6. Vue的优缺点

6.1 优点

渐进式框架,易于学习和使用

  • 渐进式框架:Vue是一个渐进式框架,可以根据项目需求进行逐步引入,而不是一次性引入所有功能,从而提高了项目的可维护性和可扩展性。
  • 易于学习和使用:Vue的语法简单易懂,文档详尽,上手容易,对于初学者来说是一款非常友好的框架。

数据驱动视图,提高开发效率

  • 数据驱动视图,提高开发效率
    • 示例:Vue通过数据绑定的方式将数据和视图进行关联,只需要关注数据的变化,视图会自动更新,大大提高了开发效率。

组件化开发,易于维护和复用

  • 组件化开发:Vue采用组件化开发的方式,将页面拆分成多个组件,每个组件只关注自身的逻辑和样式,提高了代码的可读性和可维护性,同时也方便了组件的复用。

  • 易于维护和复用:Vue提供了丰富的API和插件,使得开发者可以快速地构建可复用的组件和模块,同时也方便了项目的维护和升级。

轻量级,加载速度快- 轻量级:Vue.js 只关注视图层,因此它是一个轻量级的框架。它不像 Angular 那样臃肿,因为它使用了虚拟 DOM,可以快速渲染视图并提高性能。

  • 加载速度快:Vue.js 的文件大小只有 20KB 左右,因此它可以快速加载并运行。这使得 Vue.js 成为构建单页面应用程序(SPA)的理想选择。

6.2 缺点

对SEO不友好

  • 对SEO不友好

    由于Vue是在客户端渲染的,而搜索引擎爬虫只会抓取HTML,因此Vue的SEO不如服务器端渲染的网站,需要进行额外的处理才能提升SEO效果。

相对于React,生态系统不够完善

  • 相对于React,生态系统不够完善:Vue的生态系统相对于React来说还不够完善,因此在一些方面可能会存在一些不便之处。比如在React中,有很多成熟的第三方库可以使用,而Vue的第三方库相对较少,这就需要开发者自己去寻找解决方案或者自己动手写代码实现。

对于大型应用,需要额外的状态管理工具- 对于大型应用,需要额外的状态管理工具:

例如,Vuex 是一个专门为 Vue.js 应用程序开发的状态管理库。当应用程序变得非常大且复杂时,Vue.js 可能不足以处理所有状态。在这种情况下,您可以使用 Vuex 来管理应用程序的状态。

以上是关于Vue的大纲,希望能对你有所帮助。

你可能感兴趣的:(vue.js,前端,javascript)