zoukankan      html  css  js  c++  java
  • 【Vue】第一个Vue例子

    代码:

    <!DOCTYPE html>
    <html lang="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
         <title>标题</title>
        </head>
    
         <body>
            <div id="app1" @click="handleClick">
                <span>{{message}}</span>
                <input type="text" v-bind:value="myValue"/>
                <p v-if="seen">现在你看到我了</p>
                <ul>
                    <li v-for="hobby in hobbies">
                      {{ hobby.text }}
                    </li>
                  </ul>
            </div>
         </body>
    </html>
    <script type="text/javascript">
    <!--
        // 脚本
        var app = new Vue({
          el: '#app1',
          data: {
            message: 'Hello Vue!',
            myValue:'19491001',
            seen:true,
            hobbies: [
              { text: '抽烟' },
              { text: '喝酒' },
              { text: '烫头' }
            ]
          },
          methods:{
            handleClick:function(){
                alert(1);
            }
          }
        })
    //-->
    </script>

    效果:

    这个Vue用Editplus也可以调试,这还不错。

    END

  • 相关阅读:
    Fliptile
    Face The Right Way
    Jessica's Reading Problem
    Subsequence
    Xcode下载途径
    target信息异常
    清除编译缓存DerivedDate
    Xcode快捷键
    Xcode忽略编译警告
    iOS项目Info.plist中关键字汇总
  • 原文地址:https://www.cnblogs.com/heyang78/p/15212735.html
Copyright © 2011-2022 走看看