Vue3学习记录(2)模板语法（vue2部分）

vue有自己的语法，可以按照官网学习，我再次记录一下。

一，文本   Mustache 也就是{{ }}双大括号，双大括号里面的会被值渲染。例如

 

二 v-html. vue会把返回来的值当做 字符串处理，想要将返回的字符串变为html，需要使用v-html例如：

<script >
    export default{
       data(){
        return{
            name:"<h1>绘梨衣</h1>" 
        }
       }
    }
</script>
<template>
    <div>
       <p v-html="name" ></p>
    </div>
</template>

请注意，使用v-html的话，我们就不能在使用双大括号语法，我们直接写在标签中即可。

v-once :一次性插值，修改的话不会更新

三 属性绑定

所谓属性就是每个标签的特性，不同于值，那么我们要怎么改变这些呢？

v-bind ---> :     使用v-bind标签，也可以用它的简写形式 :

给出例子，改变字体颜色

<script >
    export default{
       data(){
        return{
            name:"绘梨衣", 
            id:"aa"
        }
       },
       methods:{
        dianji:function(){
            this.id = "bb"
        }
       }
    }
</script>
<template>
    <div>
      <span   @click="dianji"    v-bind:class="id"   >{{name}}</span>
    </div>
</template>

<style scoped>
.aa{
   color: rgb(83, 125, 216);
}
.bb{
    color: rgb(110, 219, 128);
    size: 60px;
}

</style>

此时点击标签就可以改变字体颜色 。

我最开始的时候直接在<span>中使用v-bind:color也就是<span v-bind:color=">，结果怎么也不能改变，意思就是color size并不是vue可以改变的属性，属性就是class id 这两个来标识独一无二的特性，我们可以先写好对应的格式，然后通过改变id  class来修改样式。

v-on--->

也就是@用来监听事件，同时我们也可以使用javascript表达式

@click="id='bb'" <---简单的事件我们可以这样写

监听事件，我们需要在methonds中完善该事件，当我们完成该动作可以进行操作

动态参数---将属性动态使用  ---[ ]----里面可以填写属性