个人中心 | 微信开放社区

爱迷彩服务小程序2.1.0版本（持续更新）---服务页面实现

服务页面实现截图如下 [图片] wxml文件 <view> <view> <view class="weui-search-bar"> <view class="weui-search-bar__form">  <view class="weui-search-bar__box"> <icon class="weui-icon-search_in-box" type="search" size="14"></icon> <input type="text" class="weui-search-bar__input" placeholder="请输入搜索内容"/> </view> </view>  <view class="weui-search-bar__cancel-btn" bindtap='方法名a'>搜索</view> </view> </view> <view class='mowei'> <view class='wodedingdan'> <image src='../imag/fengche.png'></image> <view class='ziti'>战友动态</view> </view> <view class='wodedingdan'> <image src='../imag/location.png'></image> <view class='ziti'>附近战友</view> </view> <view class='wodedingdan'> <image src='../imag/club.png'></image> <view class='ziti'>战友部落</view> </view> </view> <view class="menu"> <view class="menu-child"> <image class="menu-image" src="../imag/intnet.png"></image> <text class="txt1">互联网+创业项目</text> <image class="right-arrow" src="../imag/right-arrow.png"></image> </view> </view> <view class="menu"> <view class="menu-child"> <image class="menu-image" src="../imag/skills.png"></image> <text class="txt1">职业技能培训</text> <image class="right-arrow" src="../imag/right-arrow.png"></image> </view> </view> <view class="menu"> <view class="menu-child"> <image class="menu-image" src="../imag/policy.png"></image> <text class="txt1">政策解读通道</text> <image class="right-arrow" src="../imag/right-arrow.png"></image> </view> </view> <view class="menu"> <view class="menu-child"> <image class="menu-image" src="../imag/wangted.png"></image> <text class="txt1">就业招聘</text> <image class="right-arrow" src="../imag/right-arrow.png"></image> </view> </view> <view class="menu"> <view class="menu-child"> <image class="menu-image" src="../imag/imbark.png"></image> <text class="txt1">自主创业</text> <image class="right-arrow" src="../imag/right-arrow.png"></image> </view> </view> <view class="menu"> <view class="menu-child"> <image class="menu-image" src="../imag/commonwealth.png"></image> <text class="txt1">军旅公益</text> <image class="right-arrow" src="../imag/right-arrow.png"></image> </view> </view> <view class="menu"> <view class="menu-child"> <image class="menu-image" src="../imag/fund.png"></image> <text class="txt1">战友基金</text> <image class="right-arrow" src="../imag/right-arrow.png"></image> </view> </view> <view class="menu"> <view class="menu-child"> <image class="menu-image" src="../imag/league.png"></image> <text class="txt1">军盟</text> <image class="right-arrow" src="../imag/right-arrow.png"></image> </view> </view> <view class="menu"> <view class="menu-child"> <image class="menu-image" src="../imag/market.png"></image> <text class="txt1">战友商城</text> <image class="right-arrow" src="../imag/right-arrow.png"></image> </view> </view> <view class="menu"> <view class="menu-child"> <image class="menu-image" src="../imag/soldier.png"></image> <text class="txt1">爱迷彩服务</text> <image class="right-arrow" src="../imag/right-arrow.png"></image> </view> </view> </view> wxss文件 .weui-search-bar { position: relative; padding: 8px 10px; display: -webkit-box; display: -webkit-flex; display: flex; box-sizing: border-box; background-color: #EFEFF4; border-top: 1rpx solid #D7D6DC; border-bottom: 1rpx solid #D7D6DC; } .weui-icon-search_in-box { position: absolute; left: 10px; top: 7px; } .weui-search-bar__form { position: relative; -webkit-box-flex: 1; -webkit-flex: auto; flex: auto; border-radius: 5px; background: #FFFFFF; border: 1rpx solid #E6E6EA; } .weui-search-bar__box { position: relative; padding-left: 30px; padding-right: 30px; width: 100%; box-sizing: border-box; z-index: 1; } .weui-search-bar__input { height: 28px; line-height: 28px; font-size: 14px; } .weui-search-bar__cancel-btn { margin-left: 10px; line-height: 28px; color: #09BB07; white-space: nowrap; } .mowei { display: flex; width: 100%; /* margin-left: 20rpx; margin-right: 20rpx; */ font-size: 32rpx; margin-top: 50rpx; } .wodedingdan { width: 130rpx; text-align: center; font-size: 13px; flex-grow: 1; /* 均匀分布属性 */ } .wodedingdan image { width: 70rpx; height: 70rpx; } .ziti { margin-top: 10rpx; } .menu { height: 40px; display: flex; align-items: center; margin-top: 7px; background-color: #EFEFF4; border-radius: 8px; position: relative; /*父元素设置为相对位置*/ } .right-arrow{ height: 18px; width: 18px; right: 15px; position: absolute; /*让图片靠右距离5px,子元素设置为position：absolute，父元素设置为position：relative*/ } .menu-image { width: 30px; height: 30px; margin: 4px; } .txt1 { align-items:center; margin-left: 5px; font-size: 12px; } .menu-child{ display: flex; flex-direction: row; align-items: center; justify-content: center; } 总结：用到的几个重要的属性 display：flex; 将对象作为弹性伸缩盒显示，无需考虑不同浏览的兼容问题。 flex-direction:row; 主轴为水平方向，起点在左端。 align-items:center; 定义项目在交叉轴上如何对齐，center表示中轴线对齐。 justify-content:cneter; 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。 flex-grow:1; /*均匀分布*/ 动态点击事件等待后续更新完成，目前还在构思各个功能模块的页面，敬请等待，麻烦大家点赞收藏，给点意见，谢谢啦！

2021-11-18

3收藏2评论737浏览

vue的基础知识点总结

vue的基础知识点总结小程序的前端框架可以选用uniapp，是一款集成了vue的小程序前端开发框架，同时一套代码可以适配h5，安卓和小程序。对vue感兴趣的同学可以上手玩玩 vue的基础指令基本模板(不使用脚手架) [代码]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>02-Vue基本模板</title>  <script src="js/vue.js"></script> </head> <body> <div id="app"> <p>{{ name }}</p> </div> <script> // 2.创建一个Vue的实例对象 let vue = new Vue({ // 3.告诉Vue的实例对象, 将来需要控制界面上的哪个区域 el: '#app', // 4.告诉Vue的实例对象, 被控制区域的数据是什么 data: { name: "李南江" } }); </script> </body> </html>  [代码] vue数据的单项绑定 [代码]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>03-Vue数据单向传递</title>  <script src="js/vue.js"></script> </head> <body>   <div id="app"> <p>{{ name }}</p> </div> <script> // 这里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 这里就是MVVM中的Model data: { name: "李南江" } }); </script> </body> </html> [代码] v-model数据的双向传递 [代码]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>04-Vue数据双向传递</title> <script src="js/vue.js"></script> </head> <body>    <div id="app"> <p>{{ name }}</p> <input type="text" v-model="msg"> </div> <script> // 这里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 这里就是MVVM中的Model data: { name: "李南江", msg: "知播渔" } }); </script> </body> </html> [代码] v-once只渲染一次 [代码]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>05-常用指令-v-once</title> <script src="js/vue.js"></script> </head> <body>   <div id="app"> <p v-once>原始数据: {{ name }}</p> <p>当前数据: {{ name }}</p> </div> <script> // 这里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 这里就是MVVM中的Model data: { name: "李南江", } }); </script> </body> </html> [代码] v-cloak数据渲染完之后才显示 [代码]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>06-常用指令-v-cloak</title> <style> [v-cloak] { display: none } </style> </head> <body>   <div id="app"> <p v-cloak>{{ name }}</p> </div>  <script src="js/vue.js"></script> <script> // 这里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 这里就是MVVM中的Model data: { name: "李南江", } }); </script> </body> </html> [代码] v-text和v-html [代码]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>07-常用指令v-text和v-html</title> <script src="js/vue.js"></script> </head> <body>   <div id="app">          <p v-html="name">++++++++</p>  <p v-html="msg">++++++++</p> </div> <script> // 这里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 这里就是MVVM中的Model data: { name: "李南江", msg: "<span>我是span</span>" } }); </script> </body> </html> [代码] v-if [代码]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>08-常用指令v-if</title> <script src="js/vue.js"></script> </head> <body>     <div id="app">          <p v-if="score >= 80">优秀</p> <p v-else-if="score >= 60">良好</p> <p v-else>差</p> </div> <script> // 这里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 这里就是MVVM中的Model data: { show: true, hidden: false, age: 17, score: 50 } }); </script> </body> </html> [代码] v-show [代码]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>09-常用指令v-show</title> <script src="js/vue.js"></script> </head> <body>   <div id="app">       <p v-show="show">我是段落1</p> <p v-show="hidden">我是段落2</p> </div> <script> // 这里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 这里就是MVVM中的Model data: { show: true, hidden: false, age: 18 } }); </script> </body> </html> [代码] v-for [代码]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>10-常用指令v-for</title> <script src="js/vue.js"></script> </head> <body>   <div id="app"> <ul>     </ul> </div> <script> // 这里就是MVVM中的View Model let vue = new Vue({ el: "#app", // 这里就是MVVM中的Model data: { list: ["张三", "李四", "王五", "赵六"], obj: { name: "lnj", age: 33, gender: "man", class: "知播渔", }, }, }); </script> </body> </html> [代码] v-bind(语法糖: 😃 [代码]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>10-常用指令v-bind</title> <script src="js/vue.js"></script> </head> <body>   <div id="app">          <input type="text" :value="age + 1" /> </div> <script> // 这里就是MVVM中的View Model let vue = new Vue({ el: "#app", // 这里就是MVVM中的Model data: { name: "知播渔666", age: 18, }, }); </script> </body> </html> [代码] 绑定类名:class [代码]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>12-常用指令-绑定类名</title> <script src="js/vue.js"></script> <style> *{ margin: 0; padding: 0; } .size{ font-size: 100px; } .color{ color: red; } .active{ background: skyblue; } </style> </head> <body>   <div id="app">             <p :class="obj">我是段落</p> </div> <script> // 这里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 这里就是MVVM中的Model data: { flag: false, obj:{ 'size': false, 'color': false, 'active': true, } } }); </script> </body> </html> [代码] 绑定样式:style [代码]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>13-常用指令-绑定样式</title> <script src="js/vue.js"></script> </head> <body>   <div id="app">          <p :style="[obj1, obj2]">我是段落</p> </div> <script> // 这里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 这里就是MVVM中的Model data: { obj1:{ "color": "blue", "font-size": "100px" }, obj2: { "background-color": "red" } } }); </script> </body> </html> [代码] v-on(语法糖: @) [代码]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>14-常用指令-v-on</title> <script src="js/vue.js"></script> </head> <body>   <div id="app">      <button @click="myFn">我是按钮</button> </div> <script> // 这里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 这里就是MVVM中的Model data: { }, methods: { myFn(){ alert('lnj') } } }); </script> </body> </html> [代码] v-on的修饰符 [代码]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>15-常用指令-v-on修饰符</title> <script src="js/vue.js"></script> <style> * { margin: 0; padding: 0; } .a { width: 300px; height: 300px; background: red; } .b { width: 200px; height: 200px; background: blue; } .c { width: 100px; height: 100px; background: green; } </style> </head> <body>   <div id="app">             </div> <script> // 这里就是MVVM中的View Model let vue = new Vue({ el: "#app", // 这里就是MVVM中的Model data: {}, // 专门用于存储监听事件回调函数 methods: { myFn() { alert("lnj"); }, myFn1() { console.log("爷爷"); }, myFn2() { console.log("爸爸"); }, myFn3() { console.log("儿子"); }, }, }); </script> </body> </html> [代码] v-on的注意点 [代码]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>16-常用指令-v-on注意点</title> <script src="js/vue.js"></script> </head> <body>   <div id="app"> <button @click="myFn('lnj', 33, $event)">我是按钮</button> </div> <script> // 这里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 这里就是MVVM中的Model data: { gender: "man" }, // 专门用于存储监听事件回调函数 methods: { myFn(name, age, e){ // alert('lnj'); // console.log(name, age, e); console.log(this.gender); } } }); </script> </body> </html> [代码] v-on按键修饰符 [代码]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>17-常用指令-v-on按键修饰符</title> <script src="js/vue.js"></script> </head> <body>   <div id="app">  <input type="text" @keyup.f2="myFn"> </div> <script> Vue.config.keyCodes.f2 = 113; // 这里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 这里就是MVVM中的Model data: { }, // 专门用于存储监听事件回调函数 methods: { myFn(){ alert("lnj"); } } }); </script> </body> </html> [代码] vue自定义全局指令 [代码]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>18-常用指令-自定义指令</title> <script src="js/vue.js"></script> </head> <body>   <div id="app">  <input type="text" v-focus /> </div> <script> /* directive方法接收两个参数第一个参数: 指令的名称第二个参数: 对象注意点: 在自定义指令的时候, 在指定指令名称的时候, 不需要写v- 注意点: 指令可以在不同的生命周期阶段执行 bind: 指令被绑定到元素上的时候执行 inserted: 绑定指令的元素被添加到父元素上的时候执行 * */ Vue.directive("color", { // 这里的el就是被绑定指令的那个元素 bind: function (el) { el.style.color = "red"; }, }); Vue.directive("focus", { // 这里的el就是被绑定指令的那个元素 inserted: function (el) { el.focus(); }, }); // 这里就是MVVM中的View Model let vue = new Vue({ el: "#app", // 这里就是MVVM中的Model data: {}, // 专门用于存储监听事件回调函数 methods: {}, }); </script> </body> </html> [代码] 自定义指令传参 [代码]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>19-常用指令-自定义指令参数</title> <script src="js/vue.js"></script> </head> <body>   <div id="app">  <p v-color="curColor">我是段落</p> </div> <script> Vue.directive("color", { // 这里的el就是被绑定指令的那个元素 bind: function (el, obj) { // el.style.color = "red"; el.style.color = obj.value; } }); // 这里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 这里就是MVVM中的Model data: { curColor: 'green' }, // 专门用于存储监听事件回调函数 methods: { } }); </script> </body> </html> [代码] directives自定义局部指令 [代码]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>21-常用指令-自定义局部指令</title> <script src="js/vue.js"></script> </head> <body>   <div id="app1"> <p v-color="'blue'">我是段落</p> </div> <div id="app2"> <p v-color="'red'">我是段落</p> </div> <script> /* Vue.directive("color", { // 这里的el就是被绑定指令的那个元素 bind: function (el, obj) { el.style.color = obj.value; } }); */ // 这里就是MVVM中的View Model let vue1 = new Vue({ el: '#app1', // 这里就是MVVM中的Model data: {}, // 专门用于存储监听事件回调函数 methods: {} }); // 这里就是MVVM中的View Model let vue2 = new Vue({ el: '#app2', // 这里就是MVVM中的Model data: {}, // 专门用于存储监听事件回调函数 methods: {}, // 专门用于定义局部指令的 directives: { "color": { // 这里的el就是被绑定指令的那个元素 bind: function (el, obj) { el.style.color = obj.value; } } } }); </script> </body> </html> [代码] computed计算属性 [代码]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>22-Vue-计算属性</title> <script src="js/vue.js"></script> </head> <body>   <div id="app"> <p>{{name}}</p> <p>{{age + 1}}</p> <p>{{msg.split("").reverse().join("")}}</p>  <p>{{msg2}}</p> </div> <script> // 这里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 这里就是MVVM中的Model data: { name: "lnj", age: 18, msg: "abcdef" }, // 专门用于存储监听事件回调函数 methods: {}, // 专门用于定义计算属性的 computed: { msg2: function () { let res = "abcdef".split("").reverse().join(""); return res; } } }); </script> </body> </html> [代码] 计算属性和函数的区别 [代码]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>23-Vue-计算属性和函数</title> <script src="js/vue.js"></script> </head> <body>   <div id="app">  <p>{{msg2}}</p> <p>{{msg2}}</p> <p>{{msg2}}</p> </div> <script> // 这里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 这里就是MVVM中的Model data: { }, // 专门用于存储监听事件回调函数 methods: { /* 函数的特点: 每次调用都会执行 * */ msg1(){ console.log("msg1函数被执行了"); let res = "abcdef".split("").reverse().join(""); return res; } }, // 专门用于定义计算属性的 computed: { /* 计算属性的特点: 只要返回的结果没有发生变化, 那么计算属性就只会被执行一次计算属性的应用场景: 由于计算属性会将返回的结果缓存起来所以如果返回的数据不经常发生变化, 那么使用计算属性的性能会比使用函数的性能高 * */ msg2: function () { console.log("msg2计算属性被执行了"); let res = "abcdef".split("").reverse().join(""); return res; } } }); </script> </body> </html> [代码] 自定义全局的过滤器 [代码]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>24-Vue-自定义全局过滤器</title> <script src="js/vue.js"></script> </head> <body>   <div id="app">  <p>{{name | formartStr1 | formartStr2}}</p> </div> <script> /* 如何自定义一个全局过滤器通过Vue.filter(); filter方法接收两个参数第一个参数: 过滤器名称第二个参数: 处理数据的函数注意点: 默认情况下处理数据的函数接收一个参数, 就是当前要被处理的数据 * */ Vue.filter("formartStr1", function (value) { // console.log(value); value = value.replace(/学院/g, "大学"); console.log(value); return value; }); Vue.filter("formartStr2", function (value) { // console.log(value); value = value.replace(/大学/g, "幼儿园"); console.log(value); return value; }); // 这里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 这里就是MVVM中的Model data: { name: "知播渔学院, 指趣学院, 前端学院, 区块链学院" }, // 专门用于存储监听事件回调函数 methods: { }, // 专门用于定义计算属性的 computed: { } }); </script> </body> </html> [代码] filters自定义局部过滤器 [代码]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>24-Vue-自定义全局过滤器</title> <script src="js/vue.js"></script> </head> <body>   <div id="app1"> <p>{{name | formartStr}}</p> </div> <div id="app2"> <p>{{name | formartStr}}</p> </div> <script> /* Vue.filter("formartStr", function (value) { // console.log(value); value = value.replace(/学院/g, "大学"); // console.log(value); return value; }); */ // 这里就是MVVM中的View Model let vue1 = new Vue({ el: '#app1', // 这里就是MVVM中的Model data: { name: "知播渔学院, 指趣学院, 前端学院, 区块链学院" }, // 专门用于存储监听事件回调函数 methods: { }, // 专门用于定义计算属性的 computed: { } }); // 这里就是MVVM中的View Model let vue2 = new Vue({ el: '#app2', // 这里就是MVVM中的Model data: { name: "知播渔学院, 指趣学院, 前端学院, 区块链学院" }, // 专门用于存储监听事件回调函数 methods: { }, // 专门用于定义计算属性的 computed: { }, // 专门用于定义局部过滤器的 filters: { "formartStr": function (value) { // console.log(value); value = value.replace(/学院/g, "大学"); // console.log(value); return value; } } }); </script> </body> </html> [代码] 过滤器传参和String的原型方法padStart [代码]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>24-Vue-自定义全局过滤器</title> <script src="js/vue.js"></script> </head> <body>   <div id="app"> <p>{{time | dateFormart("yyyy-MM-dd")}}</p> </div> <script> /* 注意点: 在使用过滤器的时候, 可以在过滤器名称后面加上() 如果给过滤器的名称后面加上了(), 那么就可以给过滤器的函数传递参数 * */ Vue.filter("dateFormart", function (value, fmStr) { // console.log(fmStr); let date = new Date(value); let year = date.getFullYear(); let month = date.getMonth() + 1 + ""; let day = date.getDate() + ""; let hour = date.getHours() + ""; let minute = date.getMinutes() + ""; let second = date.getSeconds() + ""; if(fmStr && fmStr === "yyyy-MM-dd"){ return `${year}-${month.padStart(2, "0")}-${day.padStart(2, "0")}`; } return `${year}-${month.padStart(2, "0")}-${day.padStart(2, "0")} ${hour.padStart(2, "0")}:${minute.padStart(2, "0")}:${second.padStart(2, "0")}`; }); // 这里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 这里就是MVVM中的Model data: { time: Date.now() }, // 专门用于存储监听事件回调函数 methods: { }, // 专门用于定义计算属性的 computed: { } }); </script> </body> </html> [代码] vue过渡动画 trainsition [代码]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>28-Vue-过渡动画</title> <script src="js/vue.js"></script> <style> *{ margin: 0; padding: 0; } .box{ width: 200px; height: 200px; background: red; } .v-enter{ opacity: 0; } .v-enter-to{ opacity: 1; } .v-enter-active{ transition: all 3s; } .v-leave{ opacity: 1; } .v-leave-to{ opacity: 0; } .v-leave-active{ transition: all 3s; } </style> </head> <body>   <div id="app"> <button @click="toggle">我是按钮</button> <transition> <div class="box" v-show="isShow"></div> </transition> </div> <script> // 这里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 这里就是MVVM中的Model data: { isShow: false }, // 专门用于存储监听事件回调函数 methods: { toggle(){ this.isShow = !this.isShow; } }, // 专门用于定义计算属性的 computed: { } }); </script> </body> </html> [代码] 给多个组件添加不同的动画 [代码]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>29-Vue-过渡动画</title> <script src="js/vue.js"></script> <style> *{ margin: 0; padding: 0; } .box{ width: 200px; height: 200px; background: red; } .one-enter{ opacity: 0; } .one-enter-to{ opacity: 1; margin-left: 500px; } .one-enter-active{ transition: all 3s; } .two-enter{ opacity: 0; } .two-enter-to{ opacity: 1; margin-top: 500px; } .two-enter-active{ transition: all 3s; } </style> </head> <body>   <div id="app"> <button @click="toggle">我是按钮</button> <transition appear name="one"> <div class="box" v-show="isShow"></div>  </transition> <transition appear name="two"> <div class="box" v-show="isShow"></div> </transition> </div> <script> // 这里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 这里就是MVVM中的Model data: { isShow: true }, // 专门用于存储监听事件回调函数 methods: { toggle(){ this.isShow = !this.isShow; } }, // 专门用于定义计算属性的 computed: { } }); </script> </body> </html> [代码] 通过js钩子执行动画 [代码]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>30-Vue-过渡动画</title> <script src="js/vue.js"></script> <style> *{ margin: 0; padding: 0; } .box{ width: 200px; height: 200px; background: red; } .v-enter{ opacity: 0; } .v-enter-to{ opacity: 1; margin-left: 500px; } .v-enter-active{ transition: all 3s; } </style> </head> <body>   <div id="app"> <button @click="toggle">我是按钮</button>  <transition appear v-bind:css="false" v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:after-enter="afterEnter"> <div class="box" v-show="isShow"></div> </transition> </div> <script> // 这里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 这里就是MVVM中的Model data: { isShow: true }, // 专门用于存储监听事件回调函数 methods: { toggle(){ this.isShow = !this.isShow; }, beforeEnter(el){ // 进入动画开始之前 console.log("beforeEnter"); el.style.opacity = "0"; }, enter(el, done){ // 进入动画执行过程中 console.log("enter"); /* 注意点: 如果是通过JS钩子来实现过渡动画那么必须在动画执行过程中的回调函数中写上 el.offsetWidth / el.offsetHeight * */ // el.offsetWidth; el.offsetHeight; el.style.transition = "all 3s"; /* 注意点: 动画执行完毕之后一定要调用done回调函数否则后续的afterEnter钩子函数不会被执行 * */ // done(); /* 注意点: 如果想让元素一进来就有动画, 那么最好延迟以下再调用done方法 * */ setTimeout(function () { done(); }, 0); }, afterEnter(el){ // 进入动画执行完毕之后 console.log("afterEnter"); el.style.opacity = "1"; el.style.marginLeft = "500px"; } }, // 专门用于定义计算属性的 computed: { } }); </script> </body> </html> [代码] 自定义类名动画 [代码]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>32-Vue-过渡动画</title> <script src="js/vue.js"></script> <style> *{ margin: 0; padding: 0; } .box{ width: 200px; height: 200px; background: red; } .a{ opacity: 0; } .b{ opacity: 1; margin-left: 500px; } .c{ transition: all 3s; } </style> </head> <body>   <div id="app"> <button @click="toggle">我是按钮</button> <transition appear enter-class="a" enter-active-class="c" enter-to-class="b"> <div class="box" v-show="isShow"></div> </transition> </div> <script> // 这里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 这里就是MVVM中的Model data: { isShow: true }, // 专门用于存储监听事件回调函数 methods: { toggle(){ this.isShow = !this.isShow; } }, // 专门用于定义计算属性的 computed: { } }); </script> </body> </html> [代码] Animate动画库的使用 [代码]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>33-Vue-过渡动画</title> <script src="js/vue.js"></script> <style> *{ margin: 0; padding: 0; } .box{ width: 200px; height: 200px; background: red; } </style> <link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css"> </head> <body>   <div id="app"> <button @click="toggle">我是按钮</button> <transition appear enter-class="" enter-active-class="animated bounceInRight" enter-to-class=""> <div class="box" v-show="isShow"></div> </transition> </div> <script> // 这里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 这里就是MVVM中的Model data: { isShow: true }, // 专门用于存储监听事件回调函数 methods: { toggle(){ this.isShow = !this.isShow; } }, // 专门用于定义计算属性的 computed: { } }); </script> </body> </html> [代码] v-for中的key作用 [代码]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>35-Vue-过渡动画</title> <script src="js/vue.js"></script> <style> *{ margin: 0; padding: 0; } .v-enter{ opacity: 0; } .v-enter-to{ opacity: 1; } .v-enter-active{ transition: all 3s; } .v-leave{ opacity: 1; } .v-leave-to{ opacity: 0; } .v-leave-active{ transition: all 3s; } </style> </head> <body>   <div id="app"> <form> <input type="text" v-model="name"> <input type="submit" value="添加" @click.prevent="add"> </form> <ul> <transition-group appear> <li v-for="(person,index) in persons" :key="person.id" @click="del(index)"> <input type="checkbox"> <span>{{index}} --- {{person.name}}</span> </li> </transition-group> </ul> </div> <script> // 这里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 这里就是MVVM中的Model data: { persons: [ {name: "zs", id: 1}, {name: "ls", id: 2}, {name: "ww", id: 3} ], name: "" }, // 专门用于存储监听事件回调函数 methods: { add(){ let lastPerson = this.persons[this.persons.length - 1]; let newPerson = {name: this.name, id: lastPerson.id + 1}; // this.persons.push(newPerson); this.persons.unshift(newPerson); this.name = ""; }, del(index){ this.persons.splice(index, 1); } }, // 专门用于定义计算属性的 computed: { } }); </script> </body> </html> [代码] transition-group的使用 [代码]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>35-Vue-过渡动画</title> <script src="js/vue.js"></script> <style> *{ margin: 0; padding: 0; } .v-enter{ opacity: 0; } .v-enter-to{ opacity: 1; } .v-enter-active{ transition: all 3s; } .v-leave{ opacity: 1; } .v-leave-to{ opacity: 0; } .v-leave-active{ transition: all 3s; } </style> </head> <body>   <div id="app"> <form> <input type="text" v-model="name"> <input type="submit" value="添加" @click.prevent="add"> </form> <ul> <transition-group appear> <li v-for="(person,index) in persons" :key="person.id" @click="del(index)"> <input type="checkbox"> <span>{{index}} --- {{person.name}}</span> </li> </transition-group> </ul> </div> <script> // 这里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 这里就是MVVM中的Model data: { persons: [ {name: "zs", id: 1}, {name: "ls", id: 2}, {name: "ww", id: 3} ], name: "" }, // 专门用于存储监听事件回调函数 methods: { add(){ let lastPerson = this.persons[this.persons.length - 1]; let newPerson = {name: this.name, id: lastPerson.id + 1}; // this.persons.push(newPerson); this.persons.unshift(newPerson); this.name = ""; }, del(index){ this.persons.splice(index, 1); } }, // 专门用于定义计算属性的 computed: { } }); </script> </body> </html> [代码] transition-group的注意点 [代码]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>36-Vue-过渡动画</title> <script src="js/vue.js"></script> <style> *{ margin: 0; padding: 0; } .v-enter{ opacity: 0; } .v-enter-to{ opacity: 1; } .v-enter-active{ transition: all 3s; } .v-leave{ opacity: 1; } .v-leave-to{ opacity: 0; } .v-leave-active{ transition: all 3s; } </style> </head> <body>   <div id="app"> <form> <input type="text" v-model="name"> <input type="submit" value="添加" @click.prevent="add"> </form>  <transition-group appear tag="ul"> <li v-for="(person,index) in persons" :key="person.id" @click="del(index)"> <input type="checkbox"> <span>{{index}} --- {{person.name}}</span> </li> </transition-group>  </div> <script> // 这里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 这里就是MVVM中的Model data: { persons: [ {name: "zs", id: 1}, {name: "ls", id: 2}, {name: "ww", id: 3} ], name: "", id: 3 }, // 专门用于存储监听事件回调函数 methods: { add(){ this.id++; // let lastPerson = this.persons[this.persons.length - 1]; let newPerson = {name: this.name, id: this.id}; // this.persons.push(newPerson); this.persons.unshift(newPerson); this.name = ""; }, del(index){ this.persons.splice(index, 1); } }, // 专门用于定义计算属性的 computed: { } }); </script> </body> </html> [代码] 组件化开发自定义全局组件 [代码]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>37-Vue组件-自定义全局组件</title> <script src="js/vue.js"></script> </head> <body>   <div id="app">  <abc></abc> </div> <script> // 3.1创建组件构造器 let Profile = Vue.extend({ // 注意点: 在创建组件指定组件的模板的时候, 模板只能有一个根元素 template: ` <div> <img src="images/fm.jpg"/> <p>我是描述信息</p> </div> ` }); // 3.2注册已经创建好的组件 // 第一个参数: 指定注册的组件的名称 // 第二个参数: 传入已经创建好的组件构造器 Vue.component("abc", Profile ); // 这里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 这里就是MVVM中的Model data: { }, // 专门用于存储监听事件回调函数 methods: { }, // 专门用于定义计算属性的 computed: { } }); </script> </body> </html> [代码] 自定义全局组件的注意点首先vue.component(组件名，组件对象)可以代替vue.extend script标签中可以定义组件，加上id属性 template标签加上id属性才是vue官方的方式 [代码]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>38-Vue组件-自定义全局组件</title> <script src="js/vue.js"></script> </head> <body>   <div id="app">  <abc></abc> </div>  <template id="info"> <div> <img src="images/fm.jpg"/> <p>我是描述信息</p> </div> </template> <script> // 3.1创建组件构造器 /* let Profile = Vue.extend({ // 注意点: 在创建组件指定组件的模板的时候, 模板只能有一个根元素 template: ` <div> <img src="images/fm.jpg"/> <p>我是描述信息</p> </div> ` }); */ /* let obj = { // 注意点: 在创建组件指定组件的模板的时候, 模板只能有一个根元素 template: ` <div> <img src="images/fm.jpg"/> <p>我是描述信息</p> </div> ` }; */ // 3.2注册已经创建好的组件 // 第一个参数: 指定注册的组件的名称 // 第二个参数: 传入已经创建好的组件构造器 // Vue.component("abc", Profile ); // Vue.component("abc", obj ); /* Vue.component("abc", { // 注意点: 在创建组件指定组件的模板的时候, 模板只能有一个根元素 template: ` <div> <img src="images/fm.jpg"/> <p>我是描述信息</p> </div> ` }); */ Vue.component("abc", { // 注意点: 在创建组件指定组件的模板的时候, 模板只能有一个根元素 template: "#info" }); // 这里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 这里就是MVVM中的Model data: { }, // 专门用于存储监听事件回调函数 methods: { }, // 专门用于定义计算属性的 computed: { } }); </script> </body> </html> [代码] 自定义局部组件 [代码]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>39-Vue组件-自定义局部组件</title> <script src="js/vue.js"></script> </head> <body>   <div id="app1"> <abc></abc> </div> <div id="app2"> <abc></abc> </div> <template id="info"> <div> <img src="images/fm.jpg"/> <p>我是描述信息</p> </div> </template> <script> /* // 自定义全局组件 Vue.component("abc", { // 注意点: 在创建组件指定组件的模板的时候, 模板只能有一个根元素 template: "#info" }); */ // 这里就是MVVM中的View Model let vue1 = new Vue({ el: '#app1', // 这里就是MVVM中的Model data: { }, // 专门用于存储监听事件回调函数 methods: { }, // 专门用于定义计算属性的 computed: { } }); // 这里就是MVVM中的View Model let vue2 = new Vue({ el: '#app2', // 这里就是MVVM中的Model data: { }, // 专门用于存储监听事件回调函数 methods: { }, // 专门用于定义计算属性的 computed: { }, // 专门用于定义局部组件的 components: { "abc": { // 注意点: 在创建组件指定组件的模板的时候, 模板只能有一个根元素 template: "#info" } } }); </script> </body> </html> [代码]

2021-11-16

7收藏8评论1331浏览

Vue开发之旅——我的博客搭建记录（二）

博客2.0，堂堂更新（11.10）引入markdown 接上回，博客内容写在textarea里没有排版，也不能塞代码，限制过多。便引入了vue的markdown插件——v-md-editor，支持markdown的实时渲染，内容丰富度大大地提高了。 [图片] [图片] 博客详情之前实现的[博客]页仅仅展示了博客标题与博客摘要，需要实现点击卡片进入单个博客内部，展示完整内容。这时便需要在路由中设置如下内容： [图片] 在点击博客标题时，通过router-link :to="'/blog/+blog.id"将blog id传至单独页，单独页中使用this.$route.params.id来接收，再通过leancloud接口实现过滤。 [图片] router vue的路由默认使用的是hash模式，这样会在地址中出现一个#号，看起来听扎眼的。使用history模式可以去除这一#号，vue3中通过createWebHistory()使用history模式。App.vue是挂载网页的根节点，在这个文件中设置router-view实现路由切换，也可设置整个网页的头图与底部图。 [图片] 界面美观借鉴了许多博客设计，最后采取Fblog的界面设计（https://gitee.com/fengziy/Fblog#http://www.fengziy.cn/fBlog/），博客封面通过写博客时增加输入网络图片地址实现（暂时没实现本地图片上传）。 [图片] 在拉取数据时，发现图片怎么都加载不出来，检查代码，才想起图片赋值是动态的，不应该使用img src，而是使用img :src，实现动态数据绑定。一次加载过多图片会减慢速度，在此改用图片懒加载v-lazy，未访问的数据暂时先不加载。使用v-lazy也很方便，将img标签改成v-lazy就可以，同时在main.js文件中设置懒加载未加载时的图片。 [图片] （古见同学真可爱，嘿嘿） [图片]

2021-11-16

4收藏5评论668浏览

GitHub账号

选择需要上架的开放服务

案例类型