vue学习——模板语法

<template>
<div>
    <div>模板语法</div>
    <div>---------------------------</div>
    <!-- 文本插值 -->
    <div>
        data:{{msg}}
    </div>
    <div>---------------------------</div>
    <!-- 基本计算插值 -->
    <div>
        number:{{number + 1}}
    </div>
    <div>---------------------------</div>
    <!-- v-html  把文本转化为dom元素 -->
    <div v-html="rawHtml"></div>
    <div>---------------------------</div>
    <!-- v-bind  给元素绑定属性 -->
    <div v-bind:class="red">属性绑定</div>
    <div>---------------------------</div>
    <!-- v-on  给元素绑定事件 -->
    <div v-on:click="say()">v-on事件绑定</div>
    <div>---------------------------</div>
    <!-- v-on 简写用 @ 表示，给元素绑定事件 -->
    <div @click="change()">v-on简写事件绑定</div>
    <div>---------------------------</div>
    <!-- 过滤器 -->
    <div>{{ message | capitalize }}</div>

</div>
</template>



总结：模板语法

1、data:服务于模板的数据
2、模板中嵌入js代码
3、指令  v-html把文本转化为模板中元素，v-bind绑定元素属性，v-on绑定元素对于事件，服务于模板
4、计算属性  computed，用于计算事件
5、过滤器  filters 服务于模板，对模板中的变量进行过滤

所以以上vue特性称之为模板语法


<script>
export default {
    data(){
        return{
            msg:'hello vue',
            number:1,
            rawHtml:'<h1>哈哈哈</h1>',
            red:'red',
            message:'message'
        }
    },
    methods:{
        say() {
            alert("hi");
        },
        change(){
            if(this.red === "red"){
                this.red = 'blue';
            }else{
                this.red = 'red';
            }
            
        }
    },
    filters:{
        capitalize(){
            return '123';
        }
    }
}
</script>


<style scoped>
.red{
    color: red;
}
.blue{
    color: blue;
}
</style>