Vue 模板语法

以下是一段 HTML 片段,它展现了56个民族。

html 复制代码
<ul>
  <li>蒙古族</li>
  <li>回族</li>
  <li>藏族</li>
  <li>维吾尔族</li>
  <li>苗族</li>
  <li>彝族</li>
  <li>壮族</li>
  <li>布依族</li>
  <li>朝鲜族</li>
  <li>满族</li>
  ...

发现有什么缺点吗?

是不是有点啰嗦?56 个民族就需要写56行 <li>,如果页面复杂的话,整个页面的 HTML 将爆炸。

如何解决这种重复代码问题呢?前辈们发明了模板引擎。比如下面的代码:

Mustache 复制代码
<ul>
  {{#nationalities}}
    <li>{{.}}</li>
  {{/nationalities}}
</ul>

nationalities 在这里是一个数组,数组的内容就是56个民族,{{#nationalities}} 与 {{/nationalities}}会把其中的内容渲染 56 遍(因为 nationalities 有56个元素)。{{.}}表示输出每次循环的内容。

模板引擎(你可以把引入的 js 库看作是它)可以把这个简单的片段编译成与我们上面相同的 html 代码。是不是简洁很多了。

Vue 不但实现了上述模板引擎的所有功能,而且还提供了更加强大、友好的其它功能。这些正是我们本节要学习的内容。

文本插值

这个很好理解,就是 {{ msg }} 会被替换成我们 <script> 标签中 msg 的内容。当我们通过代码修改了 msg 的内容时,对应的页面内容也相应更新。

原始 HTML

这里一定要记住,v-html 指令比较危险,如果内容来自用户输入。比如用户通过输入框把内容存储到数据库中,而我们要展现的内容正是从数据库中获取到的用户输入的内容,那就很危险了。请看示例:play.vuejs.org/#eNp9UkFLwz...

这时候,请考虑使用一些第三方的防 XSS 库。

Attribute 绑定

这里没啥难理解的。

同名简写这个要注意 Vue 的版本,低版本不支持;

布尔型 Attribute 的这里,要记住几个固定的假值:false, 0, -0, 0n, "", null, undefined, NaN, doucment.all(这个是历史遗留问题,很少很少使用)。

动态绑定多个值,一些自定义组件中会使用,坏处就是有可能你不知道这个对象中到底有多少属性。比如该对象来自于后台接口返回的数据。

使用 JavaScript 表达式

这里可能就是要注意一下"调用函数"中的副作用与"受限的全局访问"中的有限的全局对象列表了。

在编程中,副作用是指函数或表达式对除了返回值以外的其他部分产生的影响。这些影响可能包括修改全局变量、改变对象的状态、打印输出、读取输入等。

js 复制代码
function add(a, b) {
  return a + b;
}

上面的这个函数就是一个无副作用的函数。

js 复制代码
function add(a, b) {
  // 在这里我们调用了后台接口,向数据库保存了数据,这就是有副作用。
  fetch("https://example.com/profile", {
    method: "POST", 
    body: JSON.stringify(data),
  })
  return a + b;
}

有限的全局对象列表,这个官方举例了,直接点进去看就可以了。

指令 Directives

官方说得太好了,有问题评论区见吧。

相关推荐
夏天想34 分钟前
复制了一个vue的项目然后再这个基础上修改。可是通过npm run dev运行之前的老项目,发现运行的竟然是拷贝后的项目。为什么会这样?
前端·vue.js·npm
yiludegeX1 小时前
fluth-vue: 体验流式编程范式之美
vue.js·前端框架·rxjs
没有鸡汤吃不下饭1 小时前
H5移动端页面实现快递单号条形码/二维码扫描,亲测可行!!
前端·javascript·vue.js
Java陈序员1 小时前
宝藏工具站!一个轻量实用的在线工具集合!
vue.js·nuxt.js
喝西瓜汁的兔叽Yan1 小时前
书架效果的实现
javascript·vue.js
GBVFtou1 小时前
vue3 options模式
前端·vue.js
我是日安2 小时前
从零到一打造 Vue3 响应式系统 Day 26 - 数组长度变更处理
前端·javascript·vue.js
jason_yang2 小时前
vue3中使用auto-import与cdn插件冲突问题
vue.js·vite·cdn
丘耳2 小时前
@tiptap/vue-2 知识点笔记-02
前端·javascript·vue.js
丘耳2 小时前
@tiptap/vue-2 知识点笔记-01
前端·javascript·vue.js