Vue2入门之超详细教程三-初识模板语法

1、简介

　　模板语法就是按照固定的模板去书写代码，分为插值语法和指令语法。

差值语法：

　　　　功能：用于解析标签体内容

　　　　写法：{{xxxx}},xxx是js表达式，且可以读取到data中的所有属性。

指令语法：

　　　　功能：用于解析标签(包括：标签属性、标签体内容、绑定事件)

　　　　写法：v-bind:href=”xxx”或简写为:href-”xxx”，xxx同样要写成js表达式，且可以直接读取到data中的所有属性。

　　学习Vue之前最后会一些HTML和CSS的基础知识，HTML基础知识传送门，CSS基础知识传送门。

2、模板语法

1. 插值语法

在vscode中创一个新目录，叫“02_Vue模板语法”，在下面创建一个“02_Vue模板语法_插值语法.html”文件，在里面输入以下代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <script tyoe="text/javascript" src="../js/development/vue.js"></script>

</head>

<body>

    <div id="root">

        <h1>插值语法</h1>

        <h1>你好，{{name}}</h1>

        <hr>

    </div>

    <script type="text/javascript">

        Vue.config.productionTip = false

        new Vue({

            el:"#root",

            data:{

                name:"jack"

            }

        })

    </script>

</body>

</html>

　　浏览器打开查看效果：

　　插值语法我们在上一节已经用过了，就是定义一个变量，然后在HTML中使用{{name}}去引用，这个就不多叙述了，查看效果时，下面有多出了一条横杠如下图：

　　这是HTML代码<hr>的效果，这里不多做介绍。

2. 指令语法

　　我们现在有这么一个需求，HTML中有一个a标签，当用户点击这个标签时，可以跳转到其他网页，但这个网页不是固定的，我们使用Vue实现它。

　　在“02_Vue模板语法”目录下，创建一个“02_Vue模板语法_指令语法.html”文件

　　在HTML的body中加入以下代码：

<a v-bind:href="url">点我去学习1</a>

　　其中v-bind是Vue的语法，表示href中的属性和Vue实例做了绑定，v-bind可以简写为”:”，就是单独的一个冒号。

　　在Vue实例中加入以下代码：

url:"https://www.cnblogs.com/lirongyang/"

　　完整代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <script tyoe="text/javascript" src="../js/development/vue.js"></script>

</head>

<body>

    <div id="root">

        <h1>插值语法</h1>

        <h1>你好，{{name}}</h1>

        <a v-bind:href="url">点我去学习1</a>

        <hr>

    </div>

    <script type="text/javascript">

        Vue.config.productionTip = false

        new Vue({

            el:"#root",

            data:{

                name:"jack",

                url:"https://www.cnblogs.com/lirongyang/"

            }

        })

    </script>

</body>

</html>

　　打开浏览器查看效果：

　　可以看到a标签中的值已经变为了我们需要跳转的地址。

3、测试

很多小伙伴可能会问，针对指令语法的需求，我们使用插值语法也能完成把，为啥非要用v-bind，感觉更麻烦了，不要着急我们做一个测试，在标签的属性中使用插值语法去获取信息。

　　完整代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <script tyoe="text/javascript" src="../js/development/vue.js"></script>

</head>

<body>

    <div id="root">

        <h1>插值语法</h1>

        <h1>你好，{{name}}</h1>

        <a href="{{url}}">点我去学习1</a>

        <hr>

    </div>

    <script type="text/javascript">

        Vue.config.productionTip = false

        new Vue({

            el:"#root",

            data:{

                name:"jack",

                url:"https://www.cnblogs.com/lirongyang/"

            }

        })

    </script>

</body>

</html>