Vue的模板语法学习

模板语法

1、插值

a、文本

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

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

【案例】

<div id="app">
    <span>{{ msg }}</span><br/>
</div>

<script>
    var app = new Vue({
        el:"#app",
        data:{
            msg:"wo zai xue xi vue!"
        }
    });
</script>
结果就是：wo zai xue xi vue!

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

【案例】

<div id="app">
    <span>{{ msg }}</span>
    <h4 v-once>{{ msg }}</h4>
</div>

<script>
    var app = new Vue({
        el:"#app",
        data:{
            msg:"wo zai xue xi vue!"
        }
    });
</script>
打印结果看下图

b、纯HTML

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

【案例】

<div id="app">
    <div v-html="message"></div>
</div>

<script>
    var app = new Vue({
        el:"#app",
        data:{
            message:"我是纯HTML"
        }
    });
</script>
打印结果：我是纯HTML

c、特性

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

【案例】

<div id="app">
    <div v-bind:title="msg2">nihao</div>
</div>

<script>
    var app = new Vue({
        el:"#app",
        data:{
            msg1:"<li>nihao</li>",
            msg2:"你好啊"
        }
    });
</script>

d、使用 JavaScript 表达式

什么是表达式

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

2、指令

什么是指令

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

指令的职责是什么

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

最常用的指令有：

v-bind和v-on

a、参数

指令的参数都有哪些

比如href

b、修饰符

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

【案例】

<div id="app">
    <a v-bind:href="url" v-on:click.prevent="a">百度</a>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            msg:"xue xi vue!",
            url:"http://www.baidu.com"
        },
        methods:{
            a:function(){
                console.log("阻止跳转!")
            }
        }
    });
</script>
结果看下图

3、过滤器

过滤器是用来干什么的

对文本进行格式化的

过滤器用在什么地方

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

【反转案例】

<div id="app">
    {{msg|guolvqi}}
    {{msg|guolvqi}}
    {{msg|guolvqi}}
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            msg:"xue xi vue!"
        },
        //定义过滤器
        filters: {
            guolvqi:function(value){
                return value.split("").reverse().join("")
            }
        }
    });
</script>
打印结果：!euv ix eux !euv ix eux !euv ix eux

【串联一个大写案例】

<div id="app">
    {{msg|guolvqi|daxie}}
    {{msg|guolvqi|daxie}}
    {{msg|guolvqi|daxie}}
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            msg:"xue xi vue!"
        },
        //定义过滤器
        filters: {
            guolvqi:function(value){
                return value.split("").reverse().join("")
            },
            daxie:function(value){
                return value.toUpperCase();
            }
        }
    });
</script>
打印结果：!EUV IX EUX !EUV IX EUX !EUV IX EUX

过滤器也可以接收参数

4、缩写

a、v-bind缩写

【案例】

<div id="app">
    <div :title="msg">缩写</div>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            msg:"xue xi vue!"
        }
    });
</script>
结果看下图

b、v-on缩写

【案例】

<div id="app">
    <div @click="shijian">缩写</div>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            msg:"xue xi vue!"
        },
        methods:{
            shijian:function(){
                console.log(this.msg)
            }
        }
    });
</script>
结果看下图

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