Vue开发模式
1. html脚本导入vue.js核心包，局部模块改造。
样例：
<body><div id="app">{{ msg }}<div v-html="inerH"></div></div>
</body>
<script src=".\vue.js"></script>
<script>const app = new Vue({el: "#app",data: {msg: "Hello World",inerH: "<a href='' >百度</a>"}})
</script>
2. 核心包 & vue插件 工程化开发，项目化开发
vuex状态管理、vueRouter路由、webpack/vite项目构建。
Vue指令
| 指令 | 概括 |
|---|---|
{{ msg }} |
插值语法，动态渲染自定义属性值到页面。注意，无法渲染到标签属性 |
v-html |
直接将HTML代码插入到页面中渲染。注意：如果数据中包含恶意脚本或标签，可能会导致XSS（跨站脚本攻击）漏洞。因此，确保数据的来源是可信任的，避免使用用户提交的内容。 |
v-if、 v-else、v-else-if |
三个指令通常结合使用，根据if指令对应表达式的值，有条件的渲染DOM对象。 |
v-show |
根据表达式的值，有条件地通过css属的display:none显示和隐藏DOM对象。 |
v-on |
绑定标签事件。语法糖是@，如v-on:click="fn"=@click="fn"，通过Vue实例的methods的自定义方法，完成事件处理。 |
v-bind |
绑定标签属性。语法糖是:，如v-bind:src="imgUrl"=:src="imgUrl"，通过Vue实例的data自定义属性，完成标签属性的绑定。 |
v-for |
根据自定义集合等可遍历属性，对标签进行动态渲染，如"v-for=(item,index) in arr" :key="item.id"。其中index可省略，则遍历元素。:key唯一标识渲染对象，对DOM进行删除时，如果未标识:key，则不是进行定点删除，而是从底部减少项后，重新渲染剩余元素到页面。 |
v-model |
绑定表单标签，接受自定义属性名，双向绑定表单框内容和自定义属性内容。 |
methods中，访问自定义属性需要使用this.prop或<Vue实例名>.prop，模板语句可以直接访问自定义属性上下文