在 React 中，想要编写 HTML，是使用 JSX，之后通过 Babel 将 JSX 编译成
React.createElement函数调用；在 Vue 中，也支持 JSX 的开发模式，但大多数情况下都是使用基于 HTML 的模板语法，Vue 会将模板语法编译成虚拟 DOM 渲染函数。
Mustache 插值语法：
Mustache 插值语法：可以通过双大括号将 data 中的数据、methods 中的函数或者 JavaScript 表达式显示到 template 模板中。
<div id="app">
<!-- data 中的数据 -->
<div>当前数字：{{count}}</div>
<!-- methods 中的函数 -->
<div>{{formatCount(count)}}</div>
<!-- JavaScript 表达式 -->
<div>三倍当前数字：{{count * 3}}</div>
<!-- JavaScript 表达式只能是单个表达式，下面的语法会报错 -->
<div>{{ const count = 10 }}</div>
</div>
<script>
const app = Vue.createApp({
data() {
return {
count: 10,
}
},
methods: {
formatCount(argu) {
return `双倍当前数字：${argu*2}`
},
}
})
app.mount('#app')
<script>
指令：
指令用在元素或组件的属性上。
v-bind：
v-bind：用于动态绑定一个或多个属性值，或者向另一个组件传递 props 值。语法糖是 :。
<div id="app">
<img v-bind:src="imgUrl" />
</div>
<script>
const app = Vue.createApp({
data() {
return {
imgUrl: 'http://gips2.baidu.com/it/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960',
}
},
})
app.mount('#app')
</script>
使用 v-bind 动态绑定 class 属性值：
动态绑定的 class 和普通静态的 class 是可以一起使用的，不会被覆盖。
- 绑定对象：可以给
:class绑定一个对象来动态切换 class。对象中的属性名是 class 名，属性值是布尔类型，只有属性值为 true 时才会渲染对应的 class。<!-- 只有当 isActive 为 true 时才会显示 active 样式 --> <div v-bind:class="{ active: isActive }"></div> - 绑定数组：可以给
:class绑定一个数组来渲染多个 class。<div v-bind:class="[activeClass, errorClass]"></div>
使用 v-bind 动态绑定 style 属性值：
- 绑定对象：属性名可以使用驼峰式或者用引号括起来的短横线分割来命名。
<div v-bind:style="{ color: activeColor, fontWeight: activeFontWeight, 'font-size': activeFontSize + 'px' }"></div> - 绑定数组：可以将多个样式对象应用到同一个元素上。
<div :style="[baseStyles, {color: activeColor}]"></div>
使用 v-bind 动态绑定属性名：
如果属性名称不是固定的，可以使用 v-bind:[属性名]="属性值" 的格式来定义。
<~-- name 是动态的 -->
<div v-bind:[name]="value"></div>
使用 v-bind 直接绑定一个对象：
常用于给组件传递 props 属性值。
<div id="app">
<!-- 会自动地遍历对象中的所有属性，将它们作为属性添加到当前的元素上 -->
<div v-bind="props">Hello Vue</div>
</div>
<script>
const app = Vue.createApp({
data() {
return {
props: {
name: 'Lee',
height: 1.88,
},
}
},
})
app.mount('#app')
</script>
v-on：
v-on：用于绑定事件。语法糖是 @。
<div id="app">
<div v-on:click="handleClick">Hello Vue</div>
</div>
<script>
const app = Vue.createApp({
methods: {
handleClick() {
console.log('click')
}
}
})
app.mount('#app')
</script>
传递参数：
- 只有默认参数：如果在绑定事件时，没有传递任何参数，那么 event 对象会被默认传递进来。
<div id="app"> <div v-on:click="handleClick">Hello Vue</div> </div> <script> const app = Vue.createApp({ methods: { handleClick(event) { console.log('click', event) } } }) app.mount('#app') </script>
- 只有明确传递的参数：如果在绑定事件时，有显式地传递参数，那么只有明确传递的参数会被传递进来。
<div id="app">
<div v-on:click="handleClick('Lee')">Hello Vue</div>
</div>
<script>
const app = Vue.createApp({
methods: {
handleClick(name) {
console.log('click', name)
}
}
})
app.mount('#app')
</script>
- 既有明确传递的参数，也有默认参数：如果在绑定事件时，有显式地传递参数和
$event，那么明确传递的参数和 event 对象都会被传递进来。<div id="app"> <div v-on:click="handleClick('Lee', $event)">Hello Vue</div> </div> <script> const app = Vue.createApp({ methods: { handleClick(name, event) { console.log('click', name, event) } } }) app.mount('#app') </script>
修饰符：
v-on 支持修饰符，相当于是对事件进行一些特殊的处理。
.stop：调用event.stopPropagation()阻止事件冒泡。.prevent：调用event.preventDefault()阻止默认事件。.capture：添加事件侦听器时使用 capture 捕获模式。.passive：添加事件侦听器时使用{passive: true}模式，提前告知浏览器不要阻止事件的默认行为。.self：只有当事件是从侦听器绑定的元素本身触发时才触发回调。.{keyAlias}：只有当事件是从特定键触发时才触发回调。.left：只有当点击鼠标左键时才触发回调。.right：只有当点击鼠标右键时才触发回调。.middle：只有当点击鼠标中键时才触发回调。.once：只触发一次回调。
v-model：
v-model：用于实现双向数据绑定。经常与表单或者组件一起使用。
双向数据绑定：是指将视图（用户界面）中的数据与模型（业务逻辑）中的数据进行双向关联。当视图中的数据发生变化时，模型中的数据也会随之更新；同样，当模型中的数据发生变化时，视图中的数据也会随之更新。
用于表单。
<div id="app">
<!-- 修改视图中的值（例如手动输入数据），逻辑中的值会跟着变化；修改逻辑中的值（例如通过 JS 代码修改数据），视图中的值会跟着变化 -->
<input v-model="message" />
<div>{{message}}</div>
</div>
<script>
const app = Vue.createApp({
data() {
return {
message: 'Hello Vue',
}
},
})
app.mount('#app')
</script>
用于组件。
// App.vue
<template>
<!-- 1. 父组件通过 v-model 与子组件进行双向数据绑定 -->
<!-- v-model 用于组件时，默情情况是绑定了 modelValue 的属性和 update:modelValue 的事件，如果想修改为其他的名称，可以使用 v-model:值的名称，在子组件中需要修改为相同的值来接收数据、发出事件 -->
<home v-model="appMessage" />
</template>
<script>
import Home from './components/Home.vue'
export default {
components: {
Home,
},
data() {
return {
appMessage: 'Hello Vue',
}
}
}
</script>
<style scoped>
</style>
// Home.vue
<template>
<div>{{ modelValue }}</div>
<button @click="handleChange">修改</button>
</template>
<script>
export default {
// 2. 子组件通过 props 中的 modelValue 接收数据
props: {
modelValue: String,
},
emits: ['update:modelValue'],
methods: {
handleChange() {
// 3. 子组件通过 $emit 发出 update:modelValue 事件修改数据
this.$emit('update:modelValue', 'Hello World')
}
}
}
</script>
<style scoped>
</style>
v-model 的原理：
当 v-model 用于表单元素时，底层实际上是：
v-bind绑定 value 属性的值。v-on监听 input 事件，获取到最新的值赋值给绑定的属性值。
<~-- v-model 用于表单元素时，本质上就是在做下面的事 -->
<input :value="message" @input="message = $event.target.value" />
当 v-model 用于组件时，底层实际上是：
v-bind绑定 modelValue 的值。v-on监听update:modelValue事件，获取到传递过来的值赋值给绑定的属性值。
<~-- v-model 用于组件时，本质上就是在做下面的事 -->
<home :modelValue="appMessage" @update:modelValue="appMessage = $event" />
v-model 用于表单时的特殊情况：
与表单一起使用时，可以用于 input、textarea、select、checkbox、radio 等表单控件。
- select 如果是单选，
v-model绑定到属性中的值是就是单个的值；如果是多选，v-model绑定到属性中的值就是数组类型。 - checkbox 如果只有一个选择框时，
v-model绑定到属性中的值是布尔值类型，此时即使明确地给元素绑定 value 属性，当选中时也不会影响到v-model绑定的值； 如果有多个选择框时，v-model绑定到属性中的值是数组类型， 此时必须明确地给元素绑定 value 属性，当选中时 value 属性值会被自动地添加到v-model绑定的数组中。
v-model 的修饰符：
多个修饰符可以并列使用。
.lazy：默认情况下，v-model在进行双向数据绑定时，绑定的是 input 事件，那么在每次内容输入后就会将最新的值和绑定的属性进行同步；如果在v-model后面跟上 lazy 修饰符，那么就会将绑定的事件切换为 change 事件，只有在提交时才会触发。<div id="app"> <input v-model.lazy="message" /> <div>{{message}}</div> </div> <script> const app = Vue.createApp({ data() { return { message: 'Hello Vue', } }, }) app.mount('#app') </script>.number：自动将内容转换为数字。.trim：去除内容首尾的空格。
v-text：
v-text：用于设置元素的 textContent 文本内容。
<div v-text="message"></div>
<!-- 和 Mustache 插值语法的效果一样，只不过 Mustache 插值语法更灵活 -->
<div>{{message}}</div>
<!-- v-text 会直接替换掉元素中的内容 -->
<div v-text="message">你好，Vue</div>
v-html：
v-html：默认情况下，如果显示的内容本身是 HTML，Vue 是不会对其进行解析的；如果想要解析出来，需要使用 v-html。
<div id="app">
<!-- 会直接将字符串显式出来 -->
<div>{{content}}</div>
<!-- 会解析 HTML -->
<div v-html="content"></div>
</div>
<script>
const app = Vue.createApp({
data() {
return {
content: `<span style="color:red">Hello Vue</span>`,
}
},
})
app.mount('#app')
</script>
v-pre：
v-pre：用于跳过元素及其子元素的编译过程，显示原始 Mustache 标签。可以跳过不需要编译的节点，加快编译速度。
<div id="app">
<!-- Vue 会跳过对其的编译过程，将其直接显示出来 -->
<div-pre>{{message}}</div>
</div>
<script>
const app = Vue.createApp({
data() {
return {
message: 'Hello Vue',
}
},
})
app.mount('#app')
</script>
v-cloak：
v-cloak：这个指令会保持在元素上直到关联的实例编译结束。和 CSS 规则例如 [v-cloak]{display:none} 一起用时，可以用于隐藏未编译的 Mustache 标签直到实例编译完成。
<div id="app">
<!-- 初始会显示 {{message}}，直到三秒后才显示正确的效果 -->
<div>{{message}}</div>
</div>
<script>
setTimeout(() => {
const app = Vue.createApp({
data() {
return {
message: 'Hello Vue',
}
},
})
app.mount('#app')
},3000)
</script>
<style>
[v-cloak] {
display: none;
}
</style>
<div id="app">
<!-- 由于有 v-cloak 指令，叠加设置的 CSS 属性，初始什么都不会显示；直到三秒后，Vue 实例编译完成，v-cloak 指令会被 Vue 自动移除，显示正确的效果 -->
<div v-cloak>{{message}}</div1>
</div>
<script>
setTimeout(() => {
const app = Vue.createApp({
data() {
return {
message: 'Hello Vue',
}
},
})
app.mount('#app')
},3000)
</script>
v-once：
v-once：只渲染元素/组件一次，当数据发生变化时，元素/组件及其所有的子节点将被视为静态内容直接跳过，不会重新渲染。可以用于优化更新性能。
<div id="app">
<!-- 点击按钮也不会改变 message 显示的内容，因为只会渲染一次 -->
<div v-once>{{message}}</div>
<button @click="handleMessageChange">改变 Message</button>
</div>
<script>
const app = Vue.createApp({
data() {
return {
message: 'Hello Vue',
}
},
methods: {
handleMessageChange() {
this.message = 'Hello World'
},
}
})
app.mount('#app')
</script>
v-memo：
v-memo：缓存一个模板的子树。在元素和组件上都可以使用。为了实现缓存，该指令需要传入一个固定长度的依赖值数组进行比较，如果数组里的每个值都与最后一次的渲染相同，那么整个子树的更新将被跳过。可以用于优化更新性能。
v-memo传入空依赖数组v-memo="[]"将与v-once效果相同。
<!-- 当组件重新渲染，如果 valueA 和 valueB 都保持不变，div 及其子项的所有更新都将被跳过。 -->
<div v-memo="[valueA, valueB]">
...
</div>
条件渲染：
v-if、v-else、v-else-if、v-show ：根据条件决定是否显示元素或组件。类似 JavaScript 中的条件语句。
<div id="app">
<div v-if="Object.keys(info).length">
<p>姓名：{{info.name}}</p>
<p>年龄：{{info.age}}</p>
</div>
<div v-else>
<p>暂无个人信息</p>
<p>请填写后查看</p>
</div>
</div>
<script>
const app = Vue.createApp({
data() {
return {
info: {
name: 'Lee',
age: 18,
},
}
}
})
app.mount('#app')
</script>
v-if 和 v-show 的区别：
v-show 和 v-if 类似，但二者也有一些区别：
- 用法上的区别：
v-show不可以和v-else一起使用，不支持在 template 上使用。 - 本质上的区别：
v-show无论条件是 true 还是 false，它的 DOM 都是实际存在的，只不过是通过 CSS 的 display 属性来进行切换。
v-if只有当条件为 true 时，才会渲染条件块中的元素内容；当条件为 false 时，条件块中的元素内容完全不会被渲染。
因此，如果元素切换频繁，就使用v-show；如果元素切换不频繁，就使用v-if。
列表渲染：
v-for：用来遍历一组数据。类似 JavaScript 中的 for 循环 。基本格式是 v-for="(item, index) in 数据"，其中 item 和 index 分别是每项元素的自定义别名和自定义索引。
<div id="app">
<ul>
<li v-for="movie in movies">{{movie}}</li>
</ul>
</div>
<script>
const app = Vue.createApp({
data() {
return {
movies: ['大话西游', '少年派', '盗梦空间']
}
}
})
app.mount('#app')
</script>
v-for 遍历支持的类型：
其实只要是可迭代对象，v-for 都可以遍历。
- 数组：基本格式是
v-for="(item, index) in 数组"。Vue 对被侦听的数组的变更方法进行了包裹，所以使用它们也会触发视图更新，这些方法包括
push()、pop()、shift()、unshift()、splice()、sort()、reverse()。
可以发现，上面的方法都是会修改到原数组的；如果是不会修改到原数组的方法，是无法触发视图更新的，例如map()、filter()等。 - 对象：基本格式是
v-for="(value, key, index) in 对象"。 - 字符串：基本格式是
v-for="(str, index) in 字符串"。 - 数字：基本格式是
v-for="(num, index) in 数字"。
v-for 中的 key 属性：
在使用 v-for 进行列表渲染时，经常会给元素或者组件绑定一个 key 属性，属性值要求是唯一的。
<div id="app">
<ul>
<li v-for="movie in movies" v-bind:key="item">{{movie}}</li>
</ul>
</div>
<script>
const app = Vue.createApp({
data() {
return {
movies: ['大话西游', '少年派', '盗梦空间']
}
}
})
app.mount('#app')
</script>
key 的作用：
key 属性主要用于 Vue 中的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。
- 如果不使用 key：Vue 会尽可能尝试就地复用元素，如果可以就地复用元素就复用元素，如果不可以则只能新建元素。在源码中是使用
patchUnkeyedChildren()方法。 - 如果使用 key：Vue 可以通过 key 来比较是否是同一个元素，它会基于 key 的变化重新排列元素顺序，对其进行复用。在源码中是使用
patchkeyedChildren()方法。
<div id="app">
<ul>
<li v-for="movie in movies">{{movie}}</li>
</ul>
</div>
<script>
const app = Vue.createApp({
data() {
return {
movies: ['大话西游', '少年派', '盗梦空间']
}
}
})
app.mount('#app')
</script>
假设要在大话西游后面插入夏洛特烦恼，原本是大话西游、少年派、盗梦空间，现在是大话西游、夏洛特烦恼、少年派、盗梦空间。
- 不使用 key 的话：Vue 只能一个一个对比对应位置的元素。会发现第一个元素一样，可以直接复用；但是第二个元素就不一样了，原本是少年派，现在是夏洛特烦恼，因此需要修改其中的值；第三个元素也不一样，需要修改其中的值；还需要创建一个新的第四个元素。
- 使用 key 的话：Vue 可以通过 key 来比较是否是同一个元素。会发现大话西游、少年派、盗梦空间的元素都一样，可以直接复用，只需要创建一个新的元素插入即可。
自定义指令：
Vue 允许开发者自定义指令。自定义指令分为两种：
- 自定义局部指令：通过组件的 directives 选项定义，只能在当前组件中使用。
<!--假设要自定义一个当 input 元素挂载完成后就自动获得焦点的指令 v-focus --> <template> <!-- 2. 使用自定义指令 --> <input v-focus /> </template> <script> export default { // 1. 定义自定义指令 directives: { // 在 directives 中编写自定义指令的名称时不需要加 v-。编写的自定义指令是一个对象，其中放置的是自定义指令的生命周期函数，自定义指令的生命周期函数会默认接收当前元素作为参数 focus: { mounted(el) { el.focus() } } } } </script> <style scoped> </style> - 自定义全局指令：通过 app 的 directive 方法定义，可以在任意组件中使用。
// src/mian.js import { createApp } from 'vue' import App from './App.vue' const app = createApp(App) //1. 定义自定义指令 app.directive('focus', { mounted(el) { el.focus() } }) app.mount('#app')// src/App.vue <template> <!-- 2. 使用自定义指令 --> <input v-focus /> </template> <script setup> </script> <style scoped> </style>
自定义指令的参数和修饰符：
自定义指令冒号后面跟的是参数，点号后面跟的是修饰符，等号后面跟的是绑定的值。这些绑定的东西都可以通过自定义指令的生命周期函数的第二个参数获取到。
自定义指令的生命周期函数：
自定义指令的生命周期函数接收两个参数：第一个参数是绑定的元素；第二个参数是一个对象，包含所有绑定在自定义指令上的东西。
自定义指令的生命周期函数有：
- created：在绑定元素的 attribute 或事件监听器被应用前调用。
- beforeMount：在绑定元素被插入到 DOM 前调用。
- mounted：在绑定元素的父组件及它自己所有的子节点都挂载完成后调用。
- beforeUpdate：在绑定元素的父组件更新前调用。
- updated：在绑定元素的父组件及它自己所有的子节点都更新完成后调用。
- beforeUnmount：在绑定元素父组件卸载前调用。
- unmounted：在绑定元素的父组件卸载后调用。
<template>
<Info v-info:title.lazy="message" />
</template>
<script setup>
const message = 'Hello Vue'
const vInfo = {
mounted(el, bindings) {
console.log(bindings)
}
}
</script>
<style scoped>
</style>
template 元素：
template 元素作为一个不可见的包裹元素，最终是不会被浏览器渲染出来的，与条件渲染和列表渲染结合使用可以减少元素层级的嵌套。
<div id="app">
<template v-if="Object.keys(info).length">
<p>姓名：{{info.name}}</p>
<p>年龄：{{info.age}}</p>
</template>
<template v-else>
<p>暂无个人信息</p>
<p>请填写后查看</p>
</template>
</div>
<script>
const app = Vue.createApp({
data() {
return {
info: {
name: 'Lee',
age: 18,
},
}
}
})
app.mount('#app')
</script>
可以看到，p 元素外面并不会再嵌套一层多余的元素。
扫一扫
572
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
