Vue模板语法和常见的指令

Posted 2021-07-25 coder斌

Vue模板语法和常见的指令

• • 邂逅Vue3开发
  • • 认识CDN和CND引入
    • 下载源码和使用源码
    • template的抽离方式
    • • 使用template标签
      • 使用script标签
  • Mustche语法 --- 胡子语法
  • 常见指令
  • • v-once指令
    • v-text指令
    • v-html指令
    • v-pre指令
    • v-cloak指令

邂逅Vue3开发

认识CDN和CND引入

直接使用script标签 <script src="https://unpkg.com/vue@next"></script>

下载源码和使用源码

略过浏览器访问保存网页即可https://unpkg.com/vue@next

template的抽离方式

使用template标签

使用script标签

Mustche语法 — 胡子语法

在html内嵌入{{ }}的语法展示数据

内容可以是

• data、computed、methods里面的内容
• 可以是一个表达式
• 函数调用
• 三元运算符

常见指令

v-once指令

v-once设置后只能渲染一次，数值改变不会引起页面的改变

• 可以直接放在对应标签，也可以放在标签内部。

v-text指令

假如我们的值是 html 标签，我们不希望浏览器解析，就展示这样的一个字符串，用到v-text

v-html指令

假如我们的值是 html 标签，我们希望浏览器解析成HTML代码，用到v-html

v-pre指令

v-pre指令会帮我们不解析{{ }}

v-cloak指令

浏览器在解析时，若网络请求过慢，浏览器渲染慢，会展示出我们写的 {{ info}} 之类的。

在它展示我们的数据之前，我们想要 处理完才展示出来，没展示出来显示白板

当浏览器处理完的时候，会自动将v-cloak指令 移除，显示结果，在此之前会存在 v-cloak就会被 隐藏掉。
765)]

当浏览器处理完的时候，会自动将v-cloak指令 移除，显示结果，在此之前会存在 v-cloak就会被 隐藏掉。