前言
这个月开始重新开始学习Vue3，从理解基本使用到模拟实现！
本文内容是关于Vue的模板语法
基本目录如下：
image.png
基本介绍
主要讲以下3点：
image.png
1. Vue的模板语法是基于HTML
一方面方便开发者可以声明式地将 DOM 绑定至底层组件实例的数据中，另一方面它们都能被遵循规范的浏览器和 HTML 解析器解析
2. 在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数
其实在我们之前手写中，这一点还待完善，如下：
compile(template) {
return function render() {
const h1 = document.createElement('h1')
h1.textContent = this.count
return h1;
}
}
在真实的实现中，compile应该接受一个template，通过render函数将template转成虚拟DOM，而不是上述代码那样，返回真实的DOM。这点会在之后的手写中完善
3. 偏爱原生，可直接写渲染 (render) 函数，使用可选的 JSX 语法
例如：
import Xxx from './Xxx.vue'
new Vue({
el: '#demo',
render() {
return (
<Xxx>
<span>Hello</span> world!
</Xxx>
)
}
})
可以看到，以上的这种写法会更接近模板的语法
插值
此处分4点来讲：
1. 文本插值
文本插值使用Mustache语法来实现，即双大括号，还是以Vite创建的Vue3项目为例：
//components/HelloWorld.vue
<template>
<h1>{{ msg }}</h1>
<button @click="count++">count is: {{ count }}</button>
<p>Edit <code>components/HelloWorld.vue</code> to test hot module replacement.</p>
</template>
在上述代码中，msg和count其实就是文本插值，它会自动去组件实例中找对应属性
需要注意：双大括号会将数据解释为普通文本，而非 HTML 代码
例如：
<template>
<h1>{{ myHTML }}</h1>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {
myHTML: "<p>我是一个段落</p>",
};
},
};
</script>
结果如下
image.png
可以看到被当成了文本处理
通常，当数据变化时用户界面也会更新，但我们可以使用v-once 可实现一次性插值，即之后不再跟新，以HelloWorld.vue为例
<template>
<h1>{{ myHTML }}</h1>
<h1>{{ msg }}</h1>
<button @click="count++" v-once>count is: {{ count }}</button>
<p>Edit <code>components/HelloWorld.vue</code> to test hot module replacement.</p>
</template>
<script>
export default {
name: "HelloWorld",
props: {
msg: String,
},
data() {
return {
count: 0,
myHTML: "<p>我是一个段落</p>",
};
},
};
</script>
当按钮被点击时，count值并不会变化了，这就是一次性插值的概念
2. 原始 HTML
上述例子中，属性myHTML被当成了一个文本，但我们是希望把它当成HTML来解析，那怎么办？
Vue提供了v-html指令，用于输出真正的 HTML，如下
//components/HelloWorld.vue
<template>
<h1 v-html="myHTML"></h1>
<h1>{{ msg }}</h1>
<button @click="count++" v-once>count is: {{ count }}</button>
<p>Edit <code>components/HelloWorld.vue</code> to test hot module replacement.</p>
</template>
<script>
export default {
name: "HelloWorld",
props: {
msg: String,
},
data() {
return {
count: 0,
myHTML: "<p>我是一个段落</p>",
};
},
};
</script>
成功解析为HTML。但是使用v-html这种动态渲染 HTML 是非常危险的，容易导致 XSS 攻击，因此需要谨慎使用
3. Attribute插值
模板中的属性插值，可以通过v-bind轻松实现
<button v-bind:disabled="isButtonDisabled">按钮</button>
通过isButtonDisabled的值来决定button的状态
4. 支持 JavaScript 表达式
所有的数据绑定，Vue都提供了完全的 JavaScript表达式支持
但每个绑定都只能包含单个表达式，因此不能使用语句
{{ var a = 1 }}//不能生效
指令
此处分4点来讲：
image.png
1. 介绍
Vue的指令本质就是带有v-前缀的特殊属性，比如：
v-bind:disabled="isButtonDisabled"
如上，其实大多数指令的值都是是单个 JavaScript 表达式
其实说白了，指令的职责就是当表达式的值改变时，会响应式的影响DOM
2. 参数
一些特定指令可以接受特定的参数，指令和参数之间使用冒号隔开，比如
v-bind:href="xxx"
3. 动态参数
指令参数可以使用JS表达式，表达式用方括号[]括起来
4. 修饰符
修饰符以半角句号.指明的特殊后缀，比如：
v-on:submit.prevent="xxx"
prevent修饰符表示阻止默认事件
指令的缩写
此处分成2点来说
对于一些频繁用到的指令,vue提供了简写方式
1. 常用简写
v-bind直接省略
v-on简写为@
2. 注意事项
对动态参数值约定
- 动态参数预期会求出一个字符串，异常情况下值为
null - 其它非字符串类型的值都将会触发一个警告
对动态参数表达式约定
- 某些字符如空格和引号，放在
HTML attribute名里是无效的，因此Vue对动态参数表达式有一些语法约束 - 可以使用没有空格或引号的表达式，或用计算属性替代一些复杂表达式
JS表达式
- 模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如
Math和Date - 不应该在模板表达式中试图访问用户定义的全局变量
END~
以上就是关于模板语法的所有内容
如有问题，欢迎留言告知，感谢~
为了方便下载，我将相关的高清思维导图及源文件上传至GitHub，可移步下载：https://github.com/jCodeLife/mind-map
网友评论