Vue从入门到精通全网最强保姆级教程(持续更新中)

Vue是什么？为什么要学习他

Vue是什么？

Vue是前端优秀框架，是一套用于构建用户界面的渐进式框架

为什么要学习Vue

1 Vue是目前前端最火的框架之一

2 Vue是目前企业技术栈中要求的知识点

3 Vue可以提升开发体验

4 Vue学习难度较低

5 ...

Vue开发前的准备

安装Vue工具 Vue CLI

Vue CLI：Vue.js 开发的标准工具， Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统

npm install -g @vue/cli

安装之后，你就可以在命令行中访问 vue 命令。你可以通过简单运行 vue ，看看是否展示出了一份所有可用命令的帮助信息，来验证它是否安装成功。

 vue --version

创建一个项目

运行以下命令来创建一个新项目

 vue create vue-demo

温馨提示

在控制台中，可以用上下按键调整选择项

在控制台中，可以用空格(spacebar)选择是否选中和取消选中

可以选择默认项目模板，或者选“手动选择特性”来选取需要的特性。

我们选择 Babel 和 Progressive Web App (PWA) Support 两个选项即可

温馨提示

在学习期间，不要选中 Linter / Formatter 以避免不必要的错误提示

Vue目前有两个主流大版本 vue2 和 vue3，我们本套课程选择 vue3 最新版本

配置放在哪里? In dedicated config files 专用配置文件或者 In package.json 在 package.json文件

将其保存为未来项目的预置? y 代表保存，并添加名字， n 不保存

项目创建成功如下提示信息

运行项目

第一步：进入项目根目录 cd vue-demo

第二步：运行 npm run serve 启动项目

安装Vue高亮插件

VSCode中安装 vetur 或者 volar 都可，前者针对Vue2版本，后者针对 Vue3版本

模板语法

文本

数据绑定最常见的形式就是使用“Mustache” (双大括号) 语法的文本插值

 <span>Message: {{ msg }}</span>

一般配合 js 中的 data() 设置数据

export default {
  name: 'HelloWorld',
  data(){
    return{
      msg:"消息提示"
   }
 }
}

原始 HTML

双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令

<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

data(){
    return{
        rawHtml:"<a
href='https://www.itbaizhan.com'>百战</a>"
   }
}

属性 Attribute

Mustache 语法不能在 HTML 属性中使用，然而，可以使用 v-bind 指令

 <div v-bind:id="dynamicId"></div>

data(){
    return{
        dynamicId:1001
   }
}

温馨提示

v-bind: 可以简写成 :

使用 JavaScript 表达式

在我们的模板中，我们一直都只绑定简单的 property 键值，Vue.js 都提供了完全的 JavaScript 表达式支持

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}

这些表达式会在当前活动实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。

<!-- 这是语句，不是表达式：-->
{{ var a = 1 }}
<!-- 流程控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}

条件渲染

v-if

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true 值的时候被渲染。

<p v-if="flag">我是孙猴子</p>

data() {
    return {
        flag: true
   }
}

v-else

你可以使用 v-else 指令来表示 v-if 的“else 块”

<p v-if="flag">我是孙猴子</p>
<p v-else>你是傻猴子</p>

data() {
    return {
        flag: false
   }
}

v-show

另一个用于条件性展示元素的选项是 v-show 指令

<h1 v-show="ok">Hello!</h1>

v-if vs v-show 的区别

v-if 是“真正”的条件渲染，因为它会确保在切换过程中，条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下， v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说， v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好

列表渲染

用 v-for 把一个数组映射为一组元素

我们可以用 v-for 指令基于一个数组来渲染一个列表。 v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。

<ul>
    <li v-for="item in items">{{ item.message}}</li>
</ul>

data() {
    return {
        items: [{ message: 'Foo' }, {
message: 'Bar' }]
   }
}

维护状态

当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一的 key attribute：

<div v-for="(item,index) in items"
:key="item.id|index">
  <!-- 内容 -->
</div>

事件处理

监听事件

我们可以使用 v-on 指令 (通常缩写为 @ 符号) 来监听 DOM 事件，并在触发事件时执行一些 JavaScript。用法为 v-on:click="methodName" 或使用快捷方式 @click="methodName"

<button @click="counter += 1">Add 1</button>

data() {
    return {
        counter: 0
   }
}

事件处理方法

然而许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称。

 <button @click="greet">Greet</button>

methods: {
    greet(event) {
        // `event` 是原生 DOM event
        if (event) {
            alert(event.target.tagName)
       }
   }
}

内联处理器中的方法

这是官方的翻译称呼，其实我们可以直接叫他 "事件传递参数"

<button @click="say('hi')">Say hi</button>
<button @click="say('what')">Say
what</button>

methods: {
    say(message) {
        alert(message)
   }
}

表单输入绑定

