您现在的位置是：首页 > 技术教程 正文

vue核心语法(超详细)

admin 阅读： 2024-04-01
后台-插件-广告管理-内容页头部广告（手机）

01_认识Vuejs

  • 全称是Vue.js或者Vuejs。
  • 基于标准HTML，CSS和JavaScript构建，并提供了一套声明式的、组件化的编程模型。

什么是渐近式框架？

  • 表示我们可以在项目中一点点来引入和使用Vue，而不一定需要全部使用Vue来开发整个项目。

02_引入Vue的方式

方式一 ： CDN引入
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  • 1
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> <div id="app">{{ message }}</div> <script> const { createApp } = Vue createApp({ data() { return { message: 'Hello Vue!' } } }).mount('#app') </script>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
方式二：下载Vue的JavaScript文件，手动引入
方式三： npm 包管理下载

npm init vue@latest

方式四：通过Vue CLI创建项目，并使用

03_声明式和命令式编程

声明式和命令式是两种编程规范。Vue是声明式的，Jquery那样直接操作DOM是命令式

  • 声明式就像你告诉你朋友画一幅画，你不用管他画的细节
  • 命令式就像按照你的命令，一步步把画画出来

换言之：

  • 声明式编程：告诉 “机器”你想要的是什么，让机器想出如何去做。
  • 命令式：命令 “机器” 如何去做事情，这样不管你想要的是什么，他都会按照你的命令去实现。
03-1 MVVM模型
  1. **MVVM是前端视图层的概念，**主要关注于视图层分离，也就是说：MVVM把前端的视图层，分成了三部分

Model ， View ，ViewModel ,

  1. 主要把每个页面，分成了M，V，VM，其中 M对应Model ， V对应View , VM对应ViewModel

M:里面保存的是每个页面中单独的数据，比如页面中有一个table表格，而这个table表格需要发送axios请求，服务器会返回一个数据，这个数据可能是对象，也可能是数组，这个返回的数据就是M
**V:每个页面中的html页面结构 **
VM：**它是一个调度者(中间层)，分割了M和V ，**我们的数据需要渲染到页面中，不能直接渲染，需要调用VM，也就是M层的数据需要渲染到V的页面中去，必须经过VM层做处理

MVVM好处：

前端页面中使用MVVM的思想，主要是为了让我们开发更加方便，因为MVVM提供了数据的双向绑定，注意：数据的双向绑定时VM提供的

04_选项式 API (Options API)

选项式 API ，我们可以用包含多个选项的对象来描述组件的逻辑，例如 data 、methods 和 mounted。选项所定义的属性都会暴露在函数内部的this上，它会指向当前的组件实例。

props

用于接收父组件传递过来的属性
详细说明：
props 会暴露到 this上
示例：

