Vue2随笔-251027

一. 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，模板语句可以直接访问自定义属性上下文

posted @ 2025-10-27 23:27  庶旁  阅读(8)  评论(0)    收藏  举报