个人中心 | 微信开放社区

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> [代码]

GitHub账号

选择需要上架的开放服务

案例类型