Vue3学习日记（day3）

可重复性：package-lock.json确保了无论谁在哪台机器上运行npm install，得到的node_modules目录的内容都是一样的，提供了可重复的构建环境。
安装速度：package-lock.json中存储的依赖信息可以帮助加速npm install过程，因为它避免了重新解析依赖树的需要。
更新管理：package-lock.json锁定了依赖的版本，如果你想更新依赖，你需要先更新package.json中的版本范围，然后重新运行npm install来更新package-lock.json。
源代码控制：package-lock.json应该被纳入版本控制系统，以保证团队成员之间的依赖一致性。

探究文档

接下来，让我们继续探究vue3文档。（！仅会探究比较难懂的部分，其余简单部分或与vue2无异则不做探究，请自行查看文档！）

应用配置

【笔记：（应用：层级分析：项目-应用-组件,多个vue组件组成一个vue应用实例）】应用实例会暴露一个 .config 对象允许我们配置一些应用级的选项，例如定义一个应用级的错误处理器，用来捕获所有子组件上的错误：

app.config.errorHandler = (err) => {
  /* 处理错误 */
}

【笔记：（你可以在里面编写自己的错误逻辑，和报错提醒，以便于更好的处理错误）】

应用实例还提供了一些方法来注册应用范围内可用的资源，例如注册一个组件：

app.component('TodoDeleteButton', TodoDeleteButton)

这使得 TodoDeleteButton 在应用的任何地方都是可用的。我们会在指南的后续章节中讨论关于组件和其他资源的注册。你也可以在 API 参考中浏览应用实例 API 的完整列表。

确保在挂载应用实例之前完成所有应用配置！

语法合集

插值表达式

最基本的数据绑定形式是文本插值，它使用的是“Mustache”语法 (即双大括号)：

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

双大括号标签会被替换为相应组件实例中 msg 属性的值。且双向绑定，同步改变。

V- HTML（易造成xss漏洞）

【笔记：（xss漏洞：

XSS（Cross-Site Scripting）漏洞，即跨站脚本攻击，类似于sql注入，是一种常见的Web安全问题。

eg：假设一个网站允许用户发布评论，如果网站直接将用户的评论内容通过v-html指令渲染到页面上，而没有进行适当的转义处理或过滤，那么攻击者就可以在评论中插入恶意的JavaScript代码。当其他用户浏览这个含有恶意代码的评论时，他们的浏览器就会执行这段代码，导致XSS攻击发生。）】

双大括号会将数据解释为纯文本，而不是 HTML。若想插入 HTML，你需要使用 v-html 指令：

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

V-bind

双大括号不能在 css中使用。想要响应式地绑定一个 css，应该使用 v-bind 指令

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

v-bind 指令指示 Vue 将元素的 id 与组件的 dynamicId 属性保持一致。如果绑定的值是 null 或者 undefined，那么指令无效移除。

简写

<div :id="dynamicId"></div>

同名简写（vue3.4+）

<!-- 与 :id="id" 相同 -->
<div :id></div>

<!-- 这也同样有效 -->
<div v-bind:id></div>

V-bind(布尔类型)

v-bind 在这种场景下的行为略有不同：

<button :disabled="isButtonDisabled">Button</button>

当 isButtonDisabled 为真值或一个空字符串 (即 <button disabled="">) 时，元素会包含这个 disabled attribute。而当其为其他假值时 attribute 将被忽略。

多值绑定

如果你有像这样的一个包含多个值的 JavaScript 对象：

data() {
  return {
    objectOfAttrs: {
      id: 'container',
      class: 'wrapper'
    }
  }
}

通过不带参数的 v-bind，你可以将它们绑定到单个元素上：

<div v-bind="objectOfAttrs"></div>

JS使用

数据绑定仅支持单一表达式（也就是一段能够被求值的 JavaScript 代码）。

因此，下面的例子都是无效的：

<!-- 这是一个语句，而非表达式 -->
{{ var a = 1 }}

<!-- 条件控制也不支持，请使用三元表达式 -->
{{ if (ok) { return message } }}

调用函数

可以在绑定的表达式中使用一个组件暴露的方法：

【笔记：（组件暴露（仅在同组件）：

