template模板及各种插值操作

8.template模板

我们将做做案例、项目等一些固定的语句用法放在一个模板中，

以后代码规范的缩进改为两个空格

这个就当做默认模板来使用

其实这节就是说了代码规范之缩进两个空格

9-1.插值操作 - mustache

插值操作是什么？

例如上面的例子，在data里面定义了一个数据，希望把这个值插入到DOM里面进行显示

mustache的翻译是胡子/胡须的意思

之前我们最常用的插值操作就是mustache语法，即双大括号{{}}语法

mustache中不仅仅可直接写变量，还可以写一些简单的表达式，如+

运行结果如下：

如果我们想要在这两个中间加一个空格，应该怎么写：

运行效果如下：

它还可以这样做，计算数值：

运行结果如下：

但是现在我们写的div中的语句太长了，这个也是有解决办法的

就是使用计算属性：computed；这个以后再讲

9-2.插值操作 – 其他指令

1.v-once 取消响应

我们知道现在我们所创建的vue文件是响应式的，也就是我们在浏览器中的F12修改就会实时更新的

但是如果我们不想让它发生改变，不希望跟着变化时，就需要用到v-once了

运行结果如下：

中间加了v-once的语句便不会修改

并且v-once和v-for不一样，v-for后面可以跟表达式，但是v-once后面不能跟

2.v-html  以html效果展示

当我们传入的属性本身就是html标签的时候，可以使用v-html

运行结果：

3.v-text  展示文本类型

一般不用，不够灵活，也不能像mustache那样能拼接

运行效果如下：

4.v-pre  显示原本内容

例如我们想要显示的效果就是{{message}}本身

运行结果如下：

5.v-cloak  代码显示之前

针对执行js代码突然卡住了的情况

例如，我们先将代码执行效果延迟1秒钟setTimeout

运行结果如下：

加了v-cloak之后

运行结果如下：

6.v-for=””  遍历

这个之前说过，不再细说

- 写作不易，大家多多关注，谢谢啦 -

---web分享，分享的不只是web