2、vue模板语法

最新推荐文章于 2024-10-18 17:49:11 发布

饮马瀚海呐

最新推荐文章于 2024-10-18 17:49:11 发布

阅读量220

点赞数

分类专栏： Vue2 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_44636569/article/details/127443629

版权

Vue2 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

Vue模板语法有2大类：（特别注意它俩用在什么地方）
1、插值语法：
功能：用于解析标签体内容。
写法：{{xxx}},xxx是js表达式，且可以直接读取到data中的所有属性。
2、指令语法：
功能：用于解析标签(包括：标签属性、标签体内容、绑定事件…)
举例：v-bind:href=“xxx” 或简写为 :href=“xxx”, xxx同样要写js表达式，
且可以直接读取到data中的所有属性。
备注:Vue中有很多的指令，且形式都是：v-???,此处我们只是拿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>
     <!-- 引入Vue.js -->
     <script type="text/javascript" src="/js/vue.js"></script>

</head>
<body>
    <!-- 
        Vue模板语法有2大类：（特别注意它俩用在什么地方）
            1、插值语法：
                功能：用于解析标签体内容。
                写法：{{xxx}},xxx是js表达式，且可以直接读取到data中的所有属性。
            2、指令语法：
                功能：用于解析标签(包括：标签属性、标签体内容、绑定事件.....)
                举例：v-bind:href="xxx" 或 简写为 :href="xxx", xxx同样要写js表达式，
                     且可以直接读取到data中的所有属性。
                备注:Vue中有很多的指令，且形式都是：v-????,此处我们只是拿v-bind举个例子。
     -->




    <!-- 准备好一个容器 -->
    <div id="root"><!-- 快捷方式创建div容器：div#root -->
        <h1>插值语法</h1>
        <h3>Hello,{{name.toUpperCase()}},{{address}}</h3>
        <h3>你好，{{school.url}}</h3>

        <hr>

        <h1>指令语法</h1>
        <a v-bind:href="school.url" v-bind:x="hello">点我去{{school.name}}学习</a>
         <!-- v-bind 可以给标签里的任何一个标签属性，动态的去绑定值 -->
        <a :href="school.url.toUpperCase()" :x="hello">点我去{{school.name}}学习2</a>
         <!-- v-bind可以简写为  : -->
        <a :href="Date.now()">点我去尚硅谷学习3</a>

       

    </div>

    <script type="text/javascript">
        //创建Vue实例(将容器和Vue建立联系)
        new Vue({
            el:'#root', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
            data:{  // data中用于存储数据，数据仅供el所指定的容器去使用，值我们暂时先写成一个对象。
                name:'jack',
                address:'beijing',
                hello:"你好",
                school:{
                    name:'shangguigu',
                    url:'http://www.atguigu.com/',
                }
                
            }
        })

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