Vue学习第一个程序

作者: 李多鱼8 | 来源:发表于2020-09-16 19:58 被阅读0次

环境搭建

浏览器：Chrome
IDE：webstorm 或者 vscode
Node.js8.9,npm

<html>
    <head>
        <title>第一个Vue实例</title>
        <style>
            .item{
                color:red;
            }
        </style>
    </head>
<body>
<div >hello world</div>    
<div id='app'>{{msg}}
    <div>
        <input type="text" v-model="info">
        <button @click='handleClick'>添加</button>
    <ul>
        <li v-for='item in list'>{{item}}</li>

        <hr>
        <todo-item v-for='item in list' :item='item'></todo-item>
    </ul>
    </div>

</div>  

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    Vue.component('todo-item',{    //自定义标签
            props:['item'],
            template:'<li class="item" >{{item}}</li>'
    })
    new Vue({
        el:'#app',  //注意前面的#是 id
        data(){
            return{
                msg:'hello geektime',
                info:'',
                list:[],
            }

        },
        methods:{
            handleClick(){
                //console.log(this.info)
                this.list.push(this.info)
                this.info=''
            }
        }
    })
</script>
</body>
</html>