export default { props: ['foo'], created() { // props 会暴露到 `this` 上 console.log(this.foo) } }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

除了使用字符串数组来声明 prop 外，还可以使用对象的形式：

export default { props: { title: String, likes: Number } }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
data

用于声明组件初始化响应式状态的函数。
详细说明：
data函数应当返回一个普通JavaScript对象，Vue会将它转换为响应式对象。实例创建后。可以通过this. d a t a 访问该响应式对象。组件实例也代理了该数据对象上的所有属性，因此 t h i s . a 等价于 t h i s . data 访问该响应式对象。组件实例也代理了该数据对象上的所有属性，因此this.a 等价于 this. data访问该响应式对象。组件实例也代理了该数据对象上的所有属性，因此this.a等价于this.data.a
示例：

Vue.createApp({ data() { return { count: 100 } }, // 生命周期 函数 created() { console.log(this.count) // 100 console.log(this.$data.count) // 100 }, }).mount("#app")
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

注意：
在Vue2.x的时候，data是一个对象
在Vue3.x的时候，必须传入一个函数

methods

用于声明要混入到组件实例中的方法
详细说明：
声明的方法可以直接通过组件实例访问，或者在模板语法表达式中使用。所有的方法都会将它们的this 上下文自动绑定为组件实例。
示例：

export default { data() { return { a: 1 } }, methods: { plus() { this.a++ } }, created() { this.plus() console.log(this.a) // => 2 } }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

注意：在声明方法时避免使用箭头函数，因为它们不能通过this访问组件实例

computed

用于声明要在组件实例上暴露的计算属性。
详细说明：
该选项接收一个对象，其中键是计算属性的名称，值是一个计算属性getter，或一个具有get和set方法的对象（用于声明可写的计算属性）。
image.png
注意：如果你为计算属性使用了箭头函数，则 this 不会指向该组件实例，可以通过该函数的第一个参数来访问。

export default { computed: { aDouble: (vm) => vm.a * 2 } }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
computed的set和get
export default { data() { return { a: 1 } }, computed: { // 只读 aDouble() { return this.a * 2 }, // 可写 aPlus: { get() { return this.a + 1 }, set(v) { this.a = v - 1 } } }, created() { console.log(this.aDouble) // => 2 console.log(this.aPlus) // => 2 this.aPlus = 3 console.log(this.a) // => 2 console.log(this.aDouble) // => 4 } }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29

image.png

methods和computed区别

computed:

  • 调用直接以对象属性方式调用，不需要加括号。
  • 有缓存，也就是说当计算结果不变时，该函数只会调用一次，提高了运行速度。
  • 必须有返回值。

methods：

  • 调用要加括号，以方法的形式调用。
  • 没有缓存，调用相同的值还是会重新计算。
watch

用于声明在数据更改时调用的侦听回调。

基本使用

image.png

监听复杂数据
<script> export default { name: "Home", data() { return { person: { name: "" } }; }, watch: { "person.name": { handler(newVal, oldVal) { console.log(`新的值: ${newVal}`); console.log(`旧的值: ${oldVal}`); }, } }, }; </script>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
immediate (立即处理 进入页面就触发)
<template> <div> 输入: <input type="text" v-model="text"> </div> </template> <script> export default { name: "Home", data() { return { text: "", }; }, watch: { text: { handler(newVal, oldVal) { }, immediate: true } }, }; </script>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
deep 深度监听
<script> export default { name: "Home", data() { return { person: { name: "" } }; }, watch: { person: { handler(newVal, oldVal) { }, deep: true } }, }; </script>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

05_模板语法

Mustache语法

最基本的数据绑定形式是文本插值，Mustache里面可以写入表达式
示例：

<!-- 基本使用 --> <h2>{{count}}</h2> <!-- 表达式 --> <h2>{{ count * 2 }}</h2> data() { return { count: 100 } }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
常见的基本指令
v-once指令

仅渲染元素和组件一次，之后跳过渲染，可以用来优化更新时的性能。
示例：

<h2 v-once>{{message}}</h2>
  • 1
v-text指令

更新元素的文本内容
绑定值类型：string
详细说明：
v-text通过设置元素的textContent属性来工作，因此它将覆盖元素中所有现有的内容。如果你需要更新 textContent 的部分，可以使用 Mustache 语法 两者是一样的
示例：

<h2 v-text="message"></h2> <!-- 等同于 --> <h2>{{message}}</h2>
  • 1
  • 2
  • 3
v-html指令

用法和v-text是一样的，区别在于v-html可以解析html元素

v-pre指令

跳过该元素及其所有子元素的编译。也就是一次都不编译。
详细说明：
元素内具有 v-pre ，所有 Vue 模板语法都会被保留并按原样渲染。
示例：

<span v-pre>{{ this will not be compiled }}</span>
  • 1
v-cloak指令

用于隐藏尚未完成编译的DOM模板
详细说明：
该指令只在没有构建步骤的环境下需要使用。
当使用直接在DOM中书写的模板时，可以会出现一种叫做 “未编译模板闪现” 的情况：用户可能先看到的是还没有编译完成的双大括号标签，直到挂载的组件将它们替换为实际渲染的内容。v-cloak 会保留在所绑定的元素上，直到相关组件实例被挂载后才移出。配合像 [v-cloak] { display: none } 这样的 CSS 规则。
示例：

[v-cloak] { display: none; }
  • 1
  • 2
  • 3
{{ message }}
  • 1
  • 2
  • 3
v-bind绑定属性

动态的绑定一个或多个 attribute，也可以是组件的prop。
缩写： : 或者 . (当使用.prop修饰符)
绑定值类型：any (带参数) | object (不带参数)
修饰符：

- .camel - 将短横线命名的attribute转变为驼峰式命名 - .prop - 强制绑定为 DOM property - .attr - 强制绑定为 DOM attribute
  • 1
  • 2
  • 3

_用途： _
当用于绑定 class 或 style attribute, v-bind 支持额外的值类型如数组或对象。

绑定基本属性：
<!-- 绑定 img 的 src --> <img v-bind:src="imgurl"> <img :src="imgurl"> <!-- 绑定 a 的 href --> <a v-bind:href="baidu">百度一下</a>
  • 1
  • 2
  • 3
  • 4
  • 5
<!-- 绑定 attribute --> <img v-bind:src="imageSrc" /> <!-- 动态 attribute 名 --> <button v-bind:[key]="value"></button> <!-- 缩写 --> <img :src="imageSrc" /> <!-- 缩写形式的动态 attribute 名 --> <button :[key]="value"></button> <!-- 内联字符串拼接 --> <img :src="'/path/to/images/' + fileName" />
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
绑定class和style
<!-- class 绑定 isRed是一个布尔值 --> <div :class="{ red: isRed }"></div> <div :class="[classA, classB]"></div> <div :class="[classA, { classB: isB, classC: isC }]"></div> <!-- style 绑定 --> <div :style="{ fontSize: size + 'px' }"></div> <div :style="[styleObjectA, styleObjectB]"></div> <!-- 绑定对象形式的 attribute --> <div v-bind="{ id: someProp, 'other-attr': otherProp }"></div> <!-- prop 绑定。“prop” 必须在子组件中已声明。 --> <MyComponent :prop="someThing" /> <!-- 传递子父组件共有的 prop --> <MyComponent v-bind="$props" /> <!-- XLink --> <svg><a :xlink:special="foo"></a></svg>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
v-on绑定事件

给元素绑定事件监听器
缩写： @
绑定值类型：event
修饰符：

- .stop - 调用 event.stopPropagation() - .prevent - 调用 event.preventDefault() - .capture - 在捕获模式添加事件监听器 - .self - 只有事件从元素本身发出才触发处理函数 - .{keyAlias} - 只有某些按键下触发处理函数 - once - 最多触发一次处理函数 - .left - 只在鼠标左键事件触发处理函数 - .right - 只在鼠标右键事件触发处理函数 - middle - 只在鼠标中键事件触发处理函数。 - passive - 通过 { passive: true } 附加一个DOM事件。
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

_用途： _
绑定事件
示例：

<!-- 方法处理函数 --> <button v-on:click="doThis"></button> <!-- 动态事件 --> <button v-on:[event]="doThis"></button> <!-- 内联声明 --> <button v-on:click="doThat('hello', $event)"></button> <!-- 缩写 --> <button @click="doThis"></button> <!-- 使用缩写的动态事件 --> <button @[event]="doThis"></button> <!-- 停止传播 --> <button @click.stop="doThis"></button> <!-- 阻止默认事件 --> <button @click.prevent="doThis"></button> <!-- 不带表达式地阻止默认事件 --> <form @submit.prevent></form> <!-- 链式调用修饰符 --> <button @click.stop.prevent="doThis"></button> <!-- 按键用于 keyAlias 修饰符--> <input @keyup.enter="onEnter" /> <!-- 点击事件将最多触发一次 --> <button v-on:click.once="doThis"></button> <!-- 对象语法 --> <button v-on="{ mousedown: doThis, mouseup: doThat }"></button>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
Vue的条件渲染
v-if

“真正的”条件渲染，动态的向DOM树内添加或删除 DOM元素。v-if适合条件很少改变的情况。初始渲染：v-if初始值为false时，组件不会渲染，生命周期钩子不会执行；
image.png

v-show

v-show无论初始状态是什么，组件都会渲染，v-show 不支持 元素，也不支持 v-else。

v-for列表渲染

基于原始数据多次渲染元素或模板

<div v-for="item in items"> {{ item.text }} </div>
  • 1
  • 2
  • 3
v-for中key的作用

v-for中key属性的值应唯一，起到身份认证的作用，避免v-for"就地更新"策略导致的问题。官方说法：v-for中key 主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。 如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。 而使用 key 时，它会基于 key的变化重新排列元素顺序，并且会移除 key 不存在的元素。

key属性可以用来提升v-for渲染的效率！，vue不会去改变原有的元素和数据，而是创建新的元素然后把新的数据渲染进去

认识VNode

VNode的全称是Virtual Node,也就是 虚拟节点
VNode的本质是一个JavaScript的对象
一个个VNode组成的就是虚拟DOM
image.png

v-model数据双向绑定

在表单输入元素或组件上创建双向绑定。
仅限：

- -