随笔分类 -  vue基础

摘要:<!-- <template> <Main class="cccc"/> <component-a/> <slot-demo> <template #header="slotProps"> <p>插槽标题-{{slotProps.msg}}</p> </template> <template v-s 阅读全文
posted @ 2023-11-08 22:41 会秃头的小白 阅读(10) 评论(0) 推荐(0)
摘要:<template> <h3>CompA</h3> <component-b :onfun="dateFun"></component-b> <p>{{msg}}</p> </template> <script> import ComponentB from "@/components/Compon 阅读全文
posted @ 2023-11-08 22:23 会秃头的小白 阅读(6) 评论(0) 推荐(0)
摘要:<template> <!-- <Main class="cccc"/> <component-a/> --> <slot-demo> <template #header="slotProps"> <p>插槽标题-{{slotProps.msg}}</p> </template> <template 阅读全文
posted @ 2023-11-08 22:22 会秃头的小白 阅读(8) 评论(0) 推荐(0)
摘要:<template> <h3>监听器</h3> <p>{{message}}</p> <button @click="updateHandle">点击</button> </template> <script> export default { name: "WatchDemo", data(){ 阅读全文
posted @ 2023-11-07 22:56 会秃头的小白 阅读(12) 评论(0) 推荐(0)
摘要:<template> <p :style="{color:activeColor,fontSize:fontsize+'px'}"></p> </template> <script> export default { name: "StyleDemo", data(){ return{ active 阅读全文
posted @ 2023-11-07 22:55 会秃头的小白 阅读(11) 评论(0) 推荐(0)
摘要:<template> <div ref="contain">{{content}}</div> <button @click="getElemet">获取元素</button> <input type="text" ref="username"> </template> <script> expor 阅读全文
posted @ 2023-11-07 22:55 会秃头的小白 阅读(14) 评论(0) 推荐(0)
摘要:<template> <input type="text" v-model.lazy="message"> <div>{{message}}</div> <input type="checkbox" v-model="flag"> <div>{{flag}}</div> </template> <s 阅读全文
posted @ 2023-11-07 22:53 会秃头的小白 阅读(12) 评论(0) 推荐(0)
摘要:<template> <h3>事件修饰符</h3> <a @click="clickHandle" href="www.baidu.com">百度</a> <div @click="clickDiv"> <p @click="clickP">测试冒泡</p> </div> </template> < 阅读全文
posted @ 2023-11-07 22:52 会秃头的小白 阅读(8) 评论(0) 推荐(0)
摘要:<template> <p :class="{'active':isActive}">Class样式绑定</p> <p :class="Objec">Class样式绑定</p> <p :class="[arrActive,arrHasErr]">Class样式绑定3</p> <p :class="i 阅读全文
posted @ 2023-11-07 22:51 会秃头的小白 阅读(5) 评论(0) 推荐(0)
摘要:<template> <h3>数组</h3> <button @click="addnums">添加数据</button> <p v-for="(item,index) in nums" :key="index">{{item}}</p> </template> <script> export de 阅读全文
posted @ 2023-11-07 22:51 会秃头的小白 阅读(14) 评论(0) 推荐(0)
摘要:<template> <h3>模板语法</h3> <p>{{msg}}</p> <p>{{number+1}}</p> <p>{{flag? 'yes':'no'}}</p> <p>{{message.split("").reverse().join("")}}</p> <p v-html="raw 阅读全文
posted @ 2023-11-07 22:50 会秃头的小白 阅读(12) 评论(0) 推荐(0)