vue之实例化

最新推荐文章于 2024-06-26 15:00:00 发布

Renkx0404

最新推荐文章于 2024-06-26 15:00:00 发布

阅读量447

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/Renkx0404/article/details/84675231

vue实例化的属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdn.bootcss.com/minireset.css/0.0.2/minireset.css">
    <script src="https://cdn.bootcss.com/vue/2.5.15/vue.min.js"></script>
    <title>Document</title>
</head>
<body>
    <!-- 根容器 -->
    <div id="app">
        {{tit}}
        <!-- {{}}双花括号是vue模板的样式 -->
        <h1>{{greeting()}}</h1>
        <a v-bind:href="webLink">百度</a>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{     
                tit:"我是自定义的title",
                webLink:"www.baidu.com"
            },
            methods:{   
                greeting:function(){
                    return "hello word"
                }
            }
        })

    </script>
    /*
     * el:意为element-元素的意思，需要获取的元素，一定是html中的根容器元素
     * data:用于数据的存储，以key值和value值得形式
     * methods:用于存储各种方法
     *
     * 属性绑定v-bind: 可以将数据绑定到标签的属性
     * v-html可以展示一个标签，v-text：展示的是字符串
     */
</body>
</html>