Vue学习
文章平均质量分 91
what's your name.
时间就是金钱
展开
-
9.Vue插槽
默认插槽1:定义插槽。<script src="js/vue.global.js"></script><script> var app = Vue.createApp({}); app.component("KsdButton", { template: `<button><slot></slot></button>` }); app.mount("#app");<原创 2022-02-10 22:16:48 · 697 阅读 · 0 评论 -
8.Vue组件
组件的初始化全局注册:<div id="app"> <ksd-button></ksd-button> <ksd-time></ksd-time></div><script src="js/vue.global.js"></script><script> var app = Vue.createApp({ data() { re原创 2022-02-10 22:13:21 · 670 阅读 · 0 评论 -
7.Vue计算属性
基本使用1:定义测试数据和方法。<script src="js/vue.global.js"></script><script> var vm = Vue.createApp({ data() { return { message: "Hello Vue!!!" } }, computed: { revers原创 2022-02-09 22:02:03 · 328 阅读 · 0 评论 -
6.Vue操作数组
准备工作1:表格样式。<style> table { width: 100%; border-collapse: collapse; } table tr td { border: 1px solid #ccc; padding: 10px; } .container { background: #eee; padding: 20px; margin-bottom: 10px; }</style>2:表格内容。<div id="app">原创 2022-02-09 21:56:22 · 656 阅读 · 0 评论 -
5.Vue-axios异步的问题
axios 的执行方式1:定义测试数据和方法。<script src="js/vue.global.js"></script><script src="js/axios.min.js"></script><script> var vue = Vue.createApp({ data() { return { } }, created()原创 2022-02-09 21:47:38 · 556 阅读 · 0 评论 -
4.Vue风格切换
第一种方式:切换 class1:定义样式。<style> .dark .ksdui-container1 { background: #000000; height: 100px; } .dark .ksdui-link { color: #fff; } .light .ksdui-container1 { background: #fff; height: 100px; } .light .ksdui-link { color: #333; }</s原创 2022-02-08 21:16:27 · 707 阅读 · 0 评论 -
3.Vue监听
基本使用watch 可以监听 data 的数据。当 data 数据发生改变时执行函数。这个函数会传入两个参数,分别是 newVal 和 oldVal,也就是改变前和改变后的值。1:定义测试数据和监听。<script src="js/vue.global.js"></script><script> var vm = Vue.createApp({ data() { return { ti原创 2022-02-08 21:12:58 · 518 阅读 · 0 评论 -
2.v-model指令
基本使用v-model 是 vue 双向数据绑定的体现。v-model 只能用在 form 元素上,v-model 会自动忽略所有表单元素的 value、checked、selected 的初始值。1:定义测试数据和方法。<script src="js/vue.global.js"></script><script> var vue = Vue.createApp({ data() { return {原创 2022-02-08 21:11:04 · 745 阅读 · 0 评论 -
1.Vue指令
创建 HTML 文件<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"></div><script src="js/vue.global.js"></script><原创 2022-02-07 23:20:39 · 597 阅读 · 0 评论