Vue初学-模板语法

2020-12-19 本文已影响0人普通的一个程序员

模板语法

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使用实例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Demo1</title>
       <script type="text/javascript" src='vue.js'></script>
    </head>
    <body>
        
        <div id="app">
            <span v-once>这个将不会改变: {{ msg }}</span>
            <div>{{msg}}</div>
            <div id="app"> {{htmlStr}} </div>
            <p>Using v-html directive: <span  v-html='htmlStr'></span></p>
        </div>

        <script type="text/javascript">
           var app = new Vue({
               el:'#app',
                data: function() {
                    return { 
                        htmlStr: '<span style="color:red;">this is html block</span>',
                        msg: 'this is a message'
                    }
                }
           });   
           
           app.$data.msg = '123'
        </script>
    </body>
</html>

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

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

3 Attribute

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Demo1</title>
       <script type="text/javascript" src='vue.js'></script>
    </head>
    <body>
        
        <div id="app">
            <div v-bind:id="id"></div>
            <button v-bind:disabled="ifDisabled" >测试脚本</button>
        </div>

        <script type="text/javascript">
            var data = {id: "testid", 
        ifDisabled : true}
           var app = new Vue({
               el:'#app',
                data: data
           });   
           
           app.$data.msg = '123'
        </script>
    </body>
</html>

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

<div id="app"><div id="testid"></div> <button disabled="disabled">测试脚本</button></div>

4 使用javaScript

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Demo1</title>
       <script type="text/javascript" src='vue.js'></script>
    </head>
    <body>
        
        <div id="app">
            <div v-bind:id="'stitic_' + id"></div>
            {{ifDisabled ? "yes" : "no"}}
        </div>

        <script type="text/javascript">
            var data = {id: "testid", 
        ifDisabled : true}
           var app = new Vue({
               el:'#app',
                data: data
           });   
           
           app.$data.msg = '123'
        </script>
    </body>
</html>

执行结果：

<!-- 这些表达式作为JavaScript被解析 -->
<div id="app"><div id="stitic_testid"></div>
            yes
        </div>

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

        <!--非表达是-->
        {{var a = 1}}
        <!--流程控制也不生效，要使用三元表达似乎-->
        {{ if(ifDisabled){ return "mesage"}}}

指令

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

    <p v-if='seen'>现在你看到我了</p>

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

参数

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

 <a v-on:click='doSomething'> ... </a>

监听点击事件

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


<!-- 参数表达式的写法存在一些约束-->
<a v-bind:[attributeName]="url">xxx </a>

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

<a v-on:[enventName]="doSomeThing">xxx</a>

动态参数的约束

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

<!-- 这会触发一个编译警告 -->
<a v-bind:['foo' + bar]="value"> ... </a>

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


<!--
在 DOM 中使用模板时这段代码会被转换为 `v-bind:[someattr]`。
除非在实例中有一个名为“someattr”的 property，否则代码不会工作。
-->
<a v-bind:[someAttr]="value"> ... </a>

修饰符

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

    <form v-on:submit.prevent='onSubmit'> ... </form>

缩写

<!-- v-bind -->
<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>
<!-- 动态参数的缩写 (2.6.0+) -->
<a :[key]="url"> ... </a>

<!-- v-on -->
<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>
<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>