Vue模板语法

文本：

在html中通过{{}}（双大括号）中可以把Vue对象中的数据插入到网页中。并且只要Vue对象上对应的值发生改变了，那么html中双大括号中的值也会立马改变。

<div id="app">
    <p>{{username}}</p>
    <button v-on:click="change">点击修改</button>
</div>
<script>
    Vue.createApp({
        data: {
            "username": "知了课堂"
        },
        methods: {
            change: function(){
                this.username = 'China';
            }
        }
    }).mount("#app");
</script>

当然，如果在html的{{}}中，第一次渲染完成后，不想要跟着后期数据的更改而更改，那么可以使用v-once指令来实现。示例代码如下：

<p v-once>{{username}}</p>

显示原生的HTML：

有时候我们的Vue对象中，或者是后台返回给我们一个段原生的html代码，我们需要渲染出来，那么如果直接通过{{}}渲染，会把这个html代码当做字符串。这时候我们就可以通过v-html指令来实现。示例代码如下：

<div id="app">
    <div v-html="code"></div>
</div>
<script>
    Vue.createApp({
        el: "#app",
        data: {
            "code": "<a href='https://www.baidu.com/'>百度一下，你就知道！</a>"
        }
    }).mount("#app");
</script>

属性绑定：

如果我们想要在html元素的属性上绑定我们Vue对象中的变量，那么需要通过v-bind来实现。比如以下代码是不行的：

<div id="app">
    <img class="{{classname}}">你好，世界</p>
</div>
<script>
	Vue.createApp({
        el: "#app",
        data: {
            "classname": "pclass"
        },
    }).mount("#app");
</script>

需要使用v-bind才能生效：

<div id="app">
    <img v-bind:src="imgSrc" alt="">
</div>
<script>
    Vue.createApp({
        el: "#app",
        data: {
            "imgSrc": "https://i.ytimg.com/vi/5HKZ6bU6Zg0/maxresdefault.jpg"
        }
    }).mount("#app");
</script>

属性绑定Class和Style：

在绑定class或者style的时候，可以通过以下方式来实现。

绑定Class：

通过数组的方式来实现：

<div id="app">
    <p v-bind:class="[classname1,classname2]">你好，世界</p>
</div>
<script>
	Vue.createApp({
        el: "#app",
        data: {
            classname1: "pcolor",
            classname2: "pfont"
        }
    }).mount("#app");
</script>

通过对象的方式来实现：

<div id="app">
    <p v-bind:class="{pcolor:isColor,pfont:isFont}">你好，世界</p>
</div>
<script>
    Vue.createApp({
        el: "#app",
        data: {
            isColor: true,
            isFont: true
        }
    }).mount("#app");
</script>

绑定Style：

用对象的方式。示例代码如下：

# 读取对应样式的值
<li :style="{backgroundColor:pBgColor,fontSize:pFontSize}">首页</li>
# 或者是直接读取整个字符串
<li :style="liStyle">首页</li>

但是样式如果有横线，则都需要变成驼峰命名的方式。

用数组的方式。示例代码如下：

<li :style="[liStyle1,liStyle2]">首页</li>
<script>
    Vue.createApp({
      el: "#app",
      data: {
        liStyle: {
          backgroundColor: "red",
          fontSize: 14
        },
        liStyle2: {
          border: "1px solid blue"
        }
      }
    }).mount("#app")
  </script>

使用`JavaScript`表达式：

在使用了v-bind的html属性，或者使用了{{}}的文本。我们还可以执行一个JavaScript表达式。示例代码如下：

<div id="app">
    <p v-bind:class="color?'pcolor':''">{{username.split("").reverse().join("")}}</p>
</div>
<script>
    Vue.createApp({
        el: "#app",
        data: {
            username: "zhiliao ketang",
            color: false
        }
    }).mount("#app");
</script>

注意，只能是JavaScript表达式，不能是语句，比如var a=1;a=2;这样的是js语句，不是表达式了。

条件判断：

在模板中，可以根据条件进行渲染。条件用到的是v-if、v-else-if以及v-else来组合实现的。示例代码如下：

<div id="app">
    <p v-if="weather == 'sun'">今天去公园玩！</p>
    <p v-else-if="weather == 'rain'">今天去看电影！</p>
    <p v-else>今天哪儿也不去！</p>
</div>
<script>
    Vue.createApp({
        el: "#app",
        data: {
            weather: 'sun'
        }
    }).mount("#app");
</script>

有时候我们想要在一个条件中加载多个html元素，那么我们可以通过template元素上实现。示例代码如下：

<div id="app">
    <template v-if="age<18">
        <p>数学多少分？</p>
        <p>英语多少分？</p>
    </template>
    <template v-else-if="age>=18 && age<25">
        <p>女朋友找到了吗？</p>
        <p>考研究生了吗？</p>
    </template>
    <template v-else>
        <p>二胎生了吗？</p>
        <p>工资多少？</p>
    </template>
</div>
<script>
    Vue.createApp({
        el: "#app",
        data: {
            age: 24
        }
    }).mount("#app");
</script>

另外，在模板中，Vue会尽量重用已有的元素，而不是重新渲染，这样可以变得更加高效。如果你允许用户在不同的登录方式之间切换：

<div id="app">
    <template v-if="loginType=='username'">
        <label for="username">用户名：</label>
        <input type="text" id="username" name="username" placeholder="用户名">
    </template>
    <template v-else-if="loginType=='email'">
        <label for="email">邮箱：</label>
        <input type="text" id="email" name="email" placeholder="邮箱">
    </template>
    <div>
        <button v-on:click="changeLoginType">切换登录类型</button>
    </div>
</div>
<script>
    Vue.createApp({
        el: "#app",
        data: {
            loginType: "username"
        },
        methods: {
            changeLoginType: function(event){
                this.loginType = this.loginType=="username"?"email":"username";
            }
        }
    }).mount("#app");
</script>

这个里面会有一个问题，就是如果我在username的输入框中输入完信息，切换到邮箱中，之前的信息还是保留下来，这样肯定不符合需求的，如果我们想要让html元素每次切换的时候都重新渲染一遍，可以在需要重新渲染的元素上加上唯一的key属性，其中key属性推荐使用整形，字符串类型。示例代码如下：

<div id="app">
    <template v-if="loginType=='username'">
        <label for="username">用户名：</label>
        <input type="text" id="username" name="username" placeholder="用户名" key="username">
    </template>
    <template v-else-if="loginType=='email'">
        <label for="email">邮箱：</label>
        <input type="text" id="email" name="email" placeholder="邮箱" key="email">
    </template>
    <div>
        <button v-on:click="changeLoginType">切换登录类型</button>
    </div>
</div>

注意，<label>元素仍然会被高效地复用，因为它们没有添加key属性。

v-show和v-if：

v-if是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于CSS进行切换。
一般来说，v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用v-show较好；如果在运行时条件很少改变，则使用v-if较好。