Vue 基础练习

粉色小海狸

已于 2023-07-13 10:48:08 修改

阅读量59

点赞数

文章标签： vue.js 前端 javascript

于 2023-07-13 10:20:37 首次发布

本文链接：https://blog.csdn.net/weixin_45958839/article/details/131696643

版权

<!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>
    <!-- 1、引入VUE -->
    <script src ="vue.js"></script>
</head>
<body>
    <!-- 2、准备一个区域，让vue进行接管 -->
    <div id ="app">
    {{msg}}
    <hr>
    {{code == 1 ?"启用":"禁用"}}
    </div>
    <!--3、 创建vue对象，接管app的标签 -->
    <script>
        new Vue({
            el:"#app",// 让vue去接管， id值是app的标签
            data:{
                msg:"hello world!!",
                code:1
            }
        })
    </script>

</body>
</html>

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>v_bind</title>
    <script src ="vue.js"></script>
</head>
<body>
    <!-- v-bind 用来绑定属性  可以简写 ：属性= 变量名
     -->
    <div id="app">
        <a v-bind:href ="website">点我访问网站</a>
        <font v-bind:color ="ys">健健康康路径</font>
        <img v-bind:src ="img">
    </div>

    <script>
        new Vue({
            el:"#app",
            data:{
                    // 定义数据的地方
                    website:"http://www.baidu.com",
                    ys:"green",
                    img:"8.jpg"
            }
        })
    </script>
</body>
</html>

粉色小海狸

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue 基础练习

【代码】Vue 基础练习。
复制链接

扫一扫

Vue 基础练习

“相关推荐”对你有帮助么？