在Vue.js中，组件可以暴露（export）方法、计算属性（computed properties）、数据属性（data properties）等，以便在其他组件或模板中使用。当我们在一个组件内部定义了某个方法或属性，并希望在该组件的模板或其它组件中调用它时，我们就需要将这些方法或属性“暴露”出来。

eg：在一个名为MyComponent.vue的组件中，我们可以定义一个方法formatDate来格式化日期：

1<script>
2export default {
3  methods: {
4    formatDate(date) {
5      // 这里是你的日期格式化逻辑
6      return date.toLocaleDateString();
7    }
8  }
9}
10</script>

然后，在该组件的模板中，我们就可以直接使用这个方法：

1<template>
2  <div>
3    <time>{{ formatDate(new Date()) }}</time>
4  </div>
5</template>

）】

<time :title="toTitleDate(date)" :datetime="date">
  {{ formatDate(date) }}
</time>

受限的全局访问

模板中的表达式将被沙盒化，仅能够访问到有限的全局对象列表。该列表中会暴露常用的内置全局对象，比如 Math 和 Date。

没有显式包含在列表中的全局对象将不能在模板内表达式中访问，例如用户附加在 window 上的属性。然而，你也可以自行在 app.config.globalProperties 上显式地添加它们，供所有的 Vue 表达式使用。

【笔记：（

常见处理对象：math和date

eg：

在模板中你可以直接使用如下表达式：

1<span>{{ Math.sqrt(16) }}</span>

这将显示4，因为Math.sqrt是允许在模板表达式中直接调用的函数之一。

然而，如果有一些自定义的全局变量或函数，例如你可能在window上附加了一些属性或函数，这些默认情况下是无法在模板表达式中访问的。

1// 假设你在全局作用域（可能是你的主JS文件中）添加了以下代码：
2window.myFunction = function() { return 'Hello, world!'; }

然后试图在模板中使用它：

1<span>{{ myFunction() }}</span>

这将不会工作，因为myFunction不在允许的全局对象列表中。为了解决这个问题，你可以在app.config.globalProperties上添加这个函数，使得它可以在所有Vue表达式中访问。

1import { createApp } from 'vue';
2
3const app = createApp(App);
4
5// 添加自定义的全局属性或方法
6app.config.globalProperties.$myFunction = function() {
7  return 'Hello, world!';
8};
9
10app.mount('#app');

现在，在模板中你可以通过$myFunction()来调用这个函数：

1<span>{{ $myFunction() }}</span>

这样，你就可以在保证应用安全性的同时，灵活地使用更多的全局对象和函数了。

）】

V-on

它将监听 DOM 事件：

<a v-on:click="doSomething"> ... </a>

<!-- 简写 -->
<a @click="doSomething"> ... </a>

动态参数

<!--
注意，参数表达式有一些约束，
参见下面“动态参数值的限制”与“动态参数语法的限制”章节的解释
-->
<a v-bind:[attributeName]="url"> ... </a>

<!-- 简写 -->
<a :[attributeName]="url"> ... </a>

<a v-on:[eventName]="doSomething"> ... </a>

<!-- 简写 -->
<a @[eventName]="doSomething"> ... </a>

限制

1：动态参数中，表达式的值如果为null则是未绑定，其他非字符串则会报错。

2：动态参数中，表达式中的空格和引号均为非法字符。

3：html内嵌模板中，大写字母会被浏览器强制为小写字母。

BrianGriffin

关注

12
点赞
踩
27

收藏

觉得还不错? 一键收藏
0
评论
Vue3学习日记（day3）

vite创建的vue目录详解；应用配置与全局定义；插值表达式；V-HTML；XSS漏洞；V-BIND；JS注意事项；调用函数注意事项；受限的全局访问；V-ON
复制链接

扫一扫

Vue3学习日记（day3）

目录详解：

简单解释：

详细解释：

.vscode

public

assets

compents

router

views

app.vue

package.json

package-lock.json

区别

探究文档

应用配置​

语法合集

插值表达式​

V- HTML（易造成xss漏洞）​

V-bind

简写​

同名简写 （vue3.4+）​

V-bind(布尔类型)​

多值绑定

JS使用

调用函数​

受限的全局访问​