模板语法

1、插值

a、文本

数据绑定最常见的形式就是使用 “Mustache” 语法（双大括号）的文本插值

我们在普通插值的时候无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新

【案例】

    
    
     {
   { msg }}
     
    
结果就是：wo zai xue xi vue!

我们在使用 v-once指令的时候，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。

【案例】

    
    
     {
   { msg }}    
     
{
   { msg }}
    
打印结果看下图

b、纯HTML

双大括号会将数据解释为纯文本，而非 HTML 。为了输出真正的 HTML ，你需要使用 v-html 指令

【案例】

    
    
     
    
打印结果：我是纯HTML

c、特性

mustache 语法不能作用在 HTML 属性上，遇到这种情况应该使用 v-bind 指令：

【案例】

    
    
     
      nihao
     
    

d、使用 JavaScript 表达式

什么是表达式

由变量函数返回值和运算符以及常量组成的式子就叫表达式

2、指令

什么是指令

指令（Directives）是带有 v- 前缀的特殊属性。

指令的职责是什么

当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

最常用的指令有：

v-bind和v-on

a、参数

指令的参数都有哪些

比如href

b、修饰符

修饰符（Modifiers）是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用

【案例】

    
    
     百度
    
结果看下图

3、过滤器

过滤器是用来干什么的

对文本进行格式化的

过滤器用在什么地方

过滤器可以用在两个地方：mustache 插值和 v-bind 表达式。

【反转案例】

    
         {
   {msg|guolvqi}}    {
   {msg|guolvqi}}    {
   {msg|guolvqi}}
    
打印结果：!euv ix eux !euv ix eux !euv ix eux

【串联一个大写案例】

    
         {
   {msg|guolvqi|daxie}}    {
   {msg|guolvqi|daxie}}    {
   {msg|guolvqi|daxie}}
    
打印结果：!EUV IX EUX !EUV IX EUX !EUV IX EUX

过滤器也可以接收参数

4、缩写

a、v-bind缩写

【案例】

    
    
     
      缩写
     
    
结果看下图

b、v-on缩写

【案例】

    
    
     
      缩写
     
    
结果看下图

喜欢的朋友别忘了点赞和收藏啊