Vue初学-模板语法

模板语法

Vue使用了基于HTML的模板语法，语序开发这声明式将dom绑定在底层Vue实例的数据。Vue的模板都是合法的HTML，可以被浏览器和html构造器解析
Vue将模板编译成虚拟DOM渲染函数，结合响应式系统，Vue可以只能计算最少需要重新渲染多少组件，将dom操作次数减少的最少。
如果不想使用模板，可以不用模板，直接写渲染（render)函数，使用可选的jsx语法

插值

1.文本

Mustache 语法（双大括号）。Mustanche标签将会被替代为对应数据对象的值。当绑定数据对象上的属性发生了改变，插值处的内容都会更新

v-once 指令，可以执行一次性的插值，当数据改变时，插值处的内容不会更新。但这会这会影响到该节点上其他数据的绑定

2.原始HTML

双大括号会将数据解释为普通文本，而不是html代码，为了输出真正的html，需要使用v-html指令
以下实例为 v-once和v-html使用实例

    
        
        
       
    
    
        
        

            这个将不会改变: {{ msg }}
            
{{msg}}
            
 {{htmlStr}} 
            
Using v-html directive: 
        

        
    

执行结果：
this is html block
Using v-html directive: this is html block
注意： 不能使用v-html来复合局部模板，因为Vue不是基于字符串的模板引擎。对于用户界面（UI），组件更适合作为可重用和可组合的基本单位

如果在站点上使用动态渲染任意html，可能会非常危险，因为很容易导致XSS攻击。请只对可信任内容使用html插值，绝对不可以使用用户提供的内容使用插值

3 Attribute

Mustache语法不能作用在HTML Attribute上， 遇到这种情况应该使用v-bind执行

    
        
        
       
    
    
        
        

            

            测试脚本
        

        
    

1. 非布尔
2. 布尔
   渲染出来的html如下：

 测试脚本

4 使用javaScript

针对所有类型的绑定，Vue提供了javaScript的支持

    
        
        
       
    
    
        
        

            

            {{ifDisabled ? "yes" : "no"}}
        

        
    

执行结果：

            yes
        

有个限制，每个绑定都只能是包含单个表达式，否则是不会生效的

        
        {{var a = 1}}
        
        {{ if(ifDisabled){ return "mesage"}}}

指令

指令（Directives)事带有v-前缀的特殊 attribute。指令attribute的值预期是单个javascript表达式（v-for是例外情况）。指令的指职责是，当表达是的值变动时，将其产生的连带影响，响应式的作用与Dom。

    
现在你看到我了

这里v-if指令将根据表达是seen的值真假来插入和移除

元素

参数

一个指令可以接收一个参数，在指令名称之后以冒号标识。，例如 v-bin指令可以用于响应式的更新HTML attribute
html ...
href是参数，告知v-bind质量将该元素的href属性与表达式url的值绑定，再来一个v-on指令，用于监听DOM事件

  ... 

监听 点击事件

动态参数-新增属性（2.6）

xxx 

这里的 attributeName会被作为一个js的表达式进行动态求值，求得值后将作为最终参数来使用。同样的，可以使用动态参数未一个动态事件名绑定处理函数

xxx

动态参数的约束

1. 值的约束
   动态参数预期会求出一个字符串，异常情况下值未null,这个特殊的null值可以被显示的用于移除绑定。任何其他非字符串类型的值都会触发一个警告
2. 表达式的约束
   动态参数表达式有一些语法约束，某些字符串，入空格和引号，放在html里的attribute名里式无效的。

 ... 

变通的办法是使用没有空格或引号的表达式，或用计算属性替代这种复杂表达式。
在DOM中使用模板时（直接在一个html文件里撰写模板），还需要避免使用大写字符来命名键名，因为浏览器会把attribute名全部强转未小写。

 ... 

修饰符

（modifier）是以半角句号. 指明的特殊后缀，用于指定一个指令需要以特殊方式绑定。
.prevent修饰v-on指令，对于触发的事件调用 event.preventDefault()

    
 ... 

缩写

...

...

 ... 



...

...

 ...