初入WEB前端（17）VUE 定义方法

最新推荐文章于 2023-12-10 16:35:49 发布

宋辰轩

最新推荐文章于 2023-12-10 16:35:49 发布

阅读量241

点赞数 1

分类专栏： HTML5

本文链接：https://blog.csdn.net/weixin_44004068/article/details/107105427

版权

HTML5 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

1.注意事项

为什么在Vue{（
el：“#app”
）}
呢？#可以认为是html的id选择器

new Vue({
        el:'#app',
        data:{
            major:'java'
        },
        methods:{    //定义方法
            sayHi:function(){
                alert("Hello Vue");
         }
        }
    })

一定不要忘了#，以及在定义新的块（如方法块）和新的参数时，加上“，”

2.定义数组、对象、方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<div id="app">
    我是一位{{major}}的程序员
    {{[1,2,3,4][1]}}
<!--  定义了一个json对象，对象里面是数组，通过数组下标1获得  -->
    <br>
    {{ {name:'xiaoming',age:20}.name }}
<!--    定义了一个json对象，对象里面是一个对象，通过.获得对象的值-->
    {{ sayHi() }}
</div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            major:'java'
        },
        methods:{    //定义方法
            sayHi:function(){
                alert("Hello Vue");
         }
        }
    })
</script>

</html>

截图：在这里插入图片描述

宋辰轩

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初入WEB前端（17）VUE 定义方法

1.注意事项new Vue({ el:'#app', data:{ major:'java' }, methods:{ //定义方法 sayHi:function(){ alert("Hello Vue"); } } })一定不要忘了#，以及在定义新的块（如方法块）和新的参数时，加上“，”2.定义数组、对象、方
复制链接

扫一扫