Vue学习（一）——简单的操作Vue

最新推荐文章于 2023-08-02 17:18:45 发布

秃头的毛睿

最新推荐文章于 2023-08-02 17:18:45 发布

阅读量106

点赞数

本文链接：https://blog.csdn.net/weixin_45927758/article/details/108919427

版权

一.Hellow Vue

el:属性可以挂载元素，data可以存储变量数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="first">{{msg}}
    </div>
    <script src="../vue.js" ></script><!--导入vue-->
    <script>
        //let是变量，const是常量
        const app=new Vue({
            el:'#first',
            data:{
                msg:'Hellow Vue'
            }
        })
    </script>
</body>
</html>

二.Vue列表循环

v-for="items in list"该语句可以使得元素循环显示出列表中的所有元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="first">{{msg}}
        <ul>
            <li v-for="items in list">{{items}}</li>
        </ul>
    </div>
    <script src="../vue.js" ></script><!--导入vue-->
    <script>
        //let是变量，const是常量
        const app=new Vue({
            el:'#first',
            data:{
                msg:'Hellow Vue',
                list:['艾弗森','库里','欧文','保罗','莫兰特']
            }
        })
    </script>
</body>
</html>

三.Vue的方法定义

我们可以使用methods对象来定义Vue中需要操作的方法，使用v-on:click等为元素绑定相应的方法

有一点需要注意：注意vue对象中的data中存储的数据不能使用this.data.xxx来调用，直接this.xxx来调用

计数器案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="jishuqi">
        <h2>当前计数：{{number}}</h2>
        <button v-on:click="add">+</button>
        <button v-on:click="sub">-</button>
    </div>
    <script>
        const app=new Vue({
            el:'#jishuqi',
            data:{
                number:0
            },
            methods:{
                 add:function(){
                     this.number++;//注意vue对象中的data中存储的数据不能使用this.data.xxx来调用，直接this.xxx来调用
                 },
                 sub:function(){
                    this.number--;
                 }
            }
        })
    </script>
</body>
</html>

el可以传入一个字符串，也可以传入一个DOM选择器，它会根据传入的元素来选择之后管理哪一个DOM元素

data可以是一个Object，也可以是一个函数，在组件当中data必须是一个函数

秃头的毛睿

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue学习（一）——简单的操作Vue

一.Hellow Vueel:属性可以挂载元素，data可以存储变量数据<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>&lt
复制链接

扫一扫