vue 第一天（基本的结构）

最新推荐文章于 2024-08-07 20:34:45 发布

彼岸锋

最新推荐文章于 2024-08-07 20:34:45 发布

阅读量10w+

点赞数 1

分类专栏：自学vue 文章标签： vue vue.js 前端

本文链接：https://blog.csdn.net/weixin_43731532/article/details/114131203

版权

自学vue 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

vue 第一天（基本的结构）

el：就像我们的选择器一样里面是 # 就是id选择器里面是 . 就是class选择器直接写标签就是标签选择器也可以id+class 或多个id 等
data：相当于我们 el 表达式或者 thymeleaf 一样上面格式用 {{key}} 下面在data里面定义key和value
data中可以写数组还有对象。
methods：里面定义方法就像js里的函数一样

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script rel="javascript" src="../lib/vue.js"></script>
</head>
<body>
<div id="vue_one">
    <h1>site : {{site}}</h1>
    <h1>{{url}}</h1>
    <h1>{{details()}}</h1>
    <h1>{{no()}}</h1>
    <h1>{{shuzu}}</h1>
    <h1>{{obj}}</h1>
</div>
<script type="text/javascript">
    const obj = {
        duixiang : "我是对象那个",
        duixiang2 : "我也是"
    }
    const vm = new Vue({
        el: '#vue_one',
        data: {
            site: "我的第一个vue程序",
            url: "网址吗还没定",
            shuzu : ["篮球","足球","动漫"],
            obj
        },
        methods: {
            details: function() {
                return this.site + "- 要坚持下去";
            },
            no :function () {
                return this.details() +"- 没有什么不可以";
            }
        }
    })
</script>
</body>
</html>

花开一千年,花落一千年,花叶永不见

彼岸锋

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue 第一天（基本的结构）

vue 第一天（基本的结构）el：就像我们的选择器一样里面是 # 就是id选择器里面是 . 就是class选择器直接写标签就是标签选择器也可以id+class 或多个id 等data：相当于我们 el 表达式或者 thymeleaf 一样上面格式用 {{key}} 下面在data里面定义key和valuedata中可以写数组还有对象。 methods：里面定义方法就像js里的函数一样<!DOCTYPE html><html lang="en"><hea
复制链接

扫一扫

专栏目录