<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>第一个vue页面</title> <script src="https://unpkg.com/vue@next"></script> <!-- <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> --> <style> .active { color: orange; } .bgc { background-color: blue; } </style> </head> <body> <div id="firstVue"> <!-- 页面模板化：模板字面量 --> <p>{{content}}</p> <!-- v-text 相当于textContent --> <p v-text="name"></p> <!-- v-html 相当于innerHTML --> <p v-html="address"></p> <div> <!-- 行内样式 v-bind:style --> <!-- v-bind 可以简写成 : --> <p v-bind:style="{color:textColor,}">我是行内样式</p> <p v-bind:style="mycolor">我是行内样式2</p> <p v-bind:style="[mycolor]">我是行内样式3</p> </div> <div> <!-- class 类样式 --> <p v-bind:class="['active']">我是class样式</p> <p v-bind:class="[myactive]">我是class样式2</p> <p v-bind:class="{active:flag}">我是class样式3</p> <p class="bgc">我是原生class样式4</p> </div> <div> <!-- 数据双向绑定 --> <!-- 原生js --> <p> <input type="text" name="" id="" oninput="this.nextElementSibling.textContent = this.value" /> <span></span> </p> <!-- Vue双向数据绑定 v-on --> <!-- $event 事件对象, 在vue不能直接用event --> <!-- <p> <input type="text" style="background-color: gray" v-on:input="comment=$event.currentTarget.value" v-bind:value="comment" /> <span>{{comment}}</span > </p> --> <!-- Vue双向数据绑定 v-on --> <!-- $event 事件对象, 在vue不能直接用event --> <!-- 简写v-on: === @ ; v-bind: === : --> <!-- <p> <input type="text" style="background-color: yellow" @input="comment=$event.currentTarget.value" :value="comment" /> <span>{{comment}}</span> </p> --> <!-- 简写 v-model === v-on:input="comment = $event.currentTarget.value" --> <!-- <p><input type="text" style="background: orange" v-model="comment" :value="comment" /> <span>{{comment}}</span></p> --> <!-- 延迟绑定：修饰符 .lazy --> <p><input type="text" style="background: orange" v-model.lazy="comment" :value="comment" /> <span>{{comment}}</span></p> </div> </div> <script> const app = Vue.createApp({ data() { return { content: "这是一个Vue", name: "这是一个v-text", address: "<i>这是一个v-html</i>", textColor: "red", mycolor: { color: "red", }, myactive: "active", flag: true, comment: "", }; }, }); app.mount("#firstVue"); </script> </body></html>
