zoukankan      html  css  js  c++  java
  • Vue 简单实用---代码可以直接用

    <!DOCTYPE html>
    <html>
    
    <head>
        <title></title>
        <script src="https://unpkg.com/vue"></script>
        <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
        <script type="text/javascript">
        $(function() {
            var app = new Vue({
                el: '#app1',
                data: {
                    message: "Hello Hu"
                }
    
    
            });
            app1 = new Vue({
                el: "#app-2",
                data: {
                    message: "Now is" + new Date().toLocaleString()
                }
            });
            app3 = new Vue({
                el: "#app-3",
                data: {
                    seen: true
                }
            });
            Vue.component('todo-item', {
                props: ['todo'],
                template: '<li>{{ todo.text }}</li>'
            })
            var app7 = new Vue({
                el: '#app-7',
                data: {
                    groceryList: [
                        { id: 0, text: '蔬菜' },
                        { id: 1, text: '奶酪' },
                        { id: 2, text: '随便其他什么人吃的东西' }
                    ]
                }
            })
        });
        </script>
    </head>
    
    <body>
        <div id="app1">
            <p>{{ message }}</p>
        </div>
        <div id="app-2">
            <span v-bind:title="message">
        		看看时间
        	</span>
        </div>
        <div id="app-3">
            <div>
                <p v-if="seen">你看到我了</p>
            </div>
        </div>
        <ol>
            <todo-item></todo-item>
        </ol>
        <div id="app-7">
            <ol>
                <todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id">
                </todo-item>
            </ol>
        </div>
    </body>
    
    </html>
    

      

  • 相关阅读:
    C#中标准Dispose模式的实现
    TcpListener 示例
    TCP/IP详解学习笔记
    TCP跟UDP乱侃
    Opencv 2.4.10 +VS2010 项目配置记录
    字符串作业及默写
    Flask 中的 Render Redirect HttpResponse
    运算符和编码作业及默写
    初识 Python 作业及默写
    初识 Python
  • 原文地址:https://www.cnblogs.com/huchaoheng/p/7735251.html
Copyright © 2011-2022 走看看