首页 > 代码库 > Vuejs --03 模板语法

Vuejs --03 模板语法

2024-11-28 03:38:39   203人阅读

一、插值
     1、文本
<span>{{msg}}</span>     //mustache语法
 
<span v-once>{{msg}}</span>     //一次性插值，当数据改变时，不会响应式更新
    
     2、纯HTML     你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容插值。
<div v-html="rawHtml"></div>
 
     3、特性
          3.1     mustache 语法不能作用在HTML特性上（也就是只能数据赋值，不能属性赋值，属性赋值用v-bind指令）
          3.2     v-bind指令同样适用布尔类型：如果求值结果是 falsy 的值，则该特性将会被删除
 
     4、适用JavaScript表达式
{{num + 1}}
{{num > 0 ? num++ : num}}
{{ message.split(‘‘).reverse().join(‘‘) }}
<div v-bind:id="‘list-‘ + id"></div>

//以下报错：
 
<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}
<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}

 

二、指令

     1、是带v-前缀的特殊属性，预期是单个JavaScript表达式。指令的职责：当表达式值发生改变时，将其产生的连带影响，响应式地作用于DOM
     2、参数：可以是HTML属性，事件名等
<a v-bind:href="http://www.mamicode.com/url"></a>
<a v-on:click="btnEvent"></a>
     3、修饰符     修饰符（Modifiers）是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。
<form v-on:submit.prevent="onSubmit"></form>
 
三、过滤器
     1、解释：上一个过滤器的输出成为下一个过滤器的输入，然后再次过滤     eg.    {{ msg | capitalize }}  --> 将输入的字符串转换成大写字母的过滤器。
     2、Vuejs允许自定义过滤器，用于一些常见的文本格式化，可以用在两个地方：mustache、v-bind表达式。 过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符指示
<!-- in mustaches -->
{{ message | capitalize }}     // message 结果是 capitalize 的输入
<!-- in v-bind -->
<div v-bind:id="rawId | formatId"></div>
 
<script>
     new Vue({
        // ...
        filters: {
            capitalize: function(value) {     //value，是上一个过滤器的输出得出的结果，先成为此过滤器的输入，即value=http://www.mamicode.com/message
                if (!value) return ‘‘
                value = value.toString()
                return value.charAt(0).toUpperCase() + value.slice(1)
            }
        }
    }) 
</script>
     3、过滤器可以串联
{{ message | filterA | filterB }}
     4、过滤器可以接受参数（因为过滤器是JavaScript函数） 
{{ message | filterA(‘arg1‘, arg2) }}
 
四、缩写
<!-- 完整语法 -->
<a v-bind:href="http://www.mamicode.com/url"></a>
<!-- 缩写 -->
<a :href="http://www.mamicode.com/url"></a>
 
<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>

 

 
 

Vuejs --03 模板语法


联系
我们