vue入门

这是一个普通的渲染

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
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+=`
  • ${item.name}-${item.age}
  • `
    }); 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>Documenttitle>
        <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>
    
    
    
    

    你可能感兴趣的:(前端,vue.js,javascript,前端)