node 中的 express；
库（插件）：提供某一个小功能，对项目的侵入性较小，如果某个库无法完成某些需求，可以很容易切换到其它库实现需求。
1.从Jquery 切换到 Zepto
2.从 EJS 切换到 art-template
MVC 是后端的分层开发概念；
MVVM是前端视图层的概念，主要关注于 视图层分离，也就是说：MVVM把前端的视图层，分为了 三部分 Model, View , VM ViewModel
为什么有了MVC还要有MVVM
vue指令介绍
Vue指令之v-text和v-html
Vue指令之v-bind
-
直接使用指令
v-bind -
使用简化指令
: -
在绑定的时候，拼接绑定内容：
:title="btnTitle + ', 这是追加的内容'"
Vue指令之v-on和跑马灯效果
vue指令演示案例
html代码结构：
<div id="app"> <div>{{ msg }}</div> <!-- 使用 v-cloak 能够解决 插值表达式闪烁的问题 --> <div v-cloak>{{ msg }}</div> <div v-cloak>++++++++ {{ msg }} ----------</div> <!-- 默认 v-text 是没有闪烁问题的 --> <!-- v-text会覆盖元素中原本的内容，但是 插值表达式 只会替换自己的这个占位符，不会把 整个元素的内容清空 --> <div v-text="msg2">123456789</div> <!--v-html会覆盖元素中原本的内容,可以显示标签--> <div v-html="msg2">123456789</div> <!-- v-bind: 是 Vue中，提供的用于绑定属性的指令 --> <input type="button" value="v-bind演示" v-bind:title="mytitle"> <hr> <input type="button" value="v-bind简写演示" :title="mytitle"> <hr> <input type="button" value="v-bind拼接演示" :title="mytitle + '要努力啊'"> <!-- 注意： v-bind: 指令可以被简写为 :要绑定的属性 --> <!-- v-bind 中，可以写合法的JS表达式 --> <hr> <!-- Vue 中提供了 v-on: 事件绑定机制 --> <input type="button" value="v-on演示" v-on:click="show"> <hr> <input type="button" value="v-on简写演示" @click="show"> </div>
vue代码
<script> var vm = new Vue({ el: "#app", data: { msg: "沉迷学习，日渐消瘦", msg2: "<h1>我太难了</h1>", mytitle: "昨天，今天，明天，一天又一天，" }, methods: { // 这个 methods属性中定义了当前Vue实例所有可用的方法 show: function () { alert(" 你好，朋友") } } }) </script>
跑马灯案例
html部分代码
<div id="app"> <input type="button" value="浪起来" @click="start"> <input type="button" value="低调" @click="stop"> <h1 v-cloak>{{ msg }}</h1> </div>
vue代码结构
<script> // 注意：在 VM实例中，如果想要获取 data 上的数据， // 或者 想要调用 methods 中的 方法，必须通过 this.数据属性名 // 或 this.方法名 来进行访问，这里的this，就表示 我们 new 出来的 VM 实例对象 var vm = new Vue({ el: "#app", data: { msg: "猥琐发育，别浪~~!", intervalId:null //在data上定义id }, methods: { start() { // console.log(this.msg) //获取第一个字符 if(this.intervalId != null)return; this.intervalId=setInterval( ()=> { var get_start = this.msg.substring(0, 1); //获取第二个字符以后的所有字符 var get_end = this.msg.substring(1); // 重新拼接字符串 this.msg = get_end + get_start // 注意： VM实例，会监听自己身上 data 中所有数据的改变， // 只要数据一发生变化，就会自动把 最新的数据，从data 上同步到页面中去； // 【好处：程序员只需要关心数据，不需要考虑如何重新渲染DOM页面】 }, 400) }, stop(){ // 每当清除了定时器之后，需要重新把 intervalId 置为 null clearInterval(this.intervalId); this.intervalId = null } } }) // 分析： // 1. 给 【浪起来】 按钮，绑定一个点击事件 v-on @ // 2. 在按钮的事件处理函数中，写相关的业务逻辑代码：拿到 msg 字符串，然后 调用 字符串的 substring 来进行字符串的截取操作，把 第一个字符截取出来，放到最后一个位置即可； // 3. 为了实现点击下按钮，自动截取的功能，需要把 2 步骤中的代码，放到一个定时器中去； </script>
-
.stop 阻止冒泡
-
.prevent 阻止默认事件
-
.capture 添加事件侦听器时使用事件捕获模式
-
.self 只当事件在该元素本身（比如不是子元素）触发时触发回调
-
.once 事件只触发一次
事件修饰符演示案例：
html代码结构：
<style> .inner { height: 150px; background-color: blue; } .outer { padding: 40px; background-color: red; } </style> <div id="app"> <!-- 使用 .stop 阻止冒泡，阻止了冒泡行为，即外层的执行 --> <div class="inner" @click="div1Handler"> <input type="button" @click.stop="btnHandler" value="按钮"> </div> <!-- 使用 .prevent 阻止默认行为，阻止了a标签的行为 --> <a href="https://www.baidu.com" @click.prevent="linkHandler">百度一下</a> <!-- 使用 .capture 实现捕获触发事件的机制 ,从外层到里层--> <div class="inner" @click.capture="div1Handler"> <input type="button" @click="btnHandler" value="按钮"> </div> <hr> <!-- 使用 .self 实现只有点击当前元素时候，才会触发事件处理函数 --> <div class="inner" @click.self="div1Handler"> <input type="button" @click="btnHandler" value="按钮"> </div> <!-- 使用 .once 只触发一次事件处理函数 --> <a href="https://www.baidu.com" @click.prevent.once="linkHandler">百度一下</a> <!-- 演示： .stop 和 .self 的区别 --> <!-- .stop 会阻止所有冒泡行为的触发 --> <div class="outer" @click="div2Handler"> <div class="inner" @click="div1Handler"> <input type="button" @click.stop="btnHandler" value="按钮"> </div> </div> <hr> <!-- .self 只会阻止自己身上冒泡行为的触发，并不会真正阻止 冒泡的行为 --> <div class="outer" @click="div2Handler"> <div class="inner" @click.self="div1Handler"> <input type="button" @click="btnHandler" value="按钮"> </div> </div> </div>
vue代码
<script> var vm = new Vue({ el: "#app", data: {}, methods: { div1Handler() { console.log("这是触发inner的事件") }, btnHandler() { console.log("这是触发btn的事件") }, linkHandler() { console.log("这是触发了链接的事件") }, div2Handler() { console.log("这是触发outer的事件") } }, }) </script>
v-model实现双向绑定示例演示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <div><h1>{{ msg }}</h1> <!-- v-bind 只能实现数据的单向绑定，从 M 自动绑定到 V， 无法实现数据的双向绑定 --> <!-- <input type="text" v-bind:value="msg" style="width:100%;"> --> <!-- 使用 v-model 指令，可以实现 表单元素和 Model 中数据的双向数据绑定 --> <!-- 注意： v-model 只能运用在 表单元素中 --> <!-- input(radio, text, address, email....) select checkbox textarea --> <input type="text" v-model="msg" style="width:100%"> </div> </div> <script src="lib/vue-2.4.0.js"></script> <script> var vm = new Vue({ el: "#app", data: { msg: "少年不识愁滋味，爱上层楼" }, methods: {} }); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <input type="text" v-model="i1"> <select v-model="s1"> <option value="+">+</option> <option value="-">-</option> <option value="*">*</option> <option value="/">/</option> </select> <input type="text" v-model="i2"> <input type="button" value="=" @click="opt"> <input type="text" v-model="ret"> </div> <script src="lib/vue-2.4.0.js"></script> <script> var vm = new Vue({ el: "#app", data: { i1: 0, i2: 0, ret: 0, s1: "+" }, methods: { opt() { switch (this.s1) { case "-": this.ret = parseInt(this.i1) - parseInt(this.i2); break; case "*": this.ret = parseInt(this.i1) * parseInt(this.i2); break; case "/": this.ret = parseInt(this.i1) / parseInt(this.i2); break; default: this.ret = parseInt(this.i1) + parseInt(this.i2); } } } }); </script> </body> </html>
使用class样式
完整代码
1.数组
<h1 :class="['red','thin']">明天会更好</h1>
2.数组中使用三元表达式
<h1 :class="['red', 'thin', isactive?'active':'']">明天会更好</h1>
3.数组中嵌套对象
<h1 :class="['red', 'thin', {'active': isactive}]">明天会更好</h1>
4.直接使用对象
<h1 :class="{red:true, italic:true, active:true, thin:true}">明天会更好</h1>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <!-- 对象就是无序键值对的集合 --> <h1 :style="styleObj1">hello,world</h1> <h1 :style="[styleObj1,styleObj2]">hello,world</h1> </div> <script src="lib/vue-2.4.0.js"></script> <script> var vm = new Vue({ el: "#app", data: { styleObj1:{color:"red","font-weight":200}, styleObj2:{'font-style': 'italic'} }, methods: {} }) </script> </body> </html>
style样式
1.
<h1 :style="{color:"red","font-weight":200}">hello,world</h1>
data: {
styleObj1:{color:"red","font-weight":200},
}
在元素中，通过属性绑定的形式，将样式对象应用到元素中
<h1 :style="styleObj1">hello,world</h1>
data: {
styleObj1:{color:"red","font-weight":200},
styleObj2:{'font-style': 'italic'}
},
在元素中，通过属性绑定的形式，将样式对象应用到元素中
<h1 :style="[styleObj1,styleObj2]">hello,world</h1>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <ul> <li v-for="(value,index) in lst1">"index":{{ index }}--------"value":{{ value }}</li> </ul> </div> <script src="lib/vue-2.4.0.js"></script> <script> var vm = new Vue({ el: "#app", data: { lst1:[1,2,3,4,5,6,7,8], methods: {} }) </script> </body> </html>
2. 迭代对象数组
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <ul> <li v-for="(value,index) in lst2">"index":{{ index }}--"id":{{ value.id }}--"name":{{ value.name }}</li> </ul> </div> <script src="lib/vue-2.4.0.js"></script> <script> var vm = new Vue({ el: "#app", data: { lst2: [{id: 1, name: 'zs1'}, {id: 2, name: 'zs2'}, {id: 3, name: 'zs3'}, {id: 4, name: 'zs4'}] }, methods: {} }) </script> </body> </html>
3.迭代对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <ul> <li v-for="(value,key,index) in lst3">"index":{{ index }}--"key":{{ key }}--"value":{{ value }}</li> </ul> </div> <script src="lib/vue-2.4.0.js"></script> <script> var vm = new Vue({ el: "#app", data: { lst3:{ "name":"张晚七", "age":18, "hobby":"music" } }, methods: {} }) </script> </body> </html>
4.迭代数字
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <ul> <!-- in 后面我们放过 普通数组，对象数组，对象， 还可以放数字 --> <!-- 注意：如果使用 v-for 迭代数字的话，前面的 i值从 1 开始 --> <li v-for="i in 10">"value":{{ i }}</li> </ul> </div> <script src="lib/vue-2.4.0.js"></script> <script> var vm = new Vue({ el: "#app", data: {}, methods: {} }) </script> </body> </html>
2.2.0+ 的版本里，当在组件中使用 v-for 时，key 现在是必须的。
key属性的演示案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <div> <label>id: <input type="text" v-model="id"> </label> <label>name: <input type="text" v-model="name"> </label> <input type="submit" value="提交" @click="add"> </div> <p v-for="item in lst" :key="item.id"> <input type="checkbox">{{ item.id }}----{{ item.name }} </p> </div> <script src="lib/vue-2.4.0.js"></script> <script> var vm = new Vue({ el: "#app", data: { lst: [ {id: 1, name: "张晚七"}, {id: 2, name: "吕不韦"}, {id: 3, name: "赵高"}, {id: 4, name: "张三丰"}, ], id: "", name: "" }, methods: { add() { this.lst.unshift({id: this.id, name: this.name}); } } }); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <input type="button" value="toggle" @click="flag=!flag"> <!-- v-if 的特点：每次都会重新删除或创建元素 --> <!-- v-show 的特点： 每次不会重新进行DOM的删除和创建操作，只是切换了元素的 display:none 样式 --> <!-- v-if 有较高的切换性能消耗 --> <!-- v-show 有较高的初始渲染消耗 --> <!-- 如果元素涉及到频繁的切换，最好不要使用 v-if, 而是推荐使用 v-show --> <!-- 如果元素可能永远也不会被显示出来被用户看到，则推荐使用 v-if --> <h3 v-if="flag">这是v-if的flag</h3> <h3 v-show="flag">这是v-show的flag</h3> </div> <script src="lib/vue-2.4.0.js"></script> <script> var vm = new Vue({ el: "#app", data: { flag: true }, methods: {} }) </script> </body> </html>
知识点概要
<!-- 1. MVC 和 MVVM 的区别 --> <!-- 2. 学习了Vue中最基本代码的结构 --> <!-- 3. 插值表达式 v-cloak v-text v-html v-bind（缩写是:） v-on（缩写是@） v-model v-for v-if v-show --> <!-- 4. 事件修饰符 ： .stop .prevent .capture .self .once --> <!-- 5. el 指定要控制的区域 data 是个对象，指定了控制的区域内要用到的数据 methods 虽然带个s后缀，但是是个对象，这里可以自定义了方法 --> <!-- 6. 在 VM 实例中，如果要访问 data 上的数据，或者要访问 methods 中的方法， 必须带 this --> <!-- 7. 在 v-for 要会使用 key 属性 （只接受 string / number） --> <!-- 8. v-model 只能应用于表单元素 --> <!-- 9. 在vue中绑定样式两种方式 v-bind:class v-bind:style -->