vue2_模板语法、数据绑定

2022-03-31 21:02:46 阅读：126 来源： 互联网

1、模板语法

Vue模板语法包括两大类

1 .插值语法

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

2 .指令语法

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

结果：

标签：el,绑定,标签,xxx,语法,Vue,vue2,data,模板
来源： https://www.cnblogs.com/fhzmasl/p/16084025.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue2_模板语法、数据绑定

1、模板语法

1 .插值语法

2 .指令语法

例子：