Vue的模板语法

最新推荐文章于 2024-01-26 11:42:37 发布

YonChao

最新推荐文章于 2024-01-26 11:42:37 发布

阅读量49

点赞数

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

本文链接：https://blog.csdn.net/weixin_44141172/article/details/121339324

版权

Vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

02 模板语法之指令语法 v-bind

已经学过的：插值语法，即{{xxx}}将相应的数据插入容器。

插值语法一般用于标签体中

要学的：指令语法。v-bind：指令的使用可以简写为:

指令语法一般是用于标签属性中

使用了v-bind:后会将引号里的url当做js表达式执行

<!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>模板语法</title>
    <!-- 引入vue -->
    <script type="text/javascript" src="../js/vue.js"></script>

</head>

<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h1>插值语法</h1>
        <h3>你好,{{name}}</h3>
        <hr/>
        <h1>指令语法</h1>
        <!-- 使用了v-bind:后会将引号里的url当做js表达式执行 -->
        <a v-bind:href="url">点我去哔哩哔哩学习</a>
        <br/>
        <!-- v-bind: 可以简写为:-->
        <a :href="url">{{msg}}</a>
    </div>

    <script type="text/javascript">
        /* 开发环境提示关闭 */
        Vue.config.productionTip = false

        /* new一个Vue */
        new Vue({
            //容器
            /* el用于指定当前实例为那个容器服务，值通常为css选择器字符串 */
            el: '#root',
            //数据,提供给el对应的容器去使用
            data: {
                 name:'jack',
                 url:'https://www.bilibili.com/',
                 msg:'点我去哔哩哔哩娱乐'
            }
        })
    </script>
</body>
</html>

YonChao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue的模板语法

02 模板语法之指令语法 v-bind已经学过的：插值语法，即{{xxx}}将相应的数据插入容器。插值语法一般用于标签体中要学的：指令语法。v-bind：指令的使用可以简写为:指令语法一般是用于标签属性中使用了v-bind:后会将引号里的url当做js表达式执行<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X
复制链接

扫一扫