![[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
| 序号 | 语法/指令 | 描述 |
|---|---|---|
| 1 | Vue.createApp |
创建vue实例 |
| 2 | data |
存放vue中的所有变量 |
| 3 | return |
返回需要用到的数据 |
| 4 | mount(ele) |
挂载，将vue创建的实例挂载到页面元素(ele)中 |
| 5 | v-text |
只能得到html标签中的文本内容，类似js中textContent |
| 6 | v-html |
可解析html标签，类似js中innerHTML |
| 7 | v-bind |
应用于样式绑定，高频指令，可用冒号:表示 |
| 8 | v-on |
vue的事件指令,高频指令，可用@表示 |
| 9 | v-model |
应用于数据的双向绑定 |
| 10 | obj.lazy |
lazy修饰符,类似js中 blur事件与change事件相结合 |
<!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><!-- 引入vue.js --><script src="vue.js"></script><style>.bgc {background-color: lightgreen;}.color {color: lightcoral;}.box {display: block;margin-top: 2px;border: 1px solid;border-radius: 5px;}</style></head><body><div class="app"><!-- vue中变量使用插值填充 --><h4>{{msg1}}</h4><h4>{{msg2}}</h4><!-- 使用v-text动态生成值 --><span v-text="message"></span><br /><!-- 使用v-html动态生成值 --><span v-html="messageHTML"></span><hr /><!-- v-bind样式绑定 以数组方式绑定--><span v-bind:class="cssArr">Hello World</span><!-- v-bind样式绑定 以对象方式绑定 简化v-bind为冒号--><span :class="cssObj">Hello World</span><!-- v-bind样式绑定 是否使用该样式 默认启用 反之禁用--><span :class="{bgc:isBgc}">Hello World</span><br /><!-- 数据双向绑定 --><!-- v-on: vue的事件指令 可简化为@表示 --><!-- @input : input事件，实时监听input值得变化--><!-- :v-tetx ： 将当前input的value值动态绑定给context变量 --><input type="text" @input="context = $event.target.value" :v-tetx="context" /><span>{{context}}</span><!-- v-model 数据双向绑定 --><hr /><!-- 数据双向绑定 使用v-model简化 --><!-- v-model="contextModel"===@input="contextModel = $event.target.value" --><input type="text" v-model="contextModel" :v-tetx="contextModel" /><span>{{contextModel}}</span><hr /><!-- 延迟绑定：修饰符 --><!-- lazy:失去焦点时改变值 blur事件 change事件相结合--><input type="text" v-model.lazy="contextLazy" :v-text="contextLazy" /><span>{{contextLazy}}</span></div><script>// Vue.createApp: 创建vue实例// data: 存放vue中的所有变量// return: 返回需要用到的数据// mount(ele): 挂载，将vue创建的实例挂载到页面元素(ele)中const app = Vue.createApp({data() {return {msg1: "这是vue插值",msg2: "这是vue插值",message: "使用v-text动态生成值",messageHTML: '<i style="color:red">v-html指令</i>',cssArr: ["bgc", "color", "box"],cssObj: {bgc: "bgc",color: "color",box: "box",},// 禁用‘.bgc的样式’bgc: "bgc",isBgc: false,context: "",contextModel: "",contextLazy: "",};},}).mount(".app");// 数据注入: 数据自动注入到了vue实例中 可以通过$data来使用console.log(app.$data.msg1);// 数据注入：因为数据已经被绑定到vue实例的app对象 所有可以以属性的方式老获取变量console.log(app.msg1);// 响应式更新变量app.msg2 = "响应式更新变量";</script></body></html>
