收藏
PHPz批改状态：合格
老师批语：
<body><!-- 1.挂载点: vue实例的作用域 --><div class="app"><p>用户名: {{username}}</p></div><script>// 2. vue实例// 2.1 vue配置项// const config = {// // vue中的变量全部写到data()中// data() {// return {// // 需要返回的数据// username: '王老师',// };// },// };// 2.2 创建vue实例// const app = Vue.createApp(config);// 2.3 将vue实例与挂载点绑定// app.mount('.app');// 代码简化const app = Vue.createApp({data() {return {username: '王老师',};},}).mount('.app');// 3. 数据注入: 数据自动注入到了vue实例中console.log(app.$data.username);// 进一步简化// 原因: 数据,已经被绑定到vue实例app对象上// app.username = 'xxx'console.log(app.username);// 4. 响应式app.username = '张老师';</script></body>
<body><!-- vue指令: 'v-':前缀, 本质上就是html标签的"自定义属性" --><div class="app"><!-- v-text -> textContent --><!-- <p>用户名: <span v-text="username"></span></p> --><!-- v-html -> innerHTML --><p>用户名: <span v-html="username"></span></p></div><script>const app = Vue.createApp({data() {return {username: '牛老师',};},}).mount('.app');app.username = '<i style="color:red">张老师</i>';</script></body>
<script src="https://unpkg.com/vue@next"></script><style>.active {color: red;}.bgc {background-color: yellow;}</style></head><body><div class="app"><!-- 1. 行内: style --><!-- <p style="color: red">php.cn</p> --><!-- vue动态属性设置指令 v-bind:属性名 --><!-- <p v-bind:style="style">php.cn</p> --><p v-bind:style="{color:textColor,backgroundColor: bgc}">php.cn</p><p v-bind:style="[base, custom]">php.cn</p><!-- 2. 类样式: class --><p v-bind:class="active">Hello 猫老师</p><!-- classList --><p v-bind:class="{active: isActive}">Hello 猫老师</p><p class="active bgc">Hello 王老师</p><!-- v-bind:是高频指令, 可简化为冒号 --><p :class="['active', 'bgc']">Hello 王老师</p><p :class="[mycolor, mybgc]">Hello 王老师</p></div><script>const app = Vue.createApp({data() {return {// style: 'color: blue',textColor: 'green',bgc: 'wheat',base: {border: '1px solid',background: 'lightgreen',},custom: {color: 'white',padding: '15px',},active: 'active',isActive: true,mycolor: 'active',mybgc: 'bgc',};},}).mount('.app');</script></body>
<div class="app"><!-- <p> --><!-- v-on: vue的事件指令 --><!-- v-on: 高频指令, @表示 --><!-- <input type="text" @input="comment = $event.target.value":value="comment" /><span>{{comment}}</span></p> --><!-- vue为简化双向数据绑定, 创建一个语法糖: v-mode 指令 --><!-- $event 事件对象, 在vue不能直接用event --><!-- v-model="comment" ===> @input="comment = $event.target.value" --><!-- <p><input type="text" v-model="comment" :value="comment" /><span>{{comment}}</span></p> --><p><!-- 延迟绑定:修饰符 --><!-- blur 事件 change事件 --><input type="text" v-model.lazy="comment" :value="comment" /><span>{{comment}}</span></p></div><script>const app = Vue.createApp({data() {return {comment: null,};},}).mount('.app');</script>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
