helloWorld.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app"> {{message}}</div>

    <div id="app2">
      <span v-bind:title="message">
          鼠标悬停几秒钟看此处动态绑定的提示信息
      </span>
    </div>

    <div id="app3">
        <span v-if='seen'>你可以看见我</span>
    </div>

    <div id="app4">
        <ul>
            <li v-for='todo in todos'>
                {{todo.text}}
            </li>
        </ul>
    </div>
    <div id="app5">
        <p>{{message}}</p>
        <button v-on:click="reverseM">反转</button>
    </div>
    <div id="app6">
        <p>{{message}}</p>
        <input type="text" v-model='message'>
    </div>
    <div id="app7">
        <ol>
            <todo-item 
            v-for="item in grocerryList"
            v-bind:todo='item'
            v-bind:key='item.id'
            ></todo-item>
        </ol>
    </div>
    <div id="example">
        <p>Original Message:{{message}}</p>
        <p>Computed reversed message:{{reverseMessage}}</p>
    </div>
    <div id="demo">{{fullName}}</div>

    <!-- <template v-if="loginType === 'username'">
            <label>Username</label>
            <input placeholder="Enter your username">
    </template>
    <template v-else>
            <label>Email</label>
            <input placeholder="Enter your email address">
    </template> -->
    <!-- 遍历数组 -->
    <ul id="ex-1">
        <li v-for='item in items'>
            {{item.message}}
        </li>
    </ul>
    <ul id="ex-2">
        <li v-for='(item,key) in items'>
          {{parentM}}-{{key}}-{{item.message}}
        </li>
    </ul>
    <!-- 遍历对象,一个参数是属性值
                  两个参数是属性值，属性名
                  三个参数是属性值，属性名，索引-->
    <ul id="inObject">
        <li v-for="(value,name,index) in object">
            {{name}}-{{value}}-{{index}}
        </li>
    </ul>
    <!-- 过滤  -->
    <ul id="getEven">
            <li v-for='n in evenNumber'>{{n}}</li>
    </ul>
    <!-- 事件监听 -->
    <div id="click">
        <button v-on:click='count+=1'>add</button>
        <p>The button has been clicked {{count}} times!</p>
        <button v-on:click='greet'>点一下</button>
    </div>
    <br><br>
    <div id="time">
        <input type="text" v-model="word"/>
        <p>{{word}}</p>
    </div>

    <script src="js/index.js"></script>
</body>
</html>