Vue的指令法

最新推荐文章于 2024-09-30 11:04:46 发布

终会为一

最新推荐文章于 2024-09-30 11:04:46 发布

阅读量452

点赞数 11

分类专栏： vue.0+vue3.0全套学习目录文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_73992463/article/details/134864470

版权

vue.0+vue3.0全套学习目录专栏收录该内容

30 篇文章 2 订阅

订阅专栏

本文介绍了Vue中v-bind指令的用法，以及插值语法如何解析标签内容。通过实例展示了如何在HTML中使用v-bind:href绑定URL和处理嵌套数据结构。

摘要由CSDN通过智能技术生成

 v-bind:href="url"

可以简写为

:href="url"

插值语法往往指定标签体的内容

如果在一个data中出现了两个同样的属性

1.给他进行重新的命名

2.把第二个属性放在另一个标签中

data:{
            name:'jack',
            url:'http://www.atguigu.com',
            hello:'你好',
            school:{
                name:'终会为一'
            },

        }

引用方法

<a v-bind:href="school.name" v-bind:x="hello">一点{{school.name}}就废了你的电脑</a>

完整的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初识vue</title>
    <!-- 引入vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
    
</head>
<body>
    <!-- 
        Vue 模板语法有两大类：
            1.插值语法：
        功能：用于解析标签内容。
        写法：{{xxx}},xxx是js表达式，且可以直接读取到data中的所有属性
            2.指令语法：
        功能用于解析标签（包括：标签属性，标签体的内容，绑定事件....）
        举例：v-bind：herf="xxx"或简写为：herf="xxx",xxx同样要写js的表达式。
            且可以直接读取到data中所有的属性
        备注vue 中有很多的指令，且形式都是：v-???，此处我们只是拿v-bind举个例子
     -->
    <!-- 准备一个容器 -->
    <div id="root">
        <h1>插值语法</h1>
        <h3>你好,{{name}}</h3>
        <hr/>   
        <h1>指令语法</h1>
        <a v-bind:href="school.name" v-bind:x="hello">一点{{school.name}}就废了你的电脑</a>
        <!-- <a :href="url" :x="hello">一点就废了你的电脑2</a> -->
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = true//设置为 false 以阻止 vue 在启动时生成生产提示
    new Vue({
        el:'#root',
        data:{
            name:'jack',
            url:'http://www.atguigu.com',
            hello:'你好',
            school:{
                name:'终会为一'
            },

        }
    })
</script>
</html>