![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
PHPzCorrection status：qualified
Teacher's comments：完成的不错
Collection
Collection
<!DOCTYPE html><html lang="zh-CN"><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>Document</title><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script></head><style>.active {color: red;}.bgc {background-color: lightblue;}</style><body><!-- 引入js --><!-- 1. 挂载点:应用实例作用域 --><div id="app"><p>{{message}}</p><p v-text = "value"></p><div v-html="value"></div><p v-once="value"></p><p v-bind:style="{color:color,backgroundColor:bgc}">行内样式</p><!-- v-bind: 高频指令,可以简化, 冒号“：” --><!-- v-bind: 通常定义的是html标签中的"预定义"属性 --><p :style="{color:color,backgroundColor:bgc}">行内样式</p><!-- vue接管class属性 --><p :class="[class1,class2]">vue学习</p><p :class="{active:isActive,bgc:isBgc}">样式绑定</p></div><script>// 2.vue应用实例const app = Vue.createApp({// 根组件配置项data: function () {// 组件中要用的数据全部都声明在这个返回的对象中return {message: 'hello world',value :'<em style="color:red;">Hello php.cn</em>',bgc:'skyblue',color:'red',class1:'active',class2:'bgc',isActive:true,isBgc :true}}})// 3.应用实例 与 挂载点 进行绑定const vm = app.mount('#app')// 4. 数据注入: 声明的数据会自动注入到当前应用实例中console.log(vm);console.log(vm.message);// 5. 响应式vm.message = "vue.js"</script></body></html>