vue入门

lidengjia

已于 2023-08-13 14:08:06 修改

阅读量271

点赞数

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

于 2023-08-13 14:06:15 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_42595747/article/details/132259125

版权

前端专栏收录该内容

9 篇文章

订阅专栏

这是一个普通的渲染

<!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>
    <ul>

    </ul>
    <script>
        var person=[
            {name:"lidengjia",age:18},
            {name:"machaoqun",age:63},
            {name:"yilangui",age:32},
        ]
        // 注意字符串必须写在外面，forEach是一个回调函数，i面可以取到person的值，然后可以对person里面的值进行操作
        // 但是如果直接写在里面，那么就会报错，因为forEach是一个回调函数，所以里面的值是不可以被外面的值所取到的
        // 同时，forEach是一个循环，所以可以对person里面的值进行循环操作
        // 值得注意的是，forEach是一个回调函数，所以里面的值是不可以被外面的值所取到的
        // 同时，forEach是一个循环，所以可以对person里面的值进行循环操作
        // 先准备一个json，然后取到该json以及对应的标签选择器，然后嗲用innerHTML将值赋给标签选择器
        var str=' '
        var ul=document.querySelector('ul');
        person.forEach(item=>{
            str+=`<li>${item.name}-${item.age}</li>`
        });
        ul.innerHTML=str;
    </script>
</body>
</html>

这是vue的v-for渲染

<!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/vue.js"></script>
</head>
<body>
    <ul id="app">lidengjia is dog
        <li v-for="p in person">{{p.name}}-{{p.age}}</li>
    </ul>

    <script>
        Vue.config.productionTip=false;
        var app=new Vue({
            el:'#app',
            data:{
            person:[
                {name:'lidengjia',age:18,},
                {name:'zhouzhongding',age:18}
            ],
        },
    });
    </script>
</body>
</html>