Javascript

vue2_模板语法、数据绑定

本文主要是介绍vue2_模板语法、数据绑定，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

1、模板语法

Vue模板语法包括两大类

1 .插值语法

功能：用于解析标签体内容。插值语法往往用于指定标签体内容(双标签中间夹着的内容)
写法：{{xxx}} , xxx是js表达式，可以直接读取到data中的所有区域。

2 .指令语法

功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…）
举例：＜ a v-bind:href="xxx"＞ , xxx同样要写js表达式，可以直接读取到data中的所有属性。
备注：Vue中有很多的指令，且形式都是v-xxx ,此处只是拿v-bind举例。

例子：

即使用插值写法页面也无法进行标签内的解析如：
image

<!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>初始vue</title>
    <!-- 引入vue-->
    <script src="/vueBaseJs/vue.js"></script>
</head>
<body>

    <!-- 准备一个容器，用来存放vue的工作成果-->
    <div id="root">

        <a v-bind:href="url.toUpperCase()" v-bind:abcdefg="hello">点击去新世界</a>

    </div>


    <script>
        Vue.config.productionTip = false;//阻止vue在启动时生成生产提示

        //创建VUE实例
        new Vue({
            el:"#root",//el(Element)用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
            data:{//data中用于存储数据，数据提供给el所指定的容器使用，值可以为对象。
               url:"https://www.bilibili.com/",
               hello:"世界和平"
            }
        });

    </script>
    
</body>
</html>

结果：

image


这篇关于vue2_模板语法、数据绑定的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航