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”(双大括号) 语法的文本 插值

 Message: {{msg}}

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

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

原始 HTML

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

Using mustaches: {{rawHtml}}
Using v-html directive: 

data(){
    return{rawHtml:"百战"
   }
}

属性 Attribute

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

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 值的时候被渲染。

我是孙猴子

data() {
    return {flag: true}
}

v-else

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

我是孙猴子
你是傻猴子

data() {
    return {flag: false}
}

v-show

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

Hello!

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 则是被迭代的数组元素的别名。

    
{{item.message}}

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

维护状态

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

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

事件处理

监听事件

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

Add 1

data() {
    return {counter: 0}
}

事件处理方法

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

 Greet

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

内联处理器中的方法

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

Say hi
Say
what

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

表单输入绑定

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

Message is: {{message}}

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

修饰符

.lazy

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

Message is: {{message}}

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

.trim

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

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

组件基础

单文件组件

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

加载组件

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

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

第三步：显示组件

组件的组织

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

Props 组件交互

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

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

Prop 类型

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

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

温馨提示

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

自定义事件组件交互

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

组件生命周期

每个组件在被创建时都要经过一系列的初始化过程——例如，需要 设置数据监听、编译模板、将实例挂载到 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>
  

    
      Slide 1
      Slide 2
      Slide 3
    
  

添加指示器