你可以用 v-model 指令在表单、<input>、<textarea>及<select>元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件来更新数据，并在某种极端场景下进行一些特殊处理。

<input v-model="message" placeholder="editme" />
<p>Message is: {{ message }}</p>

data() {
    return {
        message:""
   }
}

修饰符

.lazy

在默认情况下， v-model 在每次 input 事件触发后将输入框的值与数据进行同步。你可以添加 lazy 修饰符，从而转为在 change 事件之后进行同步

<input v-model.lazy="message" />
<p>Message is: {{ message }}</p>

data() {
    return {
        message:""
   }
}

.trim

如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符

 <input v-model.trim="message" />

data() {
    return {
        message:""
   }
}

组件基础

单文件组件

Vue 单文件组件（又名 *.vue 文件，缩写为 SFC）是一种特殊的文件格式，它允许将 Vue 组件的模板、逻辑与样式封装在单个文件中

<template>
    <h3>单文件组件</h3>
</template>
<script>
export default {
    name:"MyComponent"
}
</script>
<style scoped>
h3{
    color: red;
}
</style>

加载组件

第一步：引入组件 import MyComponentVue from './components/MyComponent.vue'

第二步：挂载组件 components: { MyComponentVue }

第三步：显示组件

组件的组织

通常一个应用会以一棵嵌套的组件树的形式来组织

Props组件交互

组件与组件之间是需要存在交互的，否则完全没关系，组件的意义就很小了

Prop 是你可以在组件上注册的一些自定义 attribute

<my-componentVue title="标题"/>

<template>
    <h3>单文件组件</h3>
    <p>{{ title }}</p>
</template>
<script>
export default {
    name:"MyComponent",
    props:{
        title:{
            type:String,
            default:""
       }
   }
}
</script>

Prop 类型

Prop传递参数其实是没有类型限制的

props: {
 title: String,
 likes: Number,
 isPublished: Boolean,
 commentIds: Array,
 author: Object,
 callback: Function
}

温馨提示

数据类型为数组或者对象的时候，默认值是需要返回工厂模式

自定义事件组件交互

自定义事件可以在组件中反向传递数据， prop 可以将数据从父组件传递到子组件，那么反向如何操作呢，就可以利用自定义事件实现 $emit

<template>
    <h3>单文件组件</h3>
    <button @click="sendHandle">发送数据
</button>
</template>
<script>
export default {
    name: "MyComponent",
    methods:{
        sendHandle(){
            this.$emit("onCustom","数据")
       }
   }
}
</script>
<style scoped>
h3 {
    color: red;
}
</style>

<template>
  <my-componentVue @onCustom="getData" />
</template>
<script>
import MyComponentVue from
'./components/MyComponent.vue'
export default {
  name: 'App',
  components: {
    MyComponentVue
 },
  methods: {
    getData(data) {
      console.log(data);
   }
 }
}
</script>

组件生命周期

每个组件在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会

为了方便记忆，我们可以将他们分类：

创建时： beforeCreate 、 created

渲染时： beforeMount 、 mounted

更新时： beforeUpdate 、 updated

卸载时： beforeUnmount 、 unmounted

Vue引入第三方

Swiper 开源、免费、强大的触摸滑动插件

Swiper 是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端

Swiper 能实现触屏焦点图、触屏Tab切换、触屏轮播图切换等常用效果

温馨提示

官方文档：https://swiperjs.com/vue

使用国内镜像源:npm config set registry=https://registry.npmmirror.com

安装指定版本: npm instal --save swiper@8.1.6

基础实现

template>
  <div class="hello">
    <swiper class="mySwiper">
      <swiper-slide>Slide 1</swiper-slide>
      <swiper-slide>Slide 2</swiper-slide>
      <swiper-slide>Slide 3</swiper-slide>
    </swiper>
  </div>
</template>
<script>
import { Swiper, SwiperSlide } from
'swiper/vue';
import 'swiper/css';
export default {
  name: 'HelloWorld',
  components: {
    Swiper,
    SwiperSlide,
 }
}
</script>

添加指示器

<template>
  <div class="hello">
  <swiper class="mySwiper"
:modules="modules" :pagination="{ clickable:
true }">
      <swiper-slide>
        <img src="../assets/logo.png"
alt="">
      </swiper-slide>
      <swiper-slide>
        <img src="../assets/logo.png"
alt="">
      </swiper-slide>
      <swiper-slide>
        <img src="../assets/logo.png"
alt="">
      </swiper-slide>
    </swiper>
  </div>
</template>
<script>
import { Pagination } from 'swiper';
import { Swiper, SwiperSlide } from
'swiper/vue';
import 'swiper/css';
import 'swiper/css/pagination';
export default {
  name: 'HelloWorld',
  data(){
    return{
      modules: [ Pagination ]
   }
},
  components: {
    Swiper,
    SwiperSlide,
 }
}
</script>