vue基本语法与指令
| 序号 |
语法/指令 |
描述 |
| 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>
vue的两个插件
