随笔分类 - VUE
摘要：1，先安装npm brew install npm npm init vite-app vue3demmo cd vue3demmo npm install npm run dev
阅读全文
摘要：1，在conponents目录中新建header.vue <template> <div> <h1>这是头部组件</h1> </div> </template> 2，在App.vue中添加 <template> <div> <Header></Header> <Main></Main> <Foote
阅读全文
摘要：axios功能强大的网络请求库。 <script src="https://unpkg.com/axios/dist/axios.min.js"></script> 基础使用： axios.get(地址?key=value&key2=values).then(function(response){}
阅读全文
摘要：功能需求： 新增 生成列表结构 获取用户输入 回车，新增数据 删除 点击删除指定内容(v-on splice) splice(index,1) 删除1个对应的索引 统计 v-text,length 清空 数组清空 隐藏 没有数据时，隐藏元素（v-if,v-show 数组非空） <div id='ap
阅读全文
摘要：1,v-for指令 根据数据生成列表结构 <div id='app'> <input type="button" value="添加数据" @click="add"> <input type="button" value="删除数据" @click="remove"> <ul> <li v-for=
阅读全文
摘要：知识点： 1，定义图片数组 2，添加图片索引 3，绑定src属性 4，图片切换逻辑 需求： 第一张图片不显示上一页（隐藏） 最后一张图片不显示下一页（隐藏） <div id='app'> <img :src="imgarr[index]"> <a href="#" v-show="index!=0"
阅读全文
摘要：1，v-show指令 根据表达式的真假，切换元素的显示和隐藏如：广告，遮罩层等 <div id='app'> <input type="button" value="切换显示状态" @click="changeIsshow"> <input type="button" value="增加年龄" @c
阅读全文
摘要：简单需求： 1，最小为0 ，小于0则不能再点击减少，并显示提示 2，最大值为10，小于10则可以点击增加，超过10则不能再点击，并显示提示 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>v-html测试 </title> <s
阅读全文
摘要：1，v-text指令 <div id='app'> <h2 v-text="message+'???'"></h2> <h2 v-text="info"></h2> <h2>{{message+'??'}}江苏</h2> </div> <script> Vue.config.productionTi
阅读全文
摘要：1，通过JS引入，学习的时候通过CDN即可 <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> 2，在HTML文件中 <!-- 初识Vue: 1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象； 2.r
阅读全文
