zoukankan      html  css  js  c++  java
  • Vue核心知识点

    第一个Vue程序

    环境搭建
           浏览器:Chrome
           IDE:Visual Studio Code 或者 WebStorm
           Node.js 8.9+ ,npm

    例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <div id="app">
        {{message}}
        <div>
            <input type="text" v-model="info">
            <button @click="headleClick">添加</button>
        </div>
        <ul>
            <!--<li v-for="item in list">{{item}}</li>-->
            <todo-item v-for="item in list" item="item"></todo-item>
        </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        Vue.component['todo-item',{
            props:['item'],
            template:'<li>{{item}}<li>'
        }]
        new Vue({
            el:'#app',
            data: {
                message: 'Hello Vue!',
                info:'',
                list:[],
            },
            methods:{
                headleClick(){
                    //console.log(this.info)
                    this.list.push(this.info)
                    this.info = ''
                }
            }
        })
    </script>
    
    </body>
    </html>

    展示效果图:

  • 相关阅读:
    catalina_home与catalina_base
    log4j配置
    lsof
    定时任务-crontab
    access日志配置
    java常识
    mysql事务隔离级别与实现原理
    文件描述符设置
    gpio 預設值
    synchronous interrupt and asynchronous interrupt
  • 原文地址:https://www.cnblogs.com/sunjiaojiao/p/11660749.html
Copyright © 2011-2022 